HTML / CSS Tutorial – Create an Order Summary Component

From the creator

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 ❤️ Try interactive Frontend courses we love, right in your browser: https://scrimba.com/freeCodeCamp-Frontend (Made possible by a grant from our friends at Scrimba) ⭐️ 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 ⌨

Published 2022-08-10 · Watch on YouTube ↗
Availability and playback restrictions are controlled by the original channel.