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).

Feedback