COMP1531

8.1 - Web - (Bonus) Frontend Basics

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.

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

HTML

• What does HTML stand for?
• HTML is the standard markup language for webpages
• HTML5 brought with it a massive wave of changes
• Let's make the following with HTML:
  • a basic page
  • headers, lists

CSS

• CSS focuses on styling
• 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 using div/spans and CSS

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.

We can use Javascript to make API calls and display results.