Course Materials
Intro to HTML5
Week 1
- Resource 1
- Resource 2
Week 2
- Resource 1
- Resource 2
Week 3
- Resource 1
- Resource 2
Week 4
- Resource 1
- Resource 2
Week 5
- Resource 1
- Resource 2
CSS3
Week 1: Getting Started with Simple Styling
- Cascading in CSS code (zip file)
- Cascading Style Sheets code (zip file)
- Style attribute (deployed): CodePen, Replit
- Internal Style (deployed): CodePen, Replit
- External Style (deployed): CodePen, Replit
- Precedence (deployed): CodePen, Replit
- Fonts code (zip file)
- Fonts (deployed): CodePen, Replit
- Code together - Applying style code (zip file)
- Code Together 1 - No CSS (deployed): CodePen, Replit
- Code Together 1 - With CSS (deployed): CodePen, Replit
- Display example 1 code (zip file)
- Display example 2 code (zip file)
- Display Example 1 (deployed): CodePen, Replit
- Display Example 2 (deployed): CodePen, Replit
- Display Example 2 Extra (deployed): CodePen
- Code Together - Display Property code (zip file)
- Code Together - Display Property (deployed): Replit
- HW1 Starter Code (zip file)
- HW1 Starter Code Replit
Lesson: Reviewing the "Cascading" of CSS
Lesson: Styling Your Text
Lesson: Code Together - Applying Style
Lesson: Display and Visibility
Lesson: Code Together - The Display Property
Assessment: Homework 1
Week 2: Advanced Selectors, Display, and Designing for Accessibility
- CSS Display Grid Demo code (zip file)
- CSS Display Grid Demo (deployed): Replit
- CSS Display Flex Demo code (zip file)
- CSS Display Flex Demo (deployed): Replit
- Styling Links & Lists code (zip file)
- Styling Links (deployed): CodePen, Replit
- Styling Lists (deployed): CodePen, Replit
- Advanced Selectors 2 – Attribute Selectors code (zip file)
- Advanced Selectors (deployed): CodePen, Replit
- Attribute Selectors code (zip file)
- Attribute Selectors (deployed): CodePen, Replit
- Code Together - Navigation code (zip file)
- Code Together - Navication Demo (deployed): Replit
- Background Images and Opacity code (zip file)
- Background Images and Opacity (deployed): Replit
Lesson: Display:Grid
Lesson: Display:Flex
Lesson: Styling Lists and Links
Lesson: Advanced Selectors
Lesson: Attribute Selectors
Lesson: Code Together - Navigation
Lesson: Browser Capabilities
Lesson: Background Images and Opacity
Week 3: The Box Model and Positioning
- Box Model code (zip file)
- Box Model (deployed): CodePen, Replit
- Positioning code (zip file)
- Positioning (deployed): CodePen, Replit
Lesson: Box Model
Lesson: Positioning
Week 4: Pseudo-classes, Pseudo-elements, and a Final Project
- Code Together - Styling Images with Pseudo-classes code (zip file)
- Styling Images with Pseudo Classes (deployed): Replit
- Transitions - Using pseudo classes code (zip file)
- Transistions - Using pseudo classes (deployed): CodePen, Replit
- Animation using transforms code (zip file)
- Animation using transforms (deployed): CodePen, Replit
Lesson: Code Together: Styling Images with Pseudo-classes
Lesson: Transitions
Lesson: Transforms
Interactivity with JavaScript
Week 1
- Resource 1
- Resource 2
Week 2
- Resource 1
- Resource 2
Week 3
- Resource 1
- Resource 2
Week 4
- Resource 1
- Resource 2
Week 5
- Resource 1
- Resource 2
Responsive Design
Week 1
- Resource 1
- Resource 2
Week 2
- Resource 1
- Resource 2
Week 3
- Resource 1
- Resource 2
Week 4
- Resource 1
- Resource 2
Week 5
- Resource 1
- Resource 2