Free Responsive Web Design Templates
Single Page Single Column Designs
All of the single page single column templates on this page have been modified to Reponsive Web Design.
They have been tested at the sites listed below and score 100 across the board on Google Pagespeed Insights.
They also score well at GTmetrix.
The templates are HTML5 and CSS3 compliant.
**Test them yourself at Google Mobile Friendly and PageSpeed Insights.
Then try doing the same with the other free templates you find; or even the ones you pay for.
Note: We don't support the idea of themes as it relates to content. We use generic images.
These templates are entry level Responsive Web Design. Learn the basics before you try tackling some of the javascript laden crap that's out there.
Template #001
Template #001 - I've tried to construct these templates with as little HTML code as possible. I advise novice web developers to spend more time studying CSS and Responsive Web Design techniques. Learn to manipulate page structure and images with what we call Media Queries.
Preview Template #001
Download the Zip
Template #002
Templates #001 and #002 demonstrate an easy method of swapping pre-scaled generic images. At least 4 images of different sizes are used. Media queries are used at various break points to swap images that are a better fit for the width of the screen. Liquid techniques can also be used to scale images to fit the width of the viewing device.(See Template #023)
Some of the stylesheets are commented to show each step of the process.
If you are a novice designer and want to learn the basics of responsive web design, these are the templates you want to start with. Single column designs are a good choice for learning the basics.
Also demonstrated: How to use media queries to restructure a drop down menu for cell phone viewing. These are a bit verbose but are still easier to understand than some of the Javascript monsters offered on the web.
Preview Template #002
Download the Zip
Template #023
Template #023 offers a much simpler drop down menu for the beginner to master. It also experiments with the box shadow property.
The images came from my wife's camera and is about as close as she'll get to indulging in nature around the house.
Preview Template #023
Download the Zip
Click Next for More Templates
Free Tools and Resources We Recommend
- Free Responsive Web Design Certification freeCodeCamp
- freeCodeCamp is a proven path to your first software developer job.
- More than 40,000 people have gotten developer jobs after completing this – including at big companies like Google and Microsoft.
- Finally, you'll learn how to make webpages that respond to different screen sizes by building a Twitter card with Flexbox, and a complex blog layout with CSS Grid.
- FREE Certification Courses!!
- Free Ebook How to Code in HTML5 and CSS3
- "How to Code in HTML5 and CSS3" is a free e-book about making websites in HTML5 and CSS for absolute beginners. It doesn't require any experience in IT to start....
- Free Logo Generator Turbologo.com
- If you are building a website for business you need to begin thinking about creating a brand identity. An unforgettable logo could be just the start you need. You can create it free at Turbologo.com. They also provide generators for business cards and letterheads.
- FREE HTML Editor (Windows): NoteTab Light
- All the features of a commercial HTML editor.
- FREE Apache Server (Windows): IndigoAmpp
- Set up a real time server environment right on your PC. Test forms and scripts before uploading to your web space.
- Linux Users
- If like us, you've left the insane world of Microsoft Windows for the even worse experience of Linux, we recommend the BlueFish HTML editor. You'll find it in your software repository. It does have some QUIRKS, but it's FREE.
- For image resizing we've found the easiest Linux tool to be Krita.