Day 1 – Summer 2024
Workflow Setup
- Distribute Chromebooks
- Join Wifi
- Create Github Accounts
Conceptual Foundations
- Understanding Web Related Terminology
- Browser Overview
- Structure, Content, Design, & Behavior
- Understanding how a web page works
HTML5: Structure and Semantics
- Setting up our work environment using Codpen | Today’s Codecast
- What is HTML5? | HTML5 in Five Minutes
- Doctypes & DTD’s – Document Type Definition
- Intro to HTML Attributes: Declaring a Language Type
- Exploring the <head>
- Title Attribute
- Meta Tags
- Marking Up Content – Sample Content
- Sectioning your HTML Document
- Headings Explained
- Marking Up Lists
- Text Level Semantics
- Special Character Encoding: Details | Reference
- Block vs. Inline Elements
- Hyperlinks
- Inserting Images
- Tables
- What is Validation?
CSS3: Design and Presentation
- Adding style to your page: Type, Class, and ID Selectors
- Creating and attaching a Stylesheet
- Color and Typography
- Understanding Color | Kuler
- Write down your Color Codes
- Styling Page Elements
- Page Body
- Google Fonts
- Background
- Header
- Navigation
- Content
- Aside
- Footer
- Page Body
Additional Study
- Excellent HTML / CSS Resource
- Learn Flexbox | Flexbox Froggy
- Learn CSS Grid | Grid Garden
- Open Source Development Tools
- GitHub Education Pack