The Complete Full-Stack Web Development Course from Scratch

Master HTML syntax by learning opening and closing tags, how elements like p, h1, and article form the DOM tree, and why nesting and accessibility matter.

Learn how to structure text with the html paragraph tag, create multiple paragraphs with p elements, and speed coding in VS Code using Emmet.

Explore how HTML uses em and i for emphasis and italics, and strong and b for semantic meaning and visual bold, plus when to apply them and alternative CSS options.

Learn to distinguish HTML block codes from inline codes, using block elements like headings and paragraphs with citations via the cite tag, and practice inline code with the Q tag.

Explore marking dates and times in HTML with the time tag and datetime attribute. See how to use 24-hour formats and time zones for precise machine readability.

Learn to use subscript and superscript for subscripts and superscripts, apply the small tag for semantic less important content, and display formulas with code and MathML in web design.

Learn how aria in html improves accessibility by adding aria labels and hiding elements, with practical testing in Firefox and Chrome to ensure screen reader clarity.

Learn how HTML treats blank spaces, how pre, code, and textarea affect formatting, and when to use non-breaking spaces and break tags, plus documenting with comments.

Understand how HTML tags shifted from uppercase to lowercase as the language evolved, and why both styles still work on countless sites, differentiating code from content.

Explore the different types of HTML tags, from short to full word tags like p, br, article, img, and section, and learn about opening versus closing tags.

Discover how to create clickable links with the anchor tag and href, wrap links around text or images, and build navigable pages and linked cards.

Master relative URLs to link pages within the same site using folders and anchor tags, with forward slash and dot dot slash to navigate between child and parent pages.

Organize a website with a clear file structure to simplify maintenance and updates. Create separate folders for css, img, js, and pages, with index.html outside.

Build a navigation bar using a ul with class nav bar and links for home, services, products, about, contact, wrapped in a nav with role navigation and aria-label main menu.

Explore four web image formats—gif, svg, jpg, and png—and learn to balance quality and size with compression, transparency, and the growing use of webp for faster websites.

Learn to swap images by device width using the picture element with source tags and media queries, defining min-width breakpoints and srcset for mobile and desktop.

Learn to add audio to HTML using the audio tag, include src and controls, and use source elements for multiple formats with optional loop and autoplay settings.

Explore embedding videos in HTML using the video and source elements, adding controls and multiple formats. Learn about h.264 compression, metadata checks, and adaptive bitrate concepts for streaming.

Explore how captions and subtitles improve accessibility across languages using WebVTT and the HTML track element, with hands-on steps to create caption files and apply them to video.

Learn to embed videos via iframes from platforms like YouTube and Vimeo, adjust start points and privacy enhanced mode, and weigh security risks before embedding unknown sources.

Explore how HTML supports multiple languages with the lang attribute and dir direction, and learn to set a universal charset with utf-8 via meta tags in the head.

Explore the div and span tags, contrast block and inline elements, and learn when to replace div with section tag or other semantic elements.

Declare the doctype to signal the HTML version, then define the HTML tag with lang and dir attributes, and separate content into head and body sections.

Explore the body tag's six semantic elements—main, header, footer, article, section, and aside—and learn how each signals the page structure, supports accessibility, and organizes content for better usability.

Learn to build a basic web page using semantic elements in a productive workflow with VS Code, including header, nav, main, article, aside, and footer.

Explore browser form elements, from input and label to post and get methods, and build an accessible signup form with proper labeling and attributes.

Enhance HTML forms by specifying input types (text and email), using the type attribute, enabling required fields, adding placeholders, and relying on browser validation on submit.

Learn to implement and customize date and time inputs—date, time, month, week, and date time local—with default values, read only and disabled states, and practical browser interactions.

Learn to implement a browser-generated color field by replacing the input with type color, offering hex, rgb, or hsl options without plugins.

Explore how to build dropdowns and grouped selects using HTML select and option groups, then enhance user input with a datalist for ice cream flavors.

Learn to replace a traditional submit with an image button, implement a hidden field, and add a reset control to restore the form to its default state.

Css stands for cascading style sheets, and html and css work together, with css requiring html to function and styling the html to improve user experience.

Explore three CSS placement methods—inline, internal, and external—through practical examples showing the style attribute, a style tag in the head, and linking an external stylesheet style.css.

Explore CSS core concepts: absolute and relative length units, keyword values, color and typography properties, and function-based values like rotate, calc, and background image, plus browser styles.

Explore how css selectors target html elements to apply styles, from type and universal selectors to practical examples like coloring paragraphs, removing link underlines, and styling h1 and h2 tags.

Style many elements with CSS classes in dot notation and unique IDs for navigation. Attach multiple classes to one element and name IDs and classes descriptively with hyphens or underscores.

Explore a live example of using classes and IDs in HTML and CSS, building a structured page with headings, sections, articles, and styling through classes, IDs, and an external stylesheet.

Explore descendant selectors in css to apply styles to nested elements such as h1, p, ul, and a inside a section. Learn skipping levels with section a in practical examples.

Group selectors using classes or comma lists to apply the same styles to multiple elements, then use precise combinations like p.red to target a specific element.

Learn how inheritance and selector priority shape CSS styling, from universal to ID selectors, with live examples showing color inheritance and overrides.