HTML / CSS Tutorial – Create an Order Summary Component

Ecommerce Empire Academy

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:

💻 Code:
🔗 Project:

⭐️ 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:

Read hundreds of articles on programming:

31 thoughts on “HTML / CSS Tutorial – Create an Order Summary Component”

    1. Amilcar C. da Silva

      Thanks @Madison Kanna. Your explanation is clearer and easier to follow.

    2. Thank you very much for this educative source and your soft presentation;
      In a fast-paced world, these kind of (+/-)1hour tutorials are so practical and effective;
      Hope to see you again 🙂

  1. Marvellous tutorial making a small project from strach learnt a lot.. thanks Madison and freecodecamp for having her here… 💕💕

  2. I wonder, I’m studying Python, but I have the bug of wanting to learn HTML, CSS, JS besides Python. Everyone tells me, HTML is going to be obsolete cause everyone can make their own websites with services like Squarespace and Wix. Is there anyone interesting in talking about this, I would like to know other opinions on the future of HTML and web development

    1. If you have already invested a good amount of time into Python, I would stick it out for now. At least get a good solid understanding of programming foundations and start building some projects with it. Many of the programming concepts you learn in Python will be present in web development as well should you decide to go down that route. HTML, CSS, JS etc are absolutely worth knowing as well. The CMS platforms WIX, Squarespace etc, are in demand as well. That could be a skill you could learn as well on the side. There is a future for both options.

  3. Just a few minutes in, and her form of talking is so clear and concise that makes following along so easy.

  4. SICTEL Balochistan

    Gorgeous 🥰. I found this video and clicked it.while watching I fount it perfect and clicked like. Big thumb up

  5. Ebubekir SARIDAĞ

    HTML has never been this beautifully explained since it was created… thanks ❤

Comments are closed.