HTML and CSS For Beginners: Build A Portfolio Project

Create index.html with boilerplate in VS code, use Emmet to add a hello world, and explore title tag, utf-8 encoding, and viewport for responsive local viewing.

Explore how HTML uses tags to structure content, apply bold with the b tag, use h1 for headings, and understand that HTML is a markup language, not a programming language.

Learn HTML syntax, including elements, opening and closing tags, and content, and begin applying styles as you start CSS basics for your portfolio project.

Learn how CSS styles HTML elements, connect a styles.css stylesheet with link rel=stylesheet, test in the browser, and use CSS selectors throughout the course.

Master CSS selectors to target HTML elements and apply styles via curly-bracket rules. Set h1 background color to aqua and reuse selectors to reduce code in styles.css.

Target a specific h1 element with a class selector to apply an aqua background while other h1s remain uncolored, demonstrating the power of class selectors and the class attribute.

Explore how HTML, CSS, and JavaScript work together in front-end development, using a house analogy to explain structure, style, and interactivity.

Create the card container for the order summary using a div with class card. Set the card width to 450 pixels and apply a white background for the finished look.

Copy the color values from the style guide into a root block to declare global CSS variables with two dashes, then use var() to apply them.

Use developer tools to inspect the card component, apply CSS color properties, and preview changes without editing the code. Debug with the inspector to spot invalid values and tweak styles.

Discover how CSS inheritance and the cascade shape styles, with parent and child divs inheriting color, and learn to override rules using CSS specificity.

Add an h2 title for the order summary, apply a .title class, and style it with dark blue color, 900 font weight, and 32px font size.

Add the illustration hero svg from the images folder, include an alt tag, remove the hard-coded width, and set a hero image class with width 100% for responsive scaling.

Explore the CSS box model by treating every element as a box with content, padding, border, and margin. Learn to apply padding, margins, borders, and shorthand to build clean layouts.

Learn to remove default styles in CSS by using the universal selector to reset margin and padding, ensuring a clean slate for your HTML and CSS projects.

Learn how border-box box sizing includes padding and borders in an element’s width and height, preventing width from expanding when padding is added.

Style the app by adjusting line height for text spacing, applying a rounded card border with overflow hidden, importing a font with specific weights, and adding container margins.

Create and style two html buttons, proceed and cancel, with full width, rounded corners, and hover effects to match the design using blue and white styles.

refactor by consolidating button styles for the two buttons into a single selector, removing duplicates like width 100%, border none, font-weight 700, font-size 0.9, border-radius 12px, and cursor pointer.

Add a plan container div to index.html and insert a music icon image inside. Create a plan description with the annual plan text and price, and add a change link.

Style annual plan with css by configuring plan container with 16px font, 25px padding, 12px border radius, pale blue background, and a flex row; style the a tag with hover.

Apply bold color to the annual plan using the strong tag and color var dark blue, then center content with a column flex layout and 18-pixel text.

Center your card with css by applying margin: 50px auto to set equal left and right margins. Refresh to see the card centered in the design.

Finish pricing layout by setting plan description container to a 20px line height and 75px right margin, improving spacing between annual plan, price, music icon, and changed link.

Celebrate completing the course by applying HTML and CSS skills learned from scratch to build your first app, featuring an order summary component for your portfolio.