CreateaFreeWebsite
with HTML and CSS
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
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: 1rem
}
You will copy it and paste it into a style sheet you created.
In our 9 Step Tutorial you'll create a very simple single column web page, add an image and a Back to Top button. Then you'll create a second page and link to it.
It will also show you how to use the Clamp Function and eliminate needless media queries. It will 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.
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 responsive 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 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.
Once through this tutor, learn how to create multiple columns on your web pages by visiting our Easy Flexbox tutor.
One of the fastest growing trends in web design is called Dark Mode
Our latest template kit offers a site that can be toggled between Dark and Light modes.
Includes some easy flexbox, mini tutorials on using the Clamp Function, optimizing images and creating columns with flexbox. Also a Top Button, Back Button and a Modal Menu for smaller device viewing.
The kit includes 4 web pages with various column designs, 3 style sheets , js script for dark mode and the lmenu.html page.
Test Drive Template Kit #508
Download Template Kit #508
7 easy copy and paste lessons. You'll also learn how to use the clamp function and the art of nesting in style sheets for more manageable CSS.
Note: Nesting in style sheets is new and a lot of HTML editors don't support it yet. One that does: Geany (cross platform).
Flexbox is a powerful tool that makes building web pages with multiple columns a breeze. No more stressing about margins, padding and column alignment.
Then you will learn to look at the HTML document with a browser and see how HTML and CSS work together.
They're copy and paste. Flexbox can be as confusing as you want to make it. Start simple with these working examples.
We're in the process of converting all our Free Templates to Flexbox. The single page single column designs are ready. They are complete with plugin navigation devices from our Navbar Collection.
Click Me to Take one for a Spin
❶Updated Button Gallery: Create buttons with HTML/CSS. Now includes the Top button, The Up Button, the Go Back button, Popups and Popovers. A couple use just a smidge of javascript. Visit the Gallery
❷Scrolling Columns: If you want an easy answer to the question: "How do you hide ugly scrollbars and still allow scrolling on a web page?", our newest template kit provides the answer in a working example.
You can Test Drive Template Kit #601 or
Download : Template Kit 601.zip
❸Just for FUN: 😁 🐕 📫 ✍ ✔ WingDings, Webdings and Such
❹A fairly 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.