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
That's our philosophy on teaching and the approach we use in our tutorials. You'll See the HTML Code, Preview it in a browser, add the CSS to define its appearance and Preview again in a browser. You'll actually See firsthand what the CSS does. It's all Copy and Paste
We offer a Beginner Tutorial where you'll create a very simple web page add a picture and then use it as a template to create more pages and link them together.
The more advanced 9 Step Tutorial will build on what you learned and show you how to build a Drop Down Menu. It will also introduce you to the W3C Validator for checking your code and the Web Developer's Emulator Tool where you can simulate testing your pages in various different size devices.
We'll also introduce you to the cornerstone of Responsive Design, the Media Query. We'll show you how to use Web Developer tools to estimate break points and how to use those Media Queries at those break points.
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 web page will be Mobile Ready with Responsive Web Design features.
Start the Beginner Tutorial or the 9 Step Tutor NOW!
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 5 Page Responsive Web Design Kit
Once through the tutor, grab our free 5 page Responsive Web Design Template Kit #318 and experience a mini tutorial on making images responsive and creating responsive columns.
It comes ready to perform on a full size desk top or cellphone. Download it and run it through the Web Developers Emulator tool.
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?
The Road to Responsive Web Design
Our newest template kit #318 isn't just a template. It's a mini tutorial on making images responsive, creating multiple responsive columns and using Media Queries.
It also includes a drop down menu from our navbar collection and the new Toggle Menu that kicks in for smaller devices.
The kit includes 5 web pages with various column designs, 2 style sheets and the lmenu.html page.
Template #318 desk top view.
Template #318 tablet view.
Template #318 cellphone view.
Test Drive Template #318
Download Template Kit #318
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)
- 1...HTML Page Structure - Create Style Sheet(CSS) <---Start Here!!
- 2...Styling the header, footer and division tag with CSS
- 3...Add an H1 tag and style it using CSS
- 4...Add Nav Element and Use List to build a menu
- 5...Add content using paragraph tag
- 5a..Use Web Tools and Media Queries
- 5b..Add lmenu System for Small Devices
- 6...Add an image
- 7...Build a drop down menu and make it Mobile Ready with Media Queries
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.
What's New?
We just added a new NAVBAR collection. They include horizontal and vertical designs. Demos are provided for each and if you can use them you can download them in zip kits. I just rebuilt our navigation device on this website using the vertical float right display left design. Go to Navbars
Fairly 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.
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