Video Description
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.orgRead hundreds of articles on programming:
https://freecodecamp.org/news
