Schedule > Intro to HTML & CSS

In today’s lesson, we will go over HTML & CSS. Both are declarative languages that have an extensive vocabulary. Both take time to master. If your goal is to become a strong web developer, it’s worth spending some time learning some of the fundamental constructs for each language. While there are higher-level frameworks that abstract aspects of these languages, debugging “vanilla” HTML & CSS is inevitable and unavoidable. Please complete the following readings / video tutorials:

Slides

• Intro to HTML & CSS

Lecture Video(s)

• Recorded Lecture Video (1:20:54)

Readings

1. Review

• If you haven’t already, please complete the readings from Lab 1.

2. HTML: Semantic Tags

• HTML Resources: Semantic Tags. (Course Website).
• LinkedIn Learning Playlist #1: Structuring Page Content w/Semantic Tags.
  Please review the following sections:
  • The value of structure
  • Controlling document outlines
  • The nav element
  • The article element
  • The section element
  • The aside element
  • The div element
  • Other semantic elements

3. CSS

• LinkedIn Learning Playlist #2: Intro to CSS Fundamentals.
  Please review the following sectctions:
  • Default Browser Styles
  • Browser Support & Inconsistencies
  • Inline, internal, and external stylesheets
  • Syntax, terminology, and naming conventions
  • Type, class, and id selectors
  • Practicing with simple selectors
  • Cascading, inheritance, and specificity
• LinkedIn Learning Playlist #3: CSS Properties.
  Please review the following sections:
  • RGB, hex, and keyword color values
  • Practicing with selectors and colors
  • Web-safe fonts and the font family property
  • Web fonts and Google fonts
  • The font-size property
  • Practicing with web fonts & font size
  • The font-style and font-weight properties
  • The color, line-height, and text properties
  • Adjusting the font-weight property
• Course Website:
  • CSS Rules of Thumb
  • Selectors
  • Color
  • Text & fonts
  • The Box Model (Review)
  • CSS Grid
  • Flexbox
  • Media Queries

4. Games for learning CSS Grid and Flexbox

CSS Grid and Flexbox are learned best through example. That said, these games will help you learn what the key properties of each layout paradigm, and are worth the investment:

• Flexbox Froggy (very helpful – worth doing)
• CSS Grid Garden (also recommended)

Optional (Recommended)

• Tali Garsiel and Paul Irish (2011). How Browsers Work: Behind the scenes of modern web browsers.