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.

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

--

freeCodeCamp.org

Рекомендации по теме

Комментарии

In the words of Albert Einstein: "If you can't explain it simply, you don't understand it well enough."

If only all teachers were this direct, straight-to-the-point, and easy to understand.
Much respect and gratitude, Madison. You are a great teacher.

phillipnelson

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

gime

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

ebubekirsaridag

This is a really great exercise, I will try to expand it later and port the same idea for components in Angular and Vue, thank you!

viniciusmorgado

Undoubtedly, one of the best HTML/CSS tutorials available on YouTube. Thanks a lot, ma'am ❤️

TheSambitDutta

Sixty four days into #100DaysOfCode and this is the quickest I have been able to create something looking this good. Love your style of teaching too.

rDinx

Yet again THANK YOU Free Code Camp for sharing knowledge.

kychemclass

My first project. Thank you so much girl ❤

jeanetmashala

Awesome explanation mam, this is the best explanation I have heard on CSS Box Model (Padding & Margin). Superb mam

navotech

Exaclty what I've been looking for! I'm so grateful for this. Very easy to understand.

kibalamajames

Good evening madison, I'm Willy from Indonesia. Previously, I want to thank you for the tutorial on this channel. I like the content of this video. Thank you in advance.

willisianturi

I very much welcome every web development course! Thank you very much.

polygons

This is the best html/css tutorial I have seen so far.
I only have one question why did you add:
.proceed-button:hover {
background-color: var(--bright-blue-hover);
}
this property in your code on github?, cause you didn't add this property on the video.
I have added this property on my style sheet and it turns my proceed button to white color when I hover over it.

ammarkhulood