HTML / CSS Tutorial – Create an Order Summary Component

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 ❤️ Support for this channel comes from our friends at Scrimba – the coding platform that's reinvented interactive learning: https://scrimba.com/freecodecamp