HTML and CSS are the most important technologies when it comes to creating websites. And building projects is one of the best ways to learn them.
We just published a course on the freeCodeCamp.org YouTube channel that will help you learn HTML and CSS through building an order summary component.
Madison Kanna created this course. She is an experienced software engineer and knows how to break things down to teach beginners.
In this course, Madison will show you how to solve a challenge from Frontend Mentor. The challenge is to build out an order summary component and get it looking as close to the design as possible.
Here are the sections covered in this course:
- Project setup
- Intro to web development
- Server and client model
- HTML and CSS intro
- What is a component
- Project intro
- Intro to Figma and Sketch
- Opening starter files
- Text editor refresher
- Starter files overview
- Creating the project
- Our first HTML file
- Hello world
- HTML basics
- Adding CSS
- Intro to CSS selectors
- HTML, CSS and JS
- Class selectors
- Using CSS Variables
- Adding the page background
- Adding text color
- Intro to devtools
- CSS Inheritance
- CSS Specificity
- Adding the component title
- Adding the hero image
- The CSS Box Model
- CSS Shorthands
- The universal selector
- Box-sizing
- Building the card
- Adding the font
- Styling the card container
- Building the buttons
- Building the annual plan box
- Styling our link tag
- Centering the page
Watch the full course below or on the freeCodeCamp.org YouTube channel (2-hour watch).