HTML5 course for Beginners Learn to Create websites

Create a web page by building a simple mockup to plan header, navigation, side menu, content, and footer in a boxy, grid-like structure, using HTML5 sectioning elements and divs.

Explore HTML5 content sectioning elements such as header, nav, section, and footer, and use h1 and div inside the body to create a semantic, readable page from a mockup.

Learn how to structure text content in HTML5 using div, nav, article, figure and figcaption, plus hr, br, paragraphs and preformatted text for readable layouts.

Learn to build a navigation menu using ul and li items like home, about, and contact, switch to a horizontal menu with inline display, and link CSS for styling.

Explore HTML5 inline text semantics, using abbr with a title, b and strong, em and i, br, code, span, div, sub, sup, and underline to structure and style text.

Explore HTML5 inline elements mark and time to highlight text. Present dates in a machine readable format with date-time attributes.

Embed HTML5 audio and video using video and audio elements with source tags for multiple formats and built-in controls, plus fallback messages and poster options.

Create and style an HTML5 canvas, then access it with JavaScript to draw graphics and animate. Learn to set size, assign an id, obtain context, and use fillRect and strokeRect.

Learn to set up HTML forms with text inputs, checkboxes, radio buttons, textareas, and a submit button, using unique name and id attributes to send data to the server.

Explore new HTML5 form field types, including placeholders, email, url, password, file, number, and select with options, and learn how built-in validation and mobile keyboards improve user input.

Explore HTML5 form attributes, including action and method (get or post), to improve submission security, and group fields with fieldset and legend; learn about data lists as alternatives to selects.

Explore five new HTML5 form options, including range sliders with min and max, and date or time pickers. Include color, search inputs, and built-in validation like required fields and emails.

Explore HTML5 interactive elements like details with a summary, dialog, and menu to create dropdowns and popups, then implement and test them in a web page.

Learn to implement the HTML5 meter and progress elements, set min, max, and default values, and visualize progress on a web page.

Explore HTML5 attributes that add information to elements, enable tooltips with title. Control images with width, height and alt text, use href, id, and class to link and identify elements.

Discover how HTML tables organize content with rows, cells, and optional headings for accessibility, and how CSS styling adds borders, padding, and width control.

Turn existing html into a full website by applying css styling, removing unnecessary code, updating content and layout, and preparing to style with style.css in upcoming lessons.

Learn CSS styling options in HTML, including inline, internal, and external CSS. Compare fixed width and fluid layouts, center content with margins, and preview responsive behavior.

Update the header: set the company name as an h1 with a logo class in the main header id, add a logo image floated left, and tune padding and typography.

Turn an unordered list into a horizontal navigation bar by styling the ul and li items with inline-block, removing bullets, and applying color, background, padding, margin, and box model concepts.

Learn to finish a navigation bar by adding a hover effect that swaps background images, showcases the hover pseudo-element, and increases click-through with CSS hover techniques.

Learn how to use CSS floats to structure a page by floating the main content and side menu, set width and height, and clear floats for a responsive layout.

Learn to style main content by floating images left or right to align with text, use max-width and height to size images, and refine the side menu and the footer.

Update the website css by applying border and border-radius, adjusting margins, padding, and font sizes, removing the body border, and planning a responsive, mobile-friendly layout.

Apply finishing touches to the contact page, add header links, duplicate default templates, and use a single stylesheet to propagate updates and boost the site's dynamic behavior.

Use CSS media queries and breakpoints to create a responsive website that fluidly resizes, hides images on small screens, and adjusts padding, margins, and widths for mobile and desktop.

Practice HTML online with CodePen, paste HTML in the body, include style and JavaScript, and see live updates on the display panel as you edit.