[The Odin Project: Intermediate HTML and CSS] - Project: Sign Up Form

Intro

• The goal of this project was to practice what we have been learning in the Intermediate HTML and CSS modules such as Form Creation, CSS styles & custom properties,positioning, and other concepts. We were to create a sign up form based on a design they gave us
• The project can be found here: https://odin-signupform-sv.netlify.app/. It is hosted by Netlify
• You can find more on the project here: The Odin Project - Sign Up Form

Lessons Learned

• For this project I decided to pracitce my approach on the plans I make before starting to code
  • First, I looked at the design file an started thinking of what the HTML elements I will use and what the HTML structure will look like. This part was helpful since I brainstorm what HTML semantic elements I was going to use
  • Second, once I got the structure done I looked into what CSS styling I will need and classes I will need to create for selectors. This was really helpful since I was able to visualize how I will use CSS grid to layout the elements
  • Third, then I started applying the CSS properties that will help with laying out the content. Nothing related to font-size nor color, it was all layout
  • Fourth, I finished by applying the color, font-size, and etc to the elements that need it
• Also, I noticed that by working one part at a time and writing down my approach on how I was going to do the left part and the right part was really helpful. It helped me slow down and write code that makes sense.

Achievements

• I am really proud how I use CSS grid! The website was really well organized. I was also able to easily apply mobile version. This is the first time I am confident that a website came out really good in mobile and desktop version
• I used CSS selectors instead of having to write more HTML markdown
• I finally understood how to use relative positioning

Proud

In this project, I felt I had a better understanding of all the tools that are available in CSS. I no longer felt I was randomly using CSS properties instead I felt I knw what I was doing!

Technologies:

• HTML
• HTML Semantic Elements
• CSS
• CSS Grid
• CSS Selectors
• Netlify