Projects People Resources Semesters Blog About
🐛

Web Essentials (HTML, CSS, & JS)

Last Updated: 30 December, 2022

What’s Front-end?

Web apps are apps that run on the web. Instead of living on your computer’s hard drive, they live on a server. Users like these because they have no installation or update process.

Applications are often broken into two sections, front-end and back-end. Front-end is the user interface or what you see. This includes buttons, links, images, and text. The back-end is the logic and data behind the scenes. It handles user authentication, data storage, and more.

To work together, the front-end and back-end send and receive data to display and save. Some websites that don’t need to store data may not even require a back-end!

The Building Blocks

Many simple apps are created using HTML, CSS, and JavaScript (or TypeScript). This is a lightweight method for creating a website. You can also use a framework library to handle many of the implementation details for you.

The Languages

  • HTML: Building blocks of the website’s layout.
  • HTML
    HTML
  • CSS: Style the building blocks (position, font size, color, etc.)
  • CSS
    CSS
  • JavaScript: Add functionality to the building blocks!
  • JavaScript
    JavaScript
    TypeScript
    TypeScript

HTML

Blocks begin with <tag> and end with </tag>, with content in the middle. The ‘tag’ string determines what type of element the block is:

<p>This is a paragraph, as denoted by the tags.</p>

CSS and JavaScript access these blocks to provide format and functionality, so HTML is usually coded first.

A website made of un-styled HTML
A website made of un-styled HTML

CSS

HTML frames the website, and CSS makes it look like yours. Styling is stored in .css files or in the style attribute of HTML elements.

<p style="width: 80%">I'm a styled paragraph tag.</p>
CSS inside the style attribute

/* 
 * In your HTML file, connect the CSS file using:
 * <link rel="stylesheet" href="<file-name>.css"> 
 */

.button { 
	/* 
	 * Use a `class selector` to modify any HTML elements 
	 * adopting the button class 
   */
	color: white;
	border-radius: 5px;
	padding: 10px 20px;
	text-align: center;
	font-size: 16px;
}

p.important {
	/*
   * Modify paragraphs which adopt the `important` class
   */
	background: blue;
}
Using a stylesheet to adopt CSS.

JavaScript

While HTML adds elements to the page and CSS can add hover effects and other interactivity, JavaScript provides functionality. JavaScript is stored in .js files or in <script> elements. It uses a similar™ syntax to Java, so it might look familiar. Like Java, data types which are not primitive are Objects with attributes (fields) and functions.

const para = document.querySelector('p');

para.addEventListener('click', updateName);

function updateName() {
	const name = prompt('Enter a new name');
	para.textContent = `Player 1: ${name}`
}

JavaScript lets you manipulate data for your webpage. Often data is handled through a backend by an API call. Data is often stored in a format called JSON (JavaScript Object Notation) which relies on key-value pairs. Below is an example of a JavaScript object with JSON notation:

let profile = {
	name: "Paws",
	age: 24,
	isHuman: false
}

Note how each property has a name and a value, but no strictly defined type. (It should feel very similar to Dr. Racket!) You can access or create each property using a selector through dot-notation:

profile.age = 100; // change age from 24 to 100.
profile.height = 6; // create a property called height and assign its value to 6.

Putting It Together

Use this interactive example to see how HTML, CSS, and JavaScript work together to build web apps:

Beyond the Essentials

It’s common to use Javascript frameworks to simplify this process. React is a common one used by web developers. We have more information about React and how to get started with it on the

page.