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:
TechQuickie (Linus Sebastien)
TED-Ed (short but good)
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:
What is HTML (slow but good)
A Quicker Explanation (short and sweet)
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.
In VSCode, go to the Extensions panel (icon that looks like four squares)
Search for "Live Preview"
Install the extension called "Live Preview", authored by Microsoft
Today's Task(s) / Homework
Head over to the GitHub Repo for this lesson and read the README file.