HTML5 Mastery—Build Superior Websites & Mobile Apps NEW

Learn HTML semantics by using block elements like p and h1–h3 to convey meaning, not style, and build a proper document with doctype and title.

Discover how to connect related data with lists using ul and ol, define items with li, and build definition lists with dt and dd for terms and descriptions.

Learn how to group HTML5 content with semantic containers such as nav, header, footer, main, article, section, aside, and div to improve structure, accessibility, and readability for websites and apps.

Master html5 semantics by recognizing headers, nav, ul, li, main, article, section, aside, and h1–h3. Replace divs with semantic containers for websites and apps, using Engadget Xbox One examples.

Create an album for your social event by building a fictional html5 conference site for Petra, Jordan, rendering images, videos, audios, tables, and schedules with rich content.

Prepare web images by choosing formats (svg, png for icons; jpeg for photos; gif for animations), remove Exif metadata, resize for CSS pixels, and compress files before publishing.

Create a video player using the video tag with mp4 sources, a poster image, and controls. Set dimensions and preload options, and enable casting via airplay and chromecast.

Learn to render data tables with HTML5 using table, thead, tbody, tr, th, and td to display schedules; merge cells with colspan and rowspan and apply CSS.

Learn to resize and compress images, remove metadata, and embed rich content—images, animations, audio, video, and data tables—before introducing css styling.

Pair HTML with CSS to define content and style, using selectors and syntax to control color, background color, layout, padding, margins, and borders, with Flexbox for modern layouts.

Style text and colors guides applying font family, font size, weight, and alignment to headings and paragraphs, and defining colors with hex, rgb, hsl, and color pickers.

Apply background images in CSS using the URL function to reference images, such as Pac-Man background.jpeg. Control background size, repeat, margins, padding, and text styling for header and paragraph contrast.

Learn how CSS defines and styles HTML content using selectors to target elements, style text, and lay out pages; also cover hyperlinks, mail actions, and embedding external content like YouTube.

Design and build a coffee roaster company website, learning to create hyperlinks and embed external content from YouTube, Facebook, and Twitter while editing with Visual Studio Code.

Learn how urls uniquely locate resources on the web, distinguish relative from absolute urls, and use dots, slashes, and anchors to navigate folders, domains, paths, and queries.

Master advanced link options in html, including rel values such as external, next, nofollow, and alternate, plus download, hreflang, and type attributes that guide browsers and search engines.

Learn to embed external content such as YouTube, Facebook, Twitter, and Instagram using iframe and embed codes, customize size and privacy options, and display embedded content in HTML5 pages.

Create your own personal activity home screen for mobile devices using material icons, deep linking, and uri schemes, built from scratch with html and css.

Open native apps on mobile devices via Uri schemes and universal links, and navigate using Google Maps, Apple Maps, and Uber deep links with proper url encoding.

Explore how to use uri schemes to open messaging, calls, and social apps across platforms, including sms, WhatsApp, Telegram, Facebook Messenger, FaceTime, Skype, Twitter intents, Snapchat, and Google Maps.

Master linking with the A tag, internal hash links and external sites; embed Facebook posts and YouTube videos, and connect with native app actions like custom activity launcher before publishing.

Choose a provider and a public URL by selecting a domain or subdomain, then connect to a hosting service—shared, virtual, or cloud—using options like Google Firebase, Namecheap, or GoDaddy.

Track website visits with analytics, set up a Google Analytics property and tracking script, and monitor audience, devices, acquisition, behavior, conversions, and goals to optimize your site.

Publish your html app for free with Firebase hosting on the spark plan, offering static hosting, 1 GB storage, 10 GB monthly transfer, and a Firebase or custom domain.

Connect to a web hosting ftp server using FileZilla, enter host, username, password, and port, and upload files via quick connect or site manager by dragging from local to remote.

Learn to connect your website with social networks, make content shareable, and add Facebook like buttons, comments, Twitter tweets, WhatsApp sharing, and aggregator integrations.

Build a simple city guide for Bangkok and enable social network sharing by downloading, unzipping, and editing index.html in Visual Studio Code, then publish to Bangkok City Guide.com.

Learn to implement sharing with WhatsApp and other networks using URI schemes, icons, and share widgets, including inline and sticky buttons, across mobile and desktop.

Learn to optimize HTML5 content for mobile devices by applying viewport meta tag, tailoring code for iOS and Android with platform-specific tricks, and serving images for high-resolution displays.

Optimize a mobile restaurant menu app accessible via QR codes. The project includes sections like soup and salads, tandoori, and vegetarian dishes with each article listing name, description, and price.

Learn mobile optimizations by applying the viewport meta tag and device width, and sizing text with em units. Increase touch targets and adjust selection and tap highlights for usability.

Learn to optimize your web app for iPhone and iPad by configuring home screen titles, icons, and tints with Apple meta tags, Apple touch icons, icon sizes, and gradient tricks.

Optimize for Android by providing an Android-specific icon (192 by 192) via a rel icon link and set a meta theme-color to match your header.

Apply sticky headers for mobile by using position fixed, absolute, and sticky, with top and padding tweaks to keep headers visible as you scroll.

Optimize for mobile by using the viewport meta tag and iOS and Android icons. Apply theme color and title meta tags, disable popups, and use fixed or sticky headers.

Build an ecommerce order form from scratch in HTML5, focusing on the checkout form for a winery and routing submissions to email via Forms Predio, with optional server-side storage ideas.

Add html5 form validation and styles with min/max values, required fields, placeholders, autofocus, and autocomplete, and use css pseudo-classes like valid, invalid, and focus to guide input.

Explore advanced HTML5 input types such as date, time, date time local, and range, and implement checkboxes, radio buttons, and text areas with proper labels and values.

Add dropdown menus to the shipping form using select, option, and optgroup to choose country by group, set default selections, assign server values, and handle optional multiple selections.

Explore sending html forms by defining the action url and using post or get methods, validate inputs, and route submissions with a free form service to email results.

Learn to build interactive forms with input, text area, and select, apply validation rules, and style errors with CSS, and connect to free services to email form data.

Build a functional shopping cart in HTML5 and JavaScript by extending the restaurant menu app, using data-title attributes to identify meals, and styling with a fixed, layered cart.

Manipulate elements and styles with JavaScript to build a dynamic order cart, using querySelectorAll, for...of loops, dataset attributes, innerHTML, and style properties.