Free HTML & CSS for Beginners

Explain the core HTML document structure, including the doctype HTML, HTML root, head with title and meta tags, and the body with visible content, emphasizing accessibility and SEO.

Create a paragraph by typing p in the body, learn opening and closing tags, and note that a paragraph is a block element with semantic meaning for accessibility and SEO.

Learn to structure content with HTML headings from h1 to h6, add subheadings such as h2 and h4, and use hr element, emphasizing semantics, accessibility for screen readers, and seo.

Discover how to format text in HTML with Emmet, wrapping selections in bold (b), italics (i), and underline (u), and adding line breaks with br and hr.

Wrap content with the div element to create a container, then style it with CSS to add a border, background color, and padding. Learn that the div is a block-level, non-semantic container used for layout and grouping of elements.

Learn how css controls html appearance using internal, inline, and external styles, exploring cascading inheritance and priority from inline to external with examples on body and h1.

Explore css selectors, including element, id, class, and universal selectors, and see how attributes like id and class target specific elements or groups, with practical color and styling examples.

Learn how the CSS box model applies to every HTML element by visualizing content, padding, border, and margin; practice sizing a div with width, height, and unique IDs.

Learn how to use CSS shorthand for margins, paddings, and borders, applying one to four values in clockwise order—from top, right, bottom, and left—to define all sides efficiently.

Explore css color basics with predefined color names and formats such as rgb, rgba, hex, and hls, using VS Code to fine-tune opacity.

Introduce CSS variables stored in the root to create reusable colors and spacing. Apply them with var() to body and headings, and switch to dark mode via a class.

Discover how to style web typography by selecting fonts with fallbacks, tuning line height, size, weight, and style, and applying alignment, transform, and decorations for readable pages.

Center a div on the page using the margin auto trick for horizontal centering, then apply flexbox with height 100vh to center vertically and horizontally.

Explore creating and styling HTML lists with ul and li, customize colored square markers with list style type, and apply pseudo elements like marker and first letter.

Create an ordered list with ol and li, including TypeScript and vanilla JavaScript, and a level 2 heading. Use list-style-type options and an id selector with descendant and child combinators.

Create a simple glossary using dl, dt, and dd to define terms like HTML and CSS, and enhance readability with borders, padding, hover effects, and tooltips.

Learn to build responsive chips using span elements, style with a chip class, and master flexbox to arrange, wrap, and space inline items for flexible layouts.

Add a hover effect that darkens the chip background and lifts it slightly, with a pointer cursor, shadows, a gradient background, and an outline variant for filled and outlined styles.

Declare a table with tr, th, and td to display skills, experience time, and experience level, and link a separate file named table CSS to style width and borders.

Improve table readability by adding 5px vertical and 10px horizontal padding, center text, and translucent header color via css variables, then apply alternating rows with nth-child and add hover effects.

Create a contact form using a form tag with text and number inputs, a textarea, labels with placeholders, and a submit button, styled via index.css.

Create a dedicated CSS file for the contact form, use flexbox to stack labels and inputs, and style focus glow with a gradient submit button.

Create a dropdown with a select tag and option elements, using Emmet in VS Code to generate a labeled topic field and name attribute with options like work opportunity, feedback.

Group radio inputs by the same name attribute so users can select only one option. Style the labels and include an email input with type email to validate addresses.

Create and group checkboxes in HTML to let users select multiple newsletter topics, using input type checkbox, same name newsletter, and styled labels for a cohesive form.

Add a date picker to the form, rename the e-mail field to e-mail address, and ensure unique ids for proper submission; HTML provides native date picking.

Explore form validation using the required attribute to enforce name and message fields, disable inputs like date picker and the phone radio, and use read-only and min/max to control values.

Learn how to handle a form submit with the onSubmit event, prevent page refresh, retrieve the user's name, and display a confirmation alert.

Add a profile picture to index.html by storing images in a resources folder, using the img tag with a relative src, and CSS to float and circle the image.

Create external links using the a tag, set the URLs with href, and open them in new tabs with target _blank for resources like YouTube, LinkedIn, and GitHub.

Learn to style hyperlinks with four states—normal, hover, active, and visited—using pseudo-classes, colors, and removing underlines to match your color scheme.

Learn to enhance links with SVG icons for YouTube, LinkedIn, and GitHub, and style them with inline flex to align icons and text for a clean, scalable web interface.

Create a navigation bar linking the main page and the contact form page using a flex layout, with a left title and right links.

Test and refine your page across devices using device mode, then apply media queries and css variables to switch from 600px to 330px for readability and dark mode.