This course covers the foundations of HTML, CSS, and JavaScript which are the building blocks of any website. Students will master HTML and intermediate CSS allowing them to create a compelling website from scratch. JavaScript will be introduced and students will learn basic concepts and syntax needed to create interactive frontend applications. Understand the architecture of frontend applications, the role of each technology in creating modular applications, and professional best practices in frontend development.
The web is the biggest software platform and growing. The foundation material taught in this class at the core of all web technologies. Having a strong foundation is is important to becoming a strong developer.
None
By the end of the course, you will be able to ...
- Write valid and semantic HTML
- Apply CSS styles to control the appearance of your web applications, including Flex Box & CSS Grid
- Use JavaScript to create dynamic content and handle user interactions in your web applications
Course Dates: Tuesday, August 26 – Thursday, October 9, 2025
Class Times: Tuesday and Thursday 1:00 PM to 3:45 PM
| Class | Date | Topics | Assignment | Assignment Due |
|---|---|---|---|---|
| - | Week 1 HTML | - | - | - |
| 1 | Tue, Aug 26 | HTML Semantic HTML | Portfolio Part 1: Semantic Markup | - |
| 2 | Thu, Aug 28 | HTML HTML Attributes | Continue portfolio | - |
| - | Week 2 CSS | - | - | - |
| 3 | Tue, Sep 2 | CSS Intro | Validate your Portfolio | Interview Practice Lab 1 |
| 4 | Thu, Sep 4 | CSS Box Model | Style Your Portfolio | - |
| - | Week 3 | - | - | - |
| 5 | Tue, Sep 9 | Learn Flex, Single Page Example | - | - |
| 6 | Thu, Sep 11 | CSS Grid | - | Interview Practice Lab 2 |
| - | Week 4 Javascript | - | - | - |
| 7 | Tue, Sep 16 | Background Images | Grid and Flex Challenge | Style Your Portfolio |
| 8 | Thu, Sep 18 | JavaScript Syntax | Flashcards Tutorial | - |
| - | Week 5 | - | - | Interview Practice Lab 3 |
| 9 | Tue, Sep 23 | Functions | - | Flashcards Tutorial |
| 10 | Thu, Sep 25 | Event Listeners | Custom Calculator | - |
| - | Week 6 | - | - | - |
| 11 | Tue, Sep 30 | Arrow Functions | Ecommerce Tutorial | - |
| 12 | Thu, Oct 2 | Lab Day | - | |
| - | Week 7 | - | - | - |
| 13 | Tue, Oct 7 | Objects | - | Ecommerce Tutorial |
| 14 | Thu, Oct 9 | - |
- Week 1 - HTML
- Markup Practice: Rules of Writing Haiku (Find this on slide 10 of lesson 1: Semantic HTML)
- HTML Elements Exploration Worksheet Create a copy, complete the worksheet, and submit a link to your copy on Gradescope.com. Be sure to "share" your document! (Find this on slide 38 of lesson 1: Semantic HTML)
- Portfolio Part 1: Semantic Markup - Follow the instructions and submit this on Gradescope.com
- Markup Practice (find this on slide 11, 24, and 34 of HTML Attributes)
- Week 2 - CSS
- Lab 1 You should have marked up one of these examples.
- Beginning CSS Challenges (find this on slide 21 of CSS Intro)
- CSS Diner Learn about CSS Selectors by playing this game. (Find this on slide 32 of CSS Intro)
- Explore the box model (find this on slide 9 of CSS Box Model)
- Style Your Portfolio - start styling your portfolio
- Week 3 - CSS
- Explore CSS Flex Box (find this on slide 37 of CSS Box Model)
- Flex Box Challenges (find this on slide 37 of CSS Box Model)
- Flex Box Practice (find this on slide 6 of Grid)
- CSS Grid Layout (find this on slide 25 of Grid)
- Lab 2 Practice your CSS skills
- Week 4 - CSS Background images, JavaScript Intro
- Explore Background Images
- Grid and Flex Challenge - Make this website for Finland!
- Style Your Portfolio Submit this to Gradescope.com
- JavaScript Practice (find this on slide 11 and 17 of JavaScript Syntax)
- Flashcards Tutorial - Start this tutorial
- Week 5 - JavaScript
- JS functions Lab (find this on slide 16 of Functions)
- Event Listener example (find this on slide 12 of Event Listeners)
- Lab 4 - Build the time to water app (find this on slide 20 of Event Listeners)
- Custom Calculator Submit this to gradescope.com
- Week 6 - Arrow Functions
- JS Functions Lab 2 (find this on slide 35 of Arrow Functions)
- Todo App Tutorial