COMP1531

📡 Web

9.4 - (Bonus) Frontend Basics

Author: Hayden Smith 2021

Front-end Design

Building front-ends are not covered in COMP1531. CSE offers a few courses relating to them though:

UX & Design: COMP3511, COMP4511
Technical: COMP6080

These skills will help prevent you building bad interfaces.

Web Applications

At least 2 major components (client, server)
Multiple languages involved
- Javascript, HTML, CSS, and whatever language implements your server.
Fundamentally different to the sorts of programs you may have written so far

Today we're going to write a very basic web application - a number input and increment/decrement button.

Web Browser

HTML, CSS, Javascript all are languages with internationally determined standards
- How are decisions made on these standards?
- Who pays for all these software engineers to do the work?
Web browsers implement these standards and allow us to run HTML/CSS/Javascript
You need to

HTML

What does HTML stand for?
HTML is the standard markup language for webpages
HTML5 brought with it a massive wave of changes that has revolutionised what browsers are used for
HTML is what provides the structure of the page
Let's make the following with HTML:
- a basic page
- headers, lists

CSS

CSS focuses on styling the structure that HTML provides
It provides styles in a format of:
- attribute: value
Styles can either be:
- Part of the HTML in the style tag
- Inline in the HTML file
- External in a .css file
Let's restyle our previous page

Javascript

Javascript is the "programming language" of front-ends. The interpreters for the language are built directly into your web browser. Most modern web browsers build their Javascript interpreter on top of the popular V8 engine.

Javascript will feel more familiar to you than HTML/CSS.

Javascript is mainly used to essentially dynamically manipualte CSS properties on HTML elements as a result of various events that occur (user clicks, keyboard, timers).