Week 3 - Mastering Web Fundamentals & Dynamic Interfaces
Week 3 - Day 0 (Pre-Lesson)
Agenda
| Time |
Activity |
| 6:30 - 7:15 pm |
Self-Guided Lesson: Command Line Basics |
| 7:15 - 8:15 pm |
Hands-On Activity: Navigating Directories and Files |
Lesson Materials
Week 3 - Day 1 (Introduction to the Unit)
Agenda
| Time |
Activity |
| 6:45 - 9:45 pm |
Self-Guided Lesson: HTML, CSS, and JavaScript Overview |
| 9:45 - 10:30 pm |
Reflection Activity: How These Technologies Work Together |
Lesson Materials
Week 3 - Day 2 (Introduction to HTML & CSS: Building Your First Web Page)
Agenda
| Time |
Activity |
| 6:30 - 7:15 pm |
Self-Guided Lesson: Understanding HTML Structure |
| 7:15 - 8:15 pm |
Hands-On Activity: Creating a Basic Web Page |
| 8:15 - 8:45 pm |
Break |
| 8:45 - 9:45 pm |
Self-Guided Lesson: Introduction to CSS & Styling Basics |
| 9:45 - 10:30 pm |
Practice: Applying CSS to HTML Elements |
Lesson Materials
Week 3 - Day 3 (Build a Fake Resume Page)
Agenda
| Time |
Activity |
| 6:30 - 7:15 pm |
Self-Guided Lesson: Structuring a Resume in HTML |
| 7:15 - 8:15 pm |
Hands-On Activity: Styling a Resume with CSS |
| 8:15 - 8:45 pm |
Break |
| 8:45 - 9:45 pm |
Self-Guided Lesson: Adding Links & Images |
| 9:45 - 10:30 pm |
Practice: Enhancing with Advanced CSS |
Lesson Materials
Week 3 - Day 4 (Introduction to JavaScript’s Event-Driven Architecture & The DOM)
Agenda
| Time |
Activity |
| 6:30 - 7:15 pm |
Self-Guided Lesson: Understanding the Event-Driven Model |
| 7:15 - 8:15 pm |
Hands-On Activity: Manipulating the DOM |
| 8:15 - 8:45 pm |
Break |
| 8:45 - 9:45 pm |
Self-Guided Lesson: Handling Events in JavaScript |
| 9:45 - 10:30 pm |
Practice: Using Event Listeners to Modify HTML |
Lesson Materials
Week 3 - Day 5 (Build a Simple App Using HTML, CSS & JS)
Agenda
| Time |
Activity |
| 6:30 - 7:15 pm |
Self-Guided Lesson: Understanding API Calls in JavaScript |
| 7:15 - 8:15 pm |
Hands-On Activity: Building a Button That Fetches Data |
| 8:15 - 8:45 pm |
Break |
| 8:45 - 9:45 pm |
Self-Guided Lesson: Displaying API Data Dynamically |
| 9:45 - 10:30 pm |
Practice: Adding UI Enhancements |
Lesson Materials
Week 3 - Day 6 (Advanced CSS: Flexbox & Grid)
Agenda
| Time |
Activity |
| 6:30 - 7:15 pm |
Self-Guided Lesson: Understanding Flexbox vs. Grid |
| 7:15 - 8:15 pm |
Hands-On Activity: Building a Profile Card with Flexbox |
| 8:15 - 8:45 pm |
Break |
| 8:45 - 9:45 pm |
Self-Guided Lesson: Implementing CSS Grid Layout |
| 9:45 - 10:30 pm |
Practice: Combining Flexbox & Grid |
Lesson Materials
Week 3 - Day 7 (Keyframe Animations)
Agenda
| Time |
Activity |
| 6:30 - 7:15 pm |
Self-Guided Lesson: Introduction to CSS Keyframes |
| 7:15 - 8:15 pm |
Hands-On Activity: Animating Elements with CSS |
| 8:15 - 8:45 pm |
Break |
| 8:45 - 9:45 pm |
Self-Guided Lesson: Adding Keyframes to Buttons |
| 9:45 - 10:30 pm |
Practice: Combining Animations with Layouts |
Lesson Materials
Supplementary Reading
Text 404-962-0908 with feedback and questions.
Week 3 - Project (Mini-Project: Brooklyn Layout)
