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
CSS: Style the building blocks (position, font size, color, etc.)

CSS
JavaScript: Add functionality to the building blocks!

JavaScript

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

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>


/* 
 * 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;
}

Learn more about classes and selectors here:

CSS .class Selector