Modern HTML & CSS From The Beginning 2.0

Begin from scratch to set up html documents with a live-reloading server, learn basic tags, headings, images, divs, spans, semantic tags, block vs inline elements, emmet, and editor shortcuts.

Master the building blocks of web pages by understanding HTML tags and attributes, including opening and closing tags and void elements.

Explore the document structure of an HTML page, including the HTML5 doctype, root HTML tag, head, and body. Practice building a basic index.html and using comments.

Use live server in VS Code to run HTML pages on localhost:5500 with auto refresh, and enable prettier to format HTML, CSS, and JavaScript on save.

learn how meta tags in the head convey page metadata to search engines, including the utf eight character set, viewport for responsive design, and the description, keywords, author, and robots.

Explore headings and paragraphs, apply basic typography, and use inline emphasis tags like strong, em, mark, del, ins, sub, and sup to structure content.

Master browser devtools basics by inspecting and editing HTML and CSS in the elements tab, viewing computed styles, and using the device toolbar for responsive previews.

Learn to embed images with the img tag, using src and alt, optional width, height, and title, plus figure and figcaption for captions, and relative vs absolute paths.

Explore the use of classes and IDs to identify page sections, distinguish CSS from JavaScript roles, and apply reusable styles like card, text center, and responsive text sizes.

Discover practical keyboard shortcuts for the editor, from the command palette and explorer toggling to universal shortcuts across editors such as VS Code. Master moving, copying, pasting, and tab management.

Build HTML for three cards—free, pro, and enterprise—inside a container pricing flexbox, using cards, h2, price, price info, main text, btn, and features list.

Create and configure HTML forms with inputs, set the action and post method, and submit data to servers or services, using text, email, password, and other input types.

Explore text-based input tags in HTML, including text, email, and password fields, with labels, ids, and submit controls; learn structuring forms with divs and basic validation hints.

Learn to embed audio with the HTML5 audio element using the audio and source tags. Add controls, autoplay, loop, playback speed, and a download link, with a graceful fallback.

Learn to create an image map in HTML using the image tag and the use map attribute, with area shapes and coordinates linking to separate pages.

Learn to build and style HTML tables for tabular data using table, tr, th, td, thead, tbody, and the call span, row span, and call group attributes with CSS.

Learn how the iframe embeds external content, from a YouTube video and Google Maps to PDFs and calendars, with a quick compare to embed and object elements, and CSP considerations.

Explore global attributes that apply to all HTML elements, such as class, id, style, access key, title, hidden, tabindex, contenteditable, draggable, and autofocus, and how they shape markup.

Explore scalable vector graphics (SVG), an XML-based 2D format with interactivity and animation, embeddable in HTML and editable via text editors or graphics software.

Learn how to use the progress and meter elements to display progress and levels. Configure max, value, min, low, high, and optimum attributes, and apply accessible labeling and CSS styling.

Master css fundamentals: syntax, basic selectors, color and text background properties, and css specificity, then explore box model, flexbox, grid, responsive design, plus using Font Awesome icons.

Explore how to specify colors in CSS using color names, hex, rgb, rgba, and hsl, and apply them to text, backgrounds, borders, shadows, overlays, and svg fills.

Explore CSS specificity, the weighting algorithm that decides which declarations apply, from inline styles to IDs, classes, and elements, and learn how !important and third‑party CSS affect overrides.

Explore background properties in HTML and CSS, including background color, background image, and gradients, with practical examples using a hero section, flexbox centering, and gradient transitions.

Explore how to style links in CSS across normal, hover, active, focus, and visited states. Apply color, background, and text-decoration rules to create accessible, interactive link visuals.

Learn to style a page with CSS basics, using selectors and properties, and Google Fonts font Lado, with precise typography and color rules for header, navigation, and lead text.

Master the box model and sizing, including height, width, and overflow, plus margin, padding, borders, and resets. Build a freelance form and clothing cards with shadows, borders, and border radius.

Master the CSS box model by understanding content, padding, border, and margin, and see how width, height, and box sizing govern responsive layouts.

Master the box model by sizing with width, height, padding, border, and margin, while controlling overflow and using max width and min width for responsive layouts.

Explore flexbox fundamentals, including flex containers, items, wrap, gap, and alignment, plus CSS grid for layouts; apply flex properties and ordering in layout and pricing grid projects.

Explore flexbox, a one-dimensional CSS layout that makes arranging and aligning elements easy. Understand flex container versus flex items, main and cross axes, and how display:flex handles dynamic content.

Master the basics of flexbox by creating a flex container, setting display to flex, and exploring row and column layouts, wrapping, gap spacing, and alignment with align-items and justify-content.

Learn how the flex order property rearranges items in a flexbox, allowing you to display content in a desired order without changing the HTML markup.

Master a responsive flexbox layout with a header, horizontal navigation, and a two-column main area (section and aside), including spacing, padding, and simple styling.

Tackle a pricing card css mini-project by building a three-card pricing grid. Use flexbox, Montserrat fonts, font awesome icons, gradients, and hover buttons.

Master responsive design fundamentals, including viewport concepts, fluid typography, and layouts using rem, em, and percentage units. Learn to apply media queries, container queries, and container units for adaptable layouts.

Master flexible layouts using max-width and percentage widths to keep containers and images responsive across screen sizes. Explore fixed sizes, media queries, and fluid typography with em and rem.

Learn fluid typography with rem and em units to keep text and margins responsive, while comparing absolute and relative units and emphasizing the root HTML font size.

Learn to use media queries to apply styles for different screen sizes and media types with the @media rule, using max width, min width, height, orientation, and common breakpoints.

Learn to make a pricing grid responsive by stacking cards on small screens with flex direction column and media queries, and fine-tune margins and padding for desktop and mobile layouts.

Leverage responsive flexbox to stack header and main content with flex-direction: column, center the header at max width 768, and reorder recent posts with column-reverse.

Explore container queries in css, a size-based alternative to media queries. Apply them to a container's inline size using container type and container name.

Explore container units using container query width and height, like vh and vw but container-scoped, sizing cards at 50, 70, and 95 cq w under 600 px.

Set up a new web project with index.html and styles.css, a dedicated folder structure, linked fonts and icons, then build a header with a logo and contact info for styling.

Learn to set up base css with a reset and box-sizing, apply Open Sans, create a gradient background wrapper, and build a header with a logo and hover links.

Activate a responsive flex layout for the main content, placing the form and text container side by side with flex:1, capped at 1100px, centered, and separated by gap and padding.

Master responsive mobile layouts with flexbox and media queries, shaping header and main content, typography, spacing, and background cover for varied screen sizes.

Learn to build a smooth scrolling mini-project using the CSS scroll-behavior property, linking a top navigation to sections home and project 1–4 for seamless in-page navigation.

Learn to implement a sticky nav with css and use javascript to toggle transparency when not at the top by adding a transparent class on scroll.

Explore native css nesting to organize selectors inside components like header, h1, and paragraphs, using ampersand for hover, and apply nesting to a hero and card layout with responsive adjustments.