Class Central is learner-supported. When you buy through links on our site, we may earn an affiliate commission.

freeCodeCamp

HTML / CSS Tutorial – Create an Order Summary Component

via freeCodeCamp

Overview

This course teaches learners how to create an order summary component using HTML and CSS. By following the syllabus, students will understand website structure, HTML and CSS basics, component creation, design tools, and styling techniques. The course employs a hands-on approach, guiding students through the process of building the project step by step. It is suitable for beginners looking to enhance their front-end development skills and apply them to various projects.

Syllabus

) Intro.
) How websites work.
) Intro to HTML and CSS.
) Server and Client Model.
) What is a component?.
) Intro To Design Tools .
) Starter project files.
) Terminals.
) Creating the project.
) Creating our index.html file.
) HTML Body Tag.
) HTML heading tags.
) HTML Basics.
) HTML Syntax.
) CSS Basics.
) Adding CSS To our HTML.
) CSS Selectors.
) HTML, CSS and JS.
) The Div Tag.
) CSS Variables.
) Adding the background image.
) Adding background colors.
) DevTools.
) CSS Inheritance .
) CSS Specificity.
) Adding the card title.
) Adding the card image.
) Building the card .
) The CSS Box Model.
) CSS Box Model in action.
) CSS Shorthands.
) Default styles.
) Box-sizing.
) Styling the card.
) Adding the front.
) The CSS Overflow Property.
) The Button tag.
) Styling the buttons .
) Building the plan container.
) Adding the change link.
) Styling the plan container .
) Centering content in the card .
) Centering the card .
) Final tweaks.
) Outro .

Taught by

freeCodeCamp.org

Reviews

Start your review of HTML / CSS Tutorial – Create an Order Summary Component

Never Stop Learning.

Get personalized course recommendations, track subjects and courses with reminders, and more.

Someone learning on their laptop while sitting on the floor.