Create an order summary component using HTML and CSS in this comprehensive tutorial. Learn the fundamentals of web development, including how websites work, the server-client model, and essential HTML and CSS concepts. Explore design tools, set up your project, and dive into HTML basics like tags, syntax, and structure. Master CSS techniques such as selectors, variables, inheritance, and specificity. Build the component step-by-step, covering topics like the CSS box model, styling buttons, handling overflow, and centering content. Apply these skills to create a visually appealing and functional order summary component, gaining practical experience applicable to various front-end projects.
Overview
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
