Learn HTML Masterclass

Explore HTML markup basics using semantic inline tags such as small, big, mark, del, sub, sup, blockquote, and compare strong with bold and em with i.

Learn to create HTML anchors with href, build internal and external links, and organize a folder structure with relative paths to enable navigation and bookmarks across a multi-page site.

Discover how hyperlinks connect internal and external pages with relative and absolute links, use protocols, and control opening location with the target attribute to keep traffic on your site.

Learn to create bookmarks within a web page using id attributes and hash-based anchors, linking sections to improve in-page navigation and reduce scrolling.

Create a mailto hyperlink around an email address to open the default email client when clicked, noting desktop limitations and mobile-friendly alternatives.

Create a navigation bar linking internal pages like home, portfolio, about me, and contact, with an external Facebook link target _blank, using anchor text and separators.

Insert images into web pages using the image tag with src, and add alt text. Link local or external images with relative paths and understand width and height attributes.

Add four images to your portfolio page using placeholder images, set each as a thumbnail with a width of 100 px, and link them to their full-size versions.

Learn to create and style ordered and unordered lists in HTML, use list items, control start numbers and types, and apply CSS list style for clear content presentation.

Learn how to use descriptive lists (dl, dt, dd) to group terms and their descriptions, and nest lists to organize content for web design.

Learn how to nest lists inside other lists using ordered and unordered lists, creating readable, well structured HTML with proper nesting and closing tags.

Master creating a descriptive list of services in an HTML page, using a dl with dt and dd to outline photography (weddings, birthdays) and digital services like web design.

Learn how to build HTML tables with rows, columns, and cells, and structure them with thead, tbody, and th for accessible, semantic data layouts.

Learn how to use colspan to span across multiple columns and rowspan to span rows, enabling totals and merged cells in HTML tables, with planning and practice.

Learn how to bring code from code pen into your editor, apply css styling with inline styles or style tags, and link a stylesheet in the head for shared updates.

Build an HTML table showing days of the week and hours open, using th for headers, td for cells, and colspan for closed periods, with styling for borders and spacing.

Explore HTML forms, create a form with inputs and a submit button, learn input types such as text and password, and understand submitting a form to itself and basic styling.

Learn to build a basic html form and use the name attribute to identify submitted data, including text, radio groups with the same name, and preset values for server-side processing.

Explore new html5 input types, including color, date, email, number, tel, and url, to collect precise user data. See browser-driven validation and simple form enhancements.

Master HTML form elements, including file input for uploads, select dropdowns with option values, and textareas with configurable rows and columns. Build contact forms with submit buttons that submit data.

Learn to set form submission targets with action attributes for login.php and contact.php, compare get and post methods, and label inputs with for and id.

Build a from-scratch contact form with name, email, subject dropdown, message, and a submit button; add labels and IDs, use placeholders, and require fields for a full width layout.

Explore HTML5 semantic elements such as header, nav, section, article, and footer to structure pages for clearer, more meaningful, and readable source code.

Embed external or internal pages using the iframe tag with src, width, height, and border controls. Learn about nested frames, break-out behavior, and how search engines treat framed content.

Assemble a fully functioning website by integrating home, about, portfolio, and contact pages using a clean template and shared HTML structure. Update navigation to align pages and promote consistent tagging.