HTML + CSS : The beginner guide

Learn how to write basic HTML elements with opening and closing tags, add text content, and use attributes like href and target to build functional links, paragraphs, and buttons.

Use VS Code intellisense to auto-fill html attributes with control-space, and follow the heading hierarchy from h1 to h6, using p, h2, and a tags for structure and SEO.

Learn how HTML ignores spaces, and use indentation to organize nested elements; apply CSS to control spacing between text and elements.

Style a web button with css by adding a style tag, targeting the button, setting a blue background and white text using rgb values, and removing the default border.

Discover a quick tip to pick an exact color from any webpage using the color zia extension and its rgb color picker, then copy the rgb value for precise styling.

Learn to style buttons with CSS by adjusting font size, height, width, and border radius, then set bold text and cursor to pointer to create a clickable Facebook button.

Create and style individual buttons using css classes. Learn to assign classes with dot notation like facebook-button and google-button, and apply borders, colors, sizes, and border radius for button styles.

Learn to create interactive buttons with CSS by using hover and active states, add box-shadow, and apply transitions to animate background color and shadow effects.

Use the web inspector to inspect HTML and CSS, target elements, and experiment with live CSS changes. Understand edits are temporary, and you can reuse code from other sites.

Master margin and padding to control spacing inside and outside elements, experiment with top, right, bottom, and left values, inspect margins in the inspector, and use shorthand for efficient sizing.

Explore how to animate padding, margin, and other properties with transitions, hover, and active states, including using all to animate everything in a button or layout.

Learn how to style text and build a standard html5 page using the template, including creating a text training file and understanding html, head, body, title, and utf-8 meta.

Build a simple html structure and style text with css, applying body padding, a font family with fallbacks like Arial and Helvetica, and a readable line height.

Master CSS text styling by applying text-transform, color, and letter-spacing to headings, then create underlines with text-decoration or border-bottom, adjust spacing with padding, and use rem-based font sizing.

Learn to style text with css, including text shadow like box shadow, letter and word spacing, justify text, and link styling with hover, plus using span for inline highlighting.

Build a navigation bar with links and relative paths to multiple HTML exercises, organizing files in an exercises folder and using href and ../ to move between pages.

Learn to split html and css by moving styles into a global css file and linking it across pages to achieve a homogeneous look with reusable code.

Organize your HTML projects by moving CSS from style tags to per-exercise CSS files, updating links, and importing styles with proper rel attributes to enforce separation of concerns.

Learn to enable real-time page refresh in VSCode by installing the Live Server extension, so HTML updates auto-refresh the browser and CSS changes appear instantly.

Install a custom font from Google Fonts by embedding the code in your HTML head before global.css, then update the font-family and add a fallback.

Display and style images using the img tag with local and remote sources, organize assets, and apply CSS to size, fit, borders, and simple filters.

Explore how the display property shapes layout by comparing block, inline, and inline-block, and see how images, paragraphs, and spans interact to share a line or occupy a full row.

Split layouts into rows and columns to plan sections before coding. Organize content into left and right columns with title, input, and action areas to improve CSS readability.

Learn how the div creates boxes to structure a form with first name, last name, and email inputs, a checkbox, and a button, using borders, padding, and simple CSS.

Add a checkbox input with remember me text and a sign-in button, group them in a div, and style the button for full width and blue background.

Build a recipe webpage by structuring HTML into a container with an image, title, preparation time, ingredients, and instructions using ul and ol lists.

Build a centered, max-width recipe page with a responsive image, shadows, padding, and borders; learn to group CSS classes, apply spacing and line height for readable sections.