TubeSort Extras
You're not Alone!

We're here to help you to fight your YouTube Addiction!

Join TubeSort Today!
...
TubeSort Extension

Take your get rid of youtube challenge to the next level with our free chrome extension.

Get it now!
Browse Categories
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.org

Read hundreds of articles on programming: https://freecodecamp.org/news