Frontend Web Development for Beginners

Learn about popular text editors for web development, with Visual Studio Code and extensions, plus quick overviews of Notepad++, brackets, and Sublime Text on Windows.

Install and launch Visual Studio Code, explore its lightweight editor, and enable extensions like the Material icons theme to organize HTML and CSS files.

Explore the html document structure by building a basic page with doctype, html, head, and body, including charset, viewport, and title metadata, and observe how body content displays to users.

Create and organize web project files by opening a code editor, making folders, and saving index.html and main.css to build a basic html and css setup.

Organize your project by creating images and video folders, moving files in, and updating code to reference these directories. Learn to dynamically populate image lists and ensure video playback.

Learn how to use HTML comments to document code, hide lines from the browser, and support collaborative projects by clarifying intent.

Learn to insert local images in HTML using the img tag and src, add alt text and title for accessibility, and make images clickable with the a tag.

Learn how to insert online images using the img tag with src, title, width, and height attributes, including accessibility considerations for screen readers and tooltip behavior.

Learn to comment code by highlighting text and pressing control plus question mark to tell the browser not to read the code, and apply the same for multiple comments.

Learn to use H1 to H6 heading tags with opening and closing tags to structure titles and subtitles. See how these headings affect browser rendering and accessibility for screen readers.

Insert and configure a video in HTML using the video tag, set source, add controls, adjust width and height, and enable autoplay, loop, and a poster image.

Explore common html tags for text styling and structure, including p, br for line breaks, nbsp, bold (strong), italics and emphasis (em), underline, superscript, subscript, and hr.

Learn to create ordered and unordered lists in HTML by using ol and ul tags with li items, including opening and closing tags, and preview results in the browser.

Learn to format lists using the type attribute to produce alphabetical, numeric, and lowercase roman numeral lists, with live demonstrations of A, B, C, 1, 2, 3 and i, ii, iii.

Learn how to link between HTML pages using anchor tags and href attributes, create a home and about page, and navigate between them.

Explore creating an email link with an anchor tag using mailto:, so clicking contact us opens an email dialog with a preset subject.

Learn how to link pages with the a tag and href, and open external links in a new tab using target=_blank for better navigation.

Apply CSS styles inside the style tag to the body and headings, adjusting color, font size and family, and setting a beige background to see live browser updates.

Explore applying css inline styles with the style attribute on h1, p, and body to set color, font size in em, and font style.

Use the CSS grouping selector to style h1, h2, and p with one rule, reducing redundancy, then refresh the page to see color and italic font-style applied.

Explore how to use the CSS id selector with the pound sign to target elements by id, assign ids in HTML, and style them—changing color and font size.

Master the CSS class selector by defining a class name and prefixing it with a period in CSS. Reference the class in HTML to style elements like h2.

Insert a background image using CSS on the body with the background-image property, pointing to the images folder and file name.

Learn to apply margin and padding in css to control spacing around and inside elements like divs and text, using shorthand and browser inspection.

Change text color with rgb, hex, and hsl values. Use color names or hex codes from the W3Schools documentation, and refresh the page to see the update.

Discover how CSS comments disable styling by wrapping lines in /* */, and see font size and the italic class become inactive when you refresh.

Learn to style text with CSS by adjusting font size, color, bold weight, italic styles, font-variant such as small caps, and font family, and understand font fallback across browsers.