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 27 – Thursday, October 10, 2024
Class Times: Tuesday and Thursday 1:00 PM to 3:45 PM
| Class | Date | Topics | Assignment | Assignment Due |
|---|---|---|---|---|
| - | Week 1 HTML | - | - | - |
| 1 | Tue, Aug 27 | HTML Semantic HTML | Portfolio Part 1: Semantic Markup | - |
| 2 | Thu, Aug 29 | HTML HTML Attributes | Continue portfolio | - |
| - | Week 2 CSS | - | - | - |
| 3 | Tue, Sep 3 | CSS Intro | Validate your Portfolio | Interview Practice Lab 1 |
| 4 | Thu, Sep 5 | CSS Box Model | Style Your Portfolio | - |
| - | Week 3 | - | - | - |
| 5 | Tue, Sep 10 | Learn Flex, Single Page Example | - | - |
| 6 | Thu, Sep 12 | CSS Grid | - | Interview Practice Lab 2 |
| - | Week 4 Javascript | - | - | - |
| 7 | Tue, Sep 17 | Background Images | Grid and Flex Challenge | Style Your Portfolio |
| 8 | Thu, Sep 19 | JavaScript Syntax | Flashcards Tutorial | - |
| - | Week 5 | - | - | Interview Practice Lab 3 |
| 9 | Tue, Sep 24 | Functions | - | Flashcards Tutorial |
| 10 | Thu, Sep 26 | Event Listeners | Custom Calculator | - |
| - | Week 6 | - | - | - |
| 11 | Tue, Oct 1 | Arrow Functions | Ecommerce Tutorial | - |
| 12 | Thu, Oct 3 | Lab Day | - | |
| - | Week 7 | - | - | - |
| 13 | Tue, Oct 8 | Objects | - | Ecommerce Tutorial |
| 14 | Thu, Oct 10 | - |
- 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