Frontend Web Development for Beginners

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.

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.

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 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.

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.

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.

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

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.