Web Engineering | '24 Winter | Class Notes | Week 01 | Day 02

9 January 2024 - Tuesday

Back to Web Engineering '24 wi

Web Architecture

This class is the Web Front-End track. We will review the client-server architecture below.

Static Page

https://github.com/learner-long-life/learning-and-teaching/tree/master/small-demos/16-Static-Page

Web Inspector

The Web Inspector is a modern set of tools included in most major web browsers that is indispensable in understanding existing websites, as well as making your own websites.

• Elements / Inspector
  • The DOM (Document Object Model)
• Console
  • The Console is like a command-line interface for a website.
  • It's an interactive REPL (read-evaluate-print-loop) that you can use to try out and learn through "programmatic" access to a website's state and structure.

Code Pen

• CodePen is a website that gives you an online editor for HTML, CSS, Javascript with a live preview

• Go to the website https://pen.new

• In pairs, have the navigator dictate the index.html page to the driver in the HTML pane https://github.com/learner-long-life/learning-and-teaching/blob/master/small-demos/16-Static-Page/index.html

• Switch driver and navigator, then dictate the styles.css into the CSS pane

• https://github.com/learner-long-life/learning-and-teaching/blob/master/small-demos/16-Static-Page/styles/styles.css

More Complex Example Now you will reproduce a more sophisticated example. Go to the Google Type. Read through and explore for a few minutes with your partner. https://femmebot.github.io/google-type/

Choose your favorite fable. Open the web inspector and recreate just that section in a new CodePen.