Here you will find all the projects that I completed along with their GitHub Repo for the Intermediate and Advanced HTML/CSS modules in the Odin Project.
The Intermediate course consisted of 21 lessons and 2 projects. I learned the following:
- HTML
- Using Emmet in VS code to be more productive
- Form basics and validation
- Media: SVGs, JPG, and PNGs and when to use each one
- HTML Tables
- Setting up authentication using PassportJS
- CSS
- Using advance selectors to not have to create unnecessary html classes
- Learning about positining and the difference between relative, absolute, sticky
- Establish a foundation in CSS Grid!
For the projects I challenged myself to practice everything I learned here by:
- Creating a design of how I want the application to look like and brainstorm what layout system will I use to place all my content (Grid or Flexbox)
- Using advanced selectors to minimize use of unnecessary classes
- Minimizing the use of unnecessary HTML tags and only using what is needed
- Using semantic html tags
The Advanced course consisted of 15 lessons and 1 projects. I learned the following:
- Animations: How to make animations using CSS and which ones to use
- Accessibility: I learned how websites need to follow a set of guidelines to make it easier for everyone to navigate your site. Online tools can help us check how accessible our website
- Responsive design: I learned how elements in a website are naturally responsive, it is when we start adding CSS that we make them unresponsive
-
[The Odin Project: Intermediate HTML & CSS] - Sign Up Form
-
[The Odin Project: Intermediate HTML & CSS] - Admin Dashboard
-
[The Odin Project: Advanced HTML & CSS] - Personal Portfolio
- Now that I have completed the Odin Project. I can now fully work on my Personal Portfolio