This repository showcases my learning process during the Intro to Web Development course. Through this 10-unit course, I explored foundational concepts in web development and progressively built a fully-functioning website. The README serves as a guide to the course structure and provides insights into each unit’s content and coursework.
You can view the live project here.
The course is project-based, emphasizing hands-on learning. Each unit introduces new web development concepts that are applied to the ongoing project. By the end of the course, the project evolved into a comprehensive website presented on Demo Day.
- 10 units covering HTML, CSS, JavaScript, and web animations.
- Weekly project milestones to solidify learning.
- Final website presentation in Unit 10.
| Unit | Topic | Project Work |
|---|---|---|
| 1 | Exploring Web Development | Project setup |
| 2 | HTML & CSS properties and values | Add title, content, images, input fields, and buttons |
| 3 | CSS box model & dev tools | Style with color, border, margin, padding, and positioning |
| 4 | CSS Flexbox | Implement Flexbox for layout and create a navigation bar |
| 5 | JavaScript DOM, event listeners, and variables | Add interactivity through event listeners |
| 6 | HTML forms and JavaScript functions | Create interactive forms with event listeners |
| 7 | JavaScript conditionals and loops | Validate forms using JavaScript |
| 8 | Interactive animations | Add animations using JavaScript objects |
| 9 | Aesthetic animations | Implement animations and transitions |
| 10 | Demo Day | Present the completed website |
Each milestone builds on the previous units’ work:
- Milestone #1: Initial project setup (Unit 1)
- Milestone #2: Advanced styling and layout (Unit 4)
- Milestone #3: Interactivity with JavaScript (Unit 7)
- Milestone #4: Polished animations and final presentation (Unit 9)
This course allowed me to explore the essentials of web development. The project-based structure helped reinforce my understanding of:
- Building responsive layouts with HTML and CSS.
- Adding interactivity with JavaScript.
- Creating dynamic and visually appealing animations.
By the end of the course, I gained confidence in creating web projects and collaborating in a team setting.
CodePath reimagines education to create a diverse generation of engineers and tech leaders. With over 20,000 students and alumni from 500 colleges working at top companies, CodePath offers industry-vetted courses that bridge the gap between education and real-world tech skills. Learn more at CodePath.
Thank you for visiting my repository! If you have any feedback or questions, feel free to reach out.