HTML / CSS Tutorial – Create an Order Summary Component

freeCodeCamp.org

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