• Home
• Introduction
• Free Templates
  • Home
  • Single Page Single Column
  • Single Page Multi Column
  • Multiple Page Templates
• Web Design
  • Home
  • Researching
    • Research Trends
    • Research Keywords
    • Read the Experts
  • Planning
    • Planning Appearance
    • Planning Content
  • Color
    • Choosing Colors
    • Complementary
    • Neighboring
    • Pastels
    • Color Tool
    • Using color Tool
    • Common Errors
  • Build a Template
    • Keep it Simple
    • Build Your Template
    • Template Diagram
    • Sample Layouts
• PHPMySQL
  • Introduction
  • Connect to Server
  • Create Database
  • Create a Table
  • Adding Records
  • Display Records
  • Editing Records
  • Delete Records
  • Altering Tables
  • Export Table
• 9 Step Tutor
  • #1 Basic Web Page
  • #2 Basic Structure
  • #3 Page Header
  • #4 Navigation
  • #5 Add Paragraphs
  • #6 Add Images
  • #7 Add a Top Button
  • #8 Add a Page and Link To It
  • Using Web Dev Tools
• Flexbox Tutor
  • #1 Get Started
  • #2 Define Structure
  • #3 Add Header
  • #4 Add Nav Element
  • #5 Columns & Content
  • #6 Add Footer
  • #7 Add Media Query
  • Clamp Function
• Structure
  • Basic HTML Page
  • Doctype
  • The Body Tag
  • Head Section
    • Meta Tags
    • Required Elements
  • Box Elements
    • Header Element
    • Nav Element
    • The Main Element
    • The Division Tag
    • Footer Element
    • Article Element
    • Section Element
    • HGroup Element
    • Aside Element
  • Text Elements
    • Heading Tag
    • Paragraph Tag
    • Paragraphs-Images
    • Using Lists
    • Pre Tag
    • Line Break Tag
    • HR Tag
• Navigation
  • Nav Element
  • The ID Attribute
  • Anchor Tag
  • Intra-document Links
  • Anchor Tag - Image
  • Multi Tier Menus
  • Vertical Navbar Kits
• CSS
  • Responsive Design
  • Media Queries
  • Style Sheets
    • Style Sheets
    • Linked
    • Embedded
    • Inline
  • Properties-Attributes
    • Fonts
    • Class Attribute
    • Float Property
    • Text Shadow
    • Box Shadow
    • Round Corners
    • Borders
    • Create CSS Buttons
    • ID Attribute
• Forms
  • Form Basics
  • Check Boxes
  • Text Boxes
  • Selection Boxes
• Miscellaneous
  • Browser Previewing
  • Tables
    • Tables Overview
    • Colspan
    • Rowspan
    • With Color Cells
    • With Backgrounds
    • Responsive Table
  • Color
    • Color Overview
    • Color Chart
    • Scheme Generator
  • Images or Pictures
    • Responsive Images
    • Images with Text
    • Images as Links
  • Using Templates
  • Tools and Software
    • Free FTP Client
    • W3C Validator
    • Emulator Tool
    • Browsers Offline
  • Code Editors
    • Using a Text Editor
    • HTML Editor Cons
    • Geany
    • Alleycode
    • Coffee Cup
    • NoteTab Light
    • HTML Kit 292

Free Responsive Web Design Templates

Single Page Single Column Designs

Our new series of templates are different than most free templates you'll find on the internet. They are not only teaching tools, but they are working examples of Columns with Flexbox, a Pop Up Modal Menu and a Dark Mode Toggle option.

Each template includes one of the 3 tier drop down menu systems from our free navbar collection.

They all use The Clamp Function to change font size, margins and padding for adjustments to smaller viewing devices.

We cater to beginners by using simplified HTML5 compliant code and we've tried not to be too overly zealous in the use of CSS.

Download a zip and run it through the Web Developers Emulator Tool. If you don't know what that is we provide a simple tutorial for finding it on your browser.

There is a link on each preview page for downloading the zip or you can use your back button to return and try another.

Use them as a learning tool or use them to start building your website. The Road to Responsive Web Design is at your beckon call. Best of Luck To All!!

Flexbox Dark Mode Conversions Are Here

We've begun the process off converting our Templates to Flexbox Dark Mode Toggle . Converted templates are designated in the Preview link.