Notes adapted from: Brian Rahidi @ https://brianrahadi.notion.site/Coding-Workshop-Resources-93d2d374e4014f0ea29e64b27748bdf3

Video Walkthrough:

https://www.youtube.com/watch?v=1O-i-wH-rhc&ab_channel=LangaraComputerScienceClub

HTML

HTML document consist of head and body tag

• Head is for the metadata (data about data), not for display
  • Usually css files and javascript files are placed here
• Body is for display and usually consists of (simple website):
  • header
  • main
  • footer

HTML Attributes

HTML document has many attributes, the general ones are id and class to differentiate html document. Either for functionality or styling purposes.

• id attribute - specifies unique id for an HTML element
  • In HTML, can be used as target for href attribute to navigate to this specific element
  • In CSS, can be used to only style this 1 element
  • In JavaScript, can be used to only apply functionality to this 1 element
• class attribute - specify class for an HTML element. Multiple element can have the same class.
  • In CSS, can be used to style all elements that share the same class
  • In JavaScript, can be used to apply functionality to all elements that share the same class

HTML Tags

HTML References - https://www.w3schools.com/tags/

• HTML tags to know for this workshop:

CSS

CSS References - https://www.w3schools.com/cssref/index.php

CSS Flexbox - https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Interactive CSS Flexbox Practice - https://flexbox.tech/

CSS Media - https://www.w3schools.com/cssref/css3_pr_mediaquery.php

Custom CSS Reset - https://www.joshwcomeau.com/css/custom-css-reset/