Learn HTML and CSS by creating an order summary component. You can apply the concepts from this video to other types of front-end elements and projects.

�️ Madison Kanna created this course. Check out her channel: https://www.youtube.com/c/MadisonKanna

ð??» Code: https://github.com/Madisonkanna/tutorial-order-summary-component
ð??? Project: https://www.frontendmentor.io/challenges/order-summary-component-QlPmajDUj

⭐️ Course Contents ⭐️
�️ (0:00:00) Intro
�️ (0:02:26) How websites work
�️ (0:05:05) Intro to HTML and CSS
�️ (0:03:29) Server and Client Model
�️ (0:06:45) What is a component?
�️ (0:09:51) Intro To Design Tools
�️ (0:11:31) Starter project files
�️ (0:17:42) Terminals
�️ (0:18:46) Creating the project
�️ (0:20:21) Creating our index.html file
�️ (0:24:29) HTML Body Tag
�️ (0:29:33) HTML heading tags
�️ (0:30:21) HTML Basics
�️ (0:32:52) HTML Syntax
�️ (0:36:06) CSS Basics
�️ (0:36:42) Adding CSS To our HTML
�️ (0:39:16) CSS Selectors
�️ (0:42:30) HTML, CSS and JS
�️ (0:46:01) The Div Tag
�️ (0:48:31) CSS Variables
�️ (0:52:15) Adding the background image
�️ (0:55:31) Adding background colors
�️ (0:56:53) DevTools
�️ (0:59:03) CSS Inheritance
�️ (1:01:41) CSS Specificity
�️ (1:03:51) Adding the card title
�️ (1:05:24) Adding the card image
�️ (1:09:45) Building the card
�️ (1:10:50) The CSS Box Model
�️ (1:13:24) CSS Box Model in action
�️ (1:15:32) CSS Shorthands
�️ (1:18:02) Default styles
�️ (1:18:21) Box-sizing
�️ (1:22:15) Styling the card
�️ (1:23:25) Adding the front
�️ (1:24:42) The CSS Overflow Property
�️ (1:26:41) The Button tag
�️ (1:28:21) Styling the buttons
�️ (1:33:28) Building the plan container
�️ (1:35:18) Adding the change link
�️ (1:35:40) Styling the plan container
�️ (1:39:07) Centering content in the card
�️ (1:39:56) Centering the card
�️ (1:40:48) Final tweaks
�️ (1:41:37) Outro

ð??? Thanks to our Champion and Sponsor supporters:
ð??¾ Raymond Odero
ð??¾ Agustín Kussrow
ð??¾ aldo ferretti
ð??¾ Otis Morgan
ð??¾ DeezMaster

Learn to code for free and get a developer job: https://www.freecodecamp.org

Read hundreds of articles on programming: https://freecodecamp.org/news