HTML "How To" Articles

• Styling

  • Add CSS to HTML
  • Center Text and Elements
  • Change Font Styles
  • Use Google Fonts
  • Add Borders
  • Create Rounded Corners
  • Add Shadows
  • Create Gradients
  • Make a Transparent Background
  • Style Links

• Images & Media

  • Add Alt Text to Images
  • Create Responsive Images
  • Use picture for Different Screen Sizes
  • Lazy-Load Images
  • Embed a YouTube Video
  • Autoplay a Video
  • Add Audio to a Webpage
  • Create a Video Background
  • Add Captions to Videos
  • Create an Image Gallery
  • Set a Background Image in HTML
  • Make a Background Image Not Repeat
  • Stretch a Background Image
  • Resize Images in HTML
  • Link an Image in HTML
  • Create a Playlist in WordPress

• Links & Navigation

  • Create Internal Links
  • Open Links in a New Tab
  • Create a Navigation Bar
  • Create a Sticky Navbar
  • Create a Dropdown Menu
  • Create Breadcrumbs Navigation
  • Create a Sidebar Menu
  • Create Pagination Links
  • Link JavaScript to HTML

• Forms

  • Create a Form
  • Add Inputs, Checkboxes & Radios
  • Create a Contact Form
  • Validate Form Inputs
  • Create a Dropdown Select Menu
  • Create a Login Form
  • Create a Signup Form
  • Use Placeholder Text
  • Upload Files Using HTML Forms
  • Group Form Elements with Fieldset

• Tables & Data Display

  • Create a Table
  • Add Table Headers and Captions
  • Merge Table Rows and Columns
  • Style Tables with CSS
  • Create Responsive Tables
  • Create Striped Tables
  • Sort Table Data

• Responsive Design

  • Make a Website Mobile-Friendly
  • Add a Viewport Meta Tag
  • Create Responsive Layouts with Flexbox
  • Create Responsive Layouts with Grid
  • Hide/Show Elements on Different Screen Sizes
  • Create a Responsive Navbar
  • Create a Hamburger Menu (Checkbox Hack)
  • Create a Hamburger Menu (JavaScript)

• Layout & Components

  • Create a Card Layout
  • Create a Hero Section
  • Build a Footer
  • Create a Pricing Table
  • Create a Grid Layout
  • Create a Two-Column Layout
  • Align Items Vertically
  • Create a Sticky Footer
  • Build a Landing Page Layout

• SEO & Accessibility

  • Add Meta Tags for SEO
  • Improve Accessibility in HTML
  • Use Alt Text Properly
  • Use ARIA Attributes
  • Structure HTML for Screen Readers
  • Improve Page Loading Speed
  • Create SEO-Friendly Headings
  • Add Structured Data

• Advanced / Practical Projects

  • Build a Portfolio Website
  • Build a Blog Layout
  • Create a Landing Page That Converts
  • Build a Product Page
  • Create a Coming Soon Page
  • Create a 404 Error Page
  • Build a Dashboard Layout
  • Create a Dark Mode Toggle

HTML Codes & Templates

Also check out our massive collection of HTML codes and these HTML templates.