
Improve your learning with keyboard shortcuts, code along, and commenting; practice by building mini apps like grocery lists and to-do lists while exploring the folder-like website structure using text editors.
Equip yourself with essential web development tools—Chrome for debugging and editors like Atom, Brackets, Visual Studio Code, or Sublime Text—and learn the html structure: doctype, html, head, and body.
Explore basic HTML5 structure using brackets, including creating a doctype, html, head, title, and body. Learn how to use headings, paragraphs, and line breaks (br) to format content.
Explore how HTML handles special characters, using entities like < and &, and learn to format text with paragraphs and non-breaking spaces.
Build an HTML reference sheet covering doctype, head, body, headings, paragraphs, spans, and links with href, while noting the difference between tags, elements, attributes, and the DOM.
Delve into advanced text formatting in HTML5, mastering bold and strong, italics and em, code blocks, block quotes, small text, and superscript and subscript.
Explore how to present content with images, lists, and tables in HTML5, using src and height attributes, ordered and unordered lists, and table structures with tr and td.
Deep dive into images in HTML, covering PNG transparency, Google image search tools, and correct relative paths and folder structures. Learn about SVG for crisp, scalable icons.
Deep dive into lists and tables in HTML5, exploring ordered and unordered lists, list styles, start attributes, and description lists for glossaries.
Explore advanced HTML tables by building a printable sudoku puzzle with a 9x9 grid, caption directions, and 3x3 separators, using tr, td, th, thead, colspan, borders, and non-breaking spaces.
Explore nesting lists, tables, and images in HTML5 by building linked structures and a photo gallery inside a table, then preview responsive ideas using bootstrap and CSS media queries.
Explore HTML5 forms, including input types, placeholders, and submit behavior, and learn basic event handling with JavaScript to create interactive forms.
Explore advanced HTML5 forms, including textareas, selects with options, and radio groups, while applying accessibility best practices with labels linked by for attributes, IDs, and descriptive alt text for images.
Learn head essentials like the title and meta tags—keywords and description—that guide search results and page markup, plus utf-8 charset, viewport, and linking css and javascript files.
Explore adding syntax highlighting with highlight J.S. and rendering math equations with math jacks in HTML5, inside Brackets, using Emmet, and leveraging head and body setup for live preview.
Add audio and video to html5 pages with proper sources and controls, and explore iframe, object, and embed fallbacks, plus using a cdn for hosting videos.
Explore the new HTML5 form inputs, including date, email, password, time, color, data lists, and autocomplete, and learn how labels and autofocus boost usability with built-in email validation.
Explore new sectioning tags in HTML5 by building a blog mockup that uses header, nav, main, article, aside, and footer to improve readability, accessibility, and content organization.
Learn how to structure pages with sections and articles, use details and summary for expandable content, and apply accessibility considerations for screen readers and web crawlers.
Review the essential html5 basics: structure a page with html, head, and body, use headings, paragraphs, and inline formatting, embed media, lists, tables, forms, and internal navigation anchors.
Guides building the open books HTML5 project in brackets, creating an index with linked book pages, image tiles, a table of contents, and a back navigation with live preview.
Learn productivity hacks for building a structured HTML5 final project by using multi-cursor techniques, creating sections with IDs, proper headings, and a linked table of contents for easy navigation.
Note: Background music for this course is generously provided by Exist Strategy. Visit their Bandcamp page to show your support. It's great background music for doing creative work.
Course Details
The most comprehensive introduction to HTML, starting with simple text formatting all the way to the new tags provided by HTML5. You will go from a pure beginner to having a strong foundation on HTML in just one weekend. If you already know HTML, this is a good way to review the new features that are included in HTML5. Completely free! Stay tuned for a Responsive Design course coming up that will take your existing HTML5 knowledge from this course and help you build responsive websites.