Unit 4 - Front-End Dev

4.1 - The World Wide Web & HTML

The World Wide Web

What exactly is "The World Wide Web" and why do websites start with www.?
What's the difference between the Internet and the Web?
🤔 Does Snapchat use the "web"?
 How about multiplayer games like Fortnite?

If you're still confused, here is a selection of videos that explain the difference:

Today's lesson is mostly live demo. If you're absent, you should meet with a classmate to catch up or see Mr. Brash at lunch.

Programming vs. Designing

What we've been doing so far in JavaScript is called back-end development. It is text-based programming to solve problems using algorithms. It looks kinda boring (console only).

A Graphical User Interface (GUI - "gooey") provides nicer interactions:  buttons, scrollbars, graphics, windows... and it's so pretty! To create a useful GUI, we need to be designers. This is called front-end development.

On the "Web", the GUI is a web page (document) created with HTML - HyperText Markup Language. Here's a selection of videos if you want to learn on your own:

Written Definitions:

HTML - Graphical User Interface (Front-End)

Depending on the programming language and computer system (Mac vs Windows vs Linux vs Console, etc), there are many different tools to create a front-end. HTML is one of the most versatile and widely used.

Preparing to Design and Code HTML

We will continue to use VSCode. To make life easier we will install an extension.