HTML5, CSS3 & JavaScript for Beginners - Build Real Websites

Master HTML syntax with opening and closing tags that form elements such as p, h1, and article. Discover nested tags, the dom tree, and the role of accessibility.

Set up a html practice folder in vscode, create and save an html file, and learn to structure text with paragraph tags, including using emmet p*3 to generate multiple paragraphs.

Discover how HTML headings structure pages with h1 through h6 and enhance accessibility for screen readers. See hands-on examples in VS code, Emmet, and live browser inspection.

Discover how HTML uses em and i for emphasis and italics, and strong and b for importance and styling, with CSS as an alternative.

Explore how lists organize web content using ul, ol, and dl, with li, dt, and dd, including nested structures, menus, bullets and numbers.

Understand HTML's inline and block elements, with block level elements like h1, p, and ul occupying block space, while inline elements such as b and em appear inline.

Learn how to use block and inline codes in HTML, including block elements with citations and the q tag for inline quotes, to create semantically correct, well-formatted quotes.

Explore how to use the time tag in HTML to mark dates and times with datetime attributes, covering formats, time zones, and semantic clarity for both humans and computers.

Discover how to use kbd, code, br, and pre tags to display keyboard shortcuts, render code, and create preformatted text with HTML entities.

Apply sub and sup tags to render subscript and superscript in HTML. Mark less important content with the small tag and use the code tag, noting MathML as an option.

Explore global attributes in HTML, including class, id, lang, and dir, and learn how to build a jump menu and use contenteditable for in-page editing.

Explore how aria improves accessibility in HTML by applying aria roles and labels, test with browser accessibility tools, and fix letter-by-letter rendering with aria-label and aria-hidden in hello world page.

Learn how HTML handles blank spaces, including preformatted content, uses &nbsp; for extra spaces and br for line breaks, and documents code with comments <!-- --> to disable sections.

Explore how uppercase and lowercase HTML tags evolved and why capitalization no longer matters, with both working on countless sites.

Learn the types of html tags, from short to full word tags, with examples such as p, i, pre, br, article, and section, and how opening and closing tags work.

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

Learn to create hyperlinks with the anchor tag, use the href attribute, and wrap text or images to link to pages and sections, including image links and content cards.

Explain that a URL, or Uniform Resource Locator, identifies a web resource and forms absolute URLs using http or https prefixes, a domain, and a path.

Explore how relative URLs link pages within the same website by using folder structures, forward slashes, and dot dot slashes to navigate between pages and back to the parent.

Organize a static website by creating separate folders for css, img, js, and pages. Place html, images, css, and javascript files outside and inside their folders to simplify maintenance.

Learn proper file naming for websites, using index.html as the home page, descriptive image and page names, and hyphenated formats to improve readability and SEO.

Explore building navigation bars using ul, li, and anchor tags wrapped in a nav element, with role navigation and aria-label main menu; learn breadcrumbs and footer navigation options.

Learn how to embed images in HTML using the img tag, including src and alt attributes, and control size with width and height while enhancing accessibility with descriptive alt text.

Compare image formats such as GIF, SVG, JPEG, PNG, and WebP to balance quality and size on the web.

Discover how to use srcset for responsive images, supplying multiple resolutions (480, 1060, 1280, 1920) so the browser loads the best image for each device.

Define responsive images by viewport width using the sizes attribute with media queries for max-width 480, 960, and 1280, mapping to image widths of 240, 480, and 960 pixels.

Learn to implement the picture tag with source elements and media queries to serve device-specific images for mobile, desktop, and laptops, using a minimum width of 600 pixels.

Learn to caption images with the figure and figcaption tags by wrapping an image in a figure, adding a caption, saving the file, and previewing in a browser.

Add audio to HTML using the audio tag with a src attribute and controls. Learn to use the source element for multiple formats, and explore loop, autoplay, and playback speed.

Embed a video in HTML with the video element, src and source attributes, controls, and a set width, while noting H.264, metadata, Handbrake, and adaptive bitrate streaming.

Explore how to add captions and subtitles to HTML5 video using the WebVTT format and the track element, including creating caption files, defining language, and enabling multiple languages.

Embed videos on your site using an iframe from hosting platforms like YouTube or Vimeo, reducing storage and page load time while noting privacy enhanced mode and security risks.

Learn to add lang and dir attributes for multilingual HTML, and apply UTF-8 encoding with meta charset to support all languages and emojis.

Explore the div and span tags in semantic HTML, comparing block level versus inline elements, and learn when to replace div with section and use semantic elements sparingly.

Declare the document type with doctype to signal the HTML version, define the HTML tag with lang and dir attributes, and separate head for styles and meta from the body.

Learn to structure an html document with doctype, head and body, set charset and viewport, add title and meta tags, and link css, favicon, and scripts.

Explore the body tag and six semantic elements: main, header, footer, article, section, and aside, and contrast the head with header content for navigation and accessibility.

Create a basic semantic web page in vs code by building a new HTML file and adding header, nav, main, article, aside, and footer, wrapped in a div.

Explore how form elements power login, sign up, and newsletter signups in HTML5, CSS3 & JavaScript course, with labels, inputs, and buttons, post and get methods, and accessibility improvements.

Learn to enforce proper data entry in forms by using input types (text and email), adding required validation, placeholders, and a submit button to leverage built-in browser validation.

Create form fields to collect user information, stack them with CSS (display: block; margin-bottom: 8px), and implement phone and password inputs for a registration form with hidden passwords.

Implement a URL input that requires a complete http or https URL with a placeholder cue, and a number input with up-down controls, validation, and support for negative values.

Learn to implement date and time input types in HTML forms, set a default date, and toggle read-only or disabled states, with time, month, week, and date time local fields.

Create a single-choice gender field using radio buttons grouped in a div, with labels for male, female, other, and prefer not to say, all sharing the same name e gender.

Create and configure HTML checkbox fields to collect multiple meal options, using a div container, input type checkbox, and name/value attributes for breakfast, lunch, and dinner.

Create a functional search bar with a labeled input and placeholder, plus a submit button, and a file upload field that accepts images and supports multiple files for server uploads.

Learn to create a color field for a web page using the native browser color picker, by setting input type to color and using RGB, hex, or HSL options.

Create dropdowns with HTML select elements, grouping options into breakfast, lunch, and dinner, then use a data list with an input for fast, searchable ice cream flavors.

Build a simple web form by adding a text area for messages and a range input for a slider, adjusting cols, rows, min, and max to control size and smoothness.

Use input type=image as a submit button, input type=hidden to hide data, and input type=reset to clear the form back to its default.

Wrap the entire form in a fieldset with a legend labeled registration form to visually group all inputs, creating a cohesive HTML form structure.

Learn how HTML tables present tabular data with table tags, avoid using tables for layout, and use semantic elements and CSS design; apply tables to employee lists or price changes.

Create your first html table using table, tr, td, and th to arrange four rows, four columns, and a header for serial, name, email, and phone, then add a border.

Explore how cascading style sheets rely on HTML tags to style and design web pages, and learn why CSS and HTML work together to deliver a better user experience.

Explore browser developer tools to inspect and modify HTML, CSS, and JavaScript, build a basic page in VS Code, and test updates across browsers using style.css and element.style changes.

Learn the three places to place CSS: inline, internal, external; use style attributes, style tags, and link rel stylesheet to control h1 colors and maintainable design.

Learn CSS syntax by mastering declaration blocks, properties and values separated by a colon and semicolon, and using longhand and shorthand padding with comments to organize styles.

Explore how CSS uses absolute and relative length units, keywords, and functions like calc and transform to control layout, color, and typography, including line-height, background images, and browser defaults.

Identify how to define CSS colors using keyword values, hexadecimal, rgb/rgba, and hsl/hsla, including opacity, color names, and practical editor tips.