Learn Complete Modern Front-End Web Development Step-by-Step

Learn HTML syntax by using opening and closing tags for elements like p, h1, and article, and see how nesting creates a dom tree and informs accessibility.

learn how to structure text with the html paragraph tag by converting raw text into three paragraphs using opening and closing p tags, with emmet for rapid generation.

Learn how to use HTML heading tags from h1 to h6 to structure content, create accessible headings, and apply semantic markup, including Emmet tricks for rapid coding.

Learn how to mark emphasis in HTML with em and i for verbal emotion and strong and b for importance and styling, plus when to use CSS as an alternative.

Explore how HTML uses lists to structure content, including unordered, ordered, and definition lists with list items. Create nested lists, understand spacing, bullets, numbers, and practical examples.

Explore inline versus block elements in HTML, with practical tests using headings, paragraphs, and lists to show how block elements occupy space and inline elements flow beside each other.

Learn to distinguish block and inline codes in HTML, using block elements for structure and inline codes for inline styling, with semantic use of the cite tag for author quotes.

Explore how HTML handles date and time with the time tag and datetime attribute, featuring 24-hour formats, various date layouts, and time zone handling.

Learn to use kbd, code, pre, and br tags to display keyboard shortcuts, code snippets, and preformatted text, including using HTML entities and preserving line breaks.

Learn how to use subscript and superscript in HTML, format molecular and mathematical expressions, and apply the small tag for less important content.

Learn about global HTML attributes, including class and id, and build a jump menu with anchors, sections, and contenteditable examples, plus language and direction attributes.

Explore how aria roles and attributes enhance accessibility in HTML, test with browser accessibility tools in Chrome and Firefox, and apply aria-label and aria-hidden to ensure meaningful screen reader output.

Learn how HTML handles blank spaces, when to use pre or br tags, and &nbsp; for extra spaces. Use comments to document code and disable sections with <!-- ... -->.

Explore how HTML tag capitalization evolved from uppercase to lowercase and why both still work across thousands of sites.

Trace the evolution of html tag types—from p tag and eye tag to short and full word tags—and explain how memory limits in the 80s and 90s shaped use.

Learn how to use the non-breaking space (nbsp) to add extra spaces and prevent line breaks, with examples showing five spaces and keeping 'Prime Inspire' on one line.

Learn how to create and connect pages using the anchor tag and href attribute, embed links in text and images, and build clickable cards that navigate to destinations.

Discover how absolute URLs work by defining the uniform resource locator, the http/https protocol, domain and path, and how a locked https indicator appears.

Learn how to create links with relative URLs to navigate pages within the same website, using folder structures, anchor tags, and dot-dot slash to move between directories.

Organize a static website by creating folders for css, img, js, and pages, place style.css in css, banner.jpg and logo.png in img, and index.html outside of all folders.

Learn how to name files effectively in front-end development, using index.html as the home page, descriptive image and page names, and preferred hyphenated file names to boost readability and SEO.

Build a navigation bar with ul and anchor tags inside a nav element, linking home, services, products, about, and contact. Add aria-label main menu and explore breadcrumbs and footer navigation.

Learn how to add images with the img tag, use src and alt attributes, adjust width and height, and improve accessibility for screen readers.

Explore key web image formats—gif, svg, jpeg, png, and webp—covering quality, compression, transparency, and scalability, plus tips on optimizing metadata and using tools for compression.

optimize image delivery with the srcset attribute to serve multiple resolutions by device width, letting the browser pick the best image from 480, 960, 1280, and 1920 px.

Learn how to serve responsive images based on viewport width using the sizes attribute and max-width media queries for 480, 960, and 1280 pixels, with techniques promised in future classes.

Learn how to use the HTML picture tag to serve different images across devices with media attributes and multiple source elements, including mobile and desktop breakpoints.

Learn to use the figure tag and fig caption tag to caption images, wrap visuals in a figure, and place the caption after the image in HTML.

Learn how to add audio to HTML using the audio tag with src and source elements, include mp3 and ogg formats, add controls, and explore autoplay, loop, and fallback message.

Learn to embed a video in HTML with the video element, src and source attributes, and controls, set the width to 720 pixels, and explore mp4, webm, and metadata.

Participants learn to implement video captions and subtitles using the HTML5 video tag and WebVTT, adding track elements for English and Spanish captions to improve accessibility.

Embed videos on your site with iframes from platforms such as YouTube, Vimeo, and Dailymotion to save storage and improve load times, while prioritizing security and privacy.

Learn how to add language support with the lang attribute and handle right-to-left content with dir, applied to each section, and use utf eight with a head meta charset.

Examine the div and span tags, their block-level and inline meanings. Learn why semantic elements should replace them where appropriate, with the section tag as a modern alternative.

Declare the doctype html to signal the HTML version, set html tag with lang and dir attributes, and use head for styles and meta information, with body containing content.

Explore how the head tag communicates with the browser, covering charset, meta tags, viewport, description, title, link and script elements, and how these affect page rendering.

Learn about the six semantic elements inside the body tag, including main, header, footer, article, section and site tag, and how to use them to structure page content.

Learn to build a basic web page in VS Code, leveraging productivity features and semantic HTML. Create a page structure with header, nav, main, article, aside, and footer.

Build and test a newsletter signup form with native form elements, labels and inputs, a submit button, and compare post and get submission methods.

Set input types for form fields (text and email), add a submit button, and enable browser validation with required and placeholder attributes to prevent blank or invalid submissions.

Learn to build and style name, email, phone, and password fields. Apply a CSS block to stack inputs vertically, with clear labels, placeholders, and proper password input behavior.

Add a URL field that requires a complete http(s) URL, with https included for submission. Provide a number field with numeric input, up/down controls, and negative numbers.

Learn how to add and configure date and time inputs in a front-end form, including default dates, read-only and disabled states, and additional fields for time, month, week, and date-time-local.

Learn to implement a single-select gender field using HTML radio buttons, grouping labels in a div and setting name and values for male, female, other, and prefer not to say.

Learn to implement HTML checkbox fields, creating breakfast, lunch, and dinner options with proper names and values, enabling multi-select in a form for front-end development.

Create and customize a search bar and upload field in a web interface, including placeholders, labels, and input types. Implement image only uploads with accept, and enable multiple file selection.

Create a color field using input type color, revealing a browser-based color picker with rgb, hex, or hsl formats, without plugins for your web page.

Build dropdowns with select, option groups for breakfast, lunch, and dinner, and a data list for ice cream flavors to streamline large lists like countries.

Create a message field with a text area named e_message, using cols 30 and rows 5, then add a range input with min and max to create a seek bar.

Create a fancy image submit button, implement a hidden field, and add a reset button to restore form inputs to defaults.

Wraps the entire HTML form in a fieldset with a legend labeled Registration form, organizing all inputs inside a single box and demonstrating how to build custom forms.

Use html tables for tabular data only, not for page layout; rely on semantic elements and css for design, and apply tables for lists like employees or products with prices.

Create a basic HTML table from scratch using table, tr, and td, populate four rows with serial, name, email, and phone, and add a heading and border.

Explore how CSS and HTML work together, noting that HTML can run without CSS but CSS cannot run without HTML, and style pages for the best user experience.

Explore browser developer tools to inspect HTML, CSS, and JavaScript. Create and test a basic page in VS Code, then save styles in style.css and apply changes.

Learn how to place CSS inline, internal, and external, using selectors like H1, the style attribute, style tags, and link tags to apply colors such as green and red.

Learn CSS syntax by exploring declaration blocks, longhand and shorthand padding, commenting, and using hex and RGB colors to organize styles like navbar and footer.

Explore core CSS values, including absolute and relative lengths, numeric, hex, and named values, zero values, color, font size, font weight, rotate function, calc, background-image, and browser user agent styles.

Explore CSS color values, including keyword, hexadecimal, rgb/rgba, and hsl/hsla, with opacity control and practical examples using common colors.

Explore how CSS selectors target HTML elements and apply styles, from universal and type selectors to descendant selectors, with examples that color paragraphs, remove underlines, and style headings.

Master CSS class and ID usage to style multiple elements with shared classes, apply dot notation for classes, and use unique IDs with hash notation for in-page navigation.

Demonstrates using classes and IDs to style a live HTML example with a main heading, subheading, sections, and articles; apply CSS selectors, colors, and layout to create a fixed container.

Explore how descendant selectors style elements nested within the document object model, such as h1, p, and ul, using container and anchor examples.

Group selectors with classes and comma syntax to apply shared styles, such as color red to h3 and p. Maintain specificity by targeting combinations of selectors and classes.

Learn how inheritance in CSS lets a single rule apply to many selectors, explore which properties inherit, and master selector priority—universal, type, class, and ID—with live, practical examples.

Learn how to style web links using CSS pseudo classes (link, visited, hover, focus, active) and apply colors, backgrounds, and outlines to create interactive button-like links.