CreateaFreeWebsite  with Responsive Web Design

Create a Website with Responsive Web Design

The future of web design is in Responsive Web Design

That simply means building one website that can be accessed with any device: desktop, laptop, tablet, cell phone and anything in between.

Seeing + Doing = Learning

How to best use this website: Start with the first tag on a web page, the Doctype tag. Just SKIM the pages (Start the Seeing process) and use the Next button on the bottom of the page to proceed to the next logical tag or element.

You'll cycle through 7 BASIC elements used to build a W3C compliant document We'll even introduce you to the W3C code validator and show you how to use it. The last web page in the series will send you to the Our Beginner tutorial How to Create a Website with HTML5 which will prepare beginners for the 9 Step tutorial where you'll build a page similar to the index.html page in the #402 Template Kit.

 

sample webpage from #402 Template Kit

Whether you plan to Build a Website Yourself, are thinking about a career in Web Development or just want a better understanding of the process, you can get started right by spending a few minutes with us.

You'll see how web pages are built by first SEEING and then DOING just that.

Your finished page will be Mobile Ready with Responsive Web Design features.

You'll actually be building a web page similar to the first page of the #402 Template Kit offered here. Along the way you'll be introduced to the Magic of CSS.

You can begin The Overview ,the Beginner Tutorial or the 9 Step Tutor

Note: The information presented here is entry level for beginners. Get grounded in the BASICS early and it will be easier when you realize the magnitude of what CSS has brought to the web development industry.

Free 6 Page Responsive Web Design Kit

Once through the tutor, grab our free 6 page Responsive Web Design Template Kit #402 and start building your website.

It comes ready to perform on a full size desk top or your Android cell. Download #402 Template Kit

When you're ready to go online grab the same web hosting we use, get a free domain name and host it for as little as $3.99 a month.

Create a Free Website?

If you've visited the SERPS for that search phrase you realize what a joke it is. Yes, they are all FREE until you are ready to PUBLISH or put the pages online.

How are we different? We actually teach you to code your own web pages right on your desk top, lap top or tablet. Then you have the option of publishing with us or whoever else you choose.

SO, who's really FREE?

6 page kit

Test Drive Template Kit #402 Here
or Download 402.zip 6 Page Kit
Scored 100 on PageSpeed Insights.

What Responsive Web Design Does

Web pages built using Responsive Web Design techniques will adjust to each different device width or resolution that visits. Below you see screenshots of the 402 template when viewed on 3 different devices.

Template #402 when viewed on a 1920 desk top with max-width set to 1440 pixels.

402 on desktop

Template #402 when viewed on an Ipad Mini at 768 pixel width.

402 on ipad mini

Template #402 when viewed on a Samsung Galaxy cell phone at 360 pixels.

402 on Samsung Galaxy

 

Just to let you know, we rebuilt this entire website using the #402 template kit.

Our Tutorial Process

Beginners will start with a simple approach to learning: Seeing + Doing = Learning

You will SEE HTML5 code:

<html>
<body>
<p>Paragraph code</p>
</body>
</html>

You will copy it and paste it into a web page you created.

You will SEE CSS code:

p {
  font-family: arial, tahoma, serif;
  font-size: 16px
}

You will copy it and paste it into a style sheet you created.

 

Then you will learn to look at the HTML document with a browser and see how HTML and CSS work together.

 

9 Step Tutorial (Using a Text Editor - Copy and Paste)

Beginners are encouraged to work through the 9 Step tutorial several times. You'll be surprised at how much of the information sinks in about the third time through just by copying and pasting.

Our Newest Tutorials

We just added 2 brand new Tutorials. Check out How to Use the W3C Validator and How to Find and Use the WebDev Emulator Tool. If you're serious about learning to build websites you should check out both of them.

 

Put It On the Web

Using Our Web Hosting! starter hosting

Why We Recommend cafwhosting

 

1..Because we've used it and sold it for over 25 years
2..We don't oversell our servers
3..We guarantee 30 minute or less tech response
4..We guarantee 99.9% uptime
Check Our Hosting First

Our prices start at $3.99 a month. That's not an introductory price. You can buy their's for $2.99 and when it renews pay 3 or 4 times that. Read their fine print. Our price of $3.99 renews at $3.99.

How much business are you losing?

How much business are you missing every month trying to run it on the mess that Facebook has become?

You do have the option of buying your position on Google. Seems like these days that's what most companies are doing. First 3 pages of SERPS are all ads. We don't use Google anymore for serious searches.

Create your own Mobile Ready web presence for $3.99, add SSL and associated certificates for $19 a year and we add Cloudflare and ModSecurity for free.

 

Other Stuff You'll find on CaFW

You can increase your knowledge using the other HTML5/CSS tutorials on this website, including:

HTML:

header element
h1 to h6 elements
nav element
footer element
division tag
anchor tag
lists
paragraph tag
responsive images
responsive tables
forms
CSS:

color
background
border
text-shadow
box-shadow
float
width
lists
border-radius
max-width
many more
Advanced Helps:

Uploading your site
Setting up a localhost
Testing forms on a PC
Responsive Web Design
Checking code in W3C validator
Using Dev. Tools to test pages

 

This site will teach beginners the fundamentals you need to create a responsive website with HTML5.

We Focus On

Using as little HTML code as possible. Learning a lot of CSS

 

 

Free Tools and Resources We Recommend

Need more advanced info? Check out our WebDev Information page for some really great tutorials and resources for HTML5, CSS3, Responsive Design and SEO.

 

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 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 NIGHTMARE!!! EXPERIENCE of Linux, we recommend the BlueFish HTML editor. You'll find it in your software repository. It does have its Quirks, but it's FREE.
For image resizing we've found the easiest Linux tool to be Krita.

Planning Your Website

Before you begin the actual construction of your website, you should visit our Website Design Tutorial .

 

Top