Create a WebSite
w/ HTML and CSS
Tired of wading through a ton of ads to find the free stuff you want for your website. We offer free tutorials, templates and working examples of just about everything you need.
Helpful Free Things
Without the ADS
Working examples:
Free Localhost Server
Learn how to add a free localhost server to your PC or Laptop making Interactive Websites easier to build.
Build and execute forms and PHP scripts right on your computer.
Our Tutorial Process
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
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 and preview in a browser.
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 and preview in a browser to see the change.
Build a Single Column web Page
In our HTML/CSS Tutorial you'll create a very simple single column web page shown below, add an image and a Back to Top button. Then you'll create a second page and link to it.
The tutor 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.
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 HTML/CSS Tutor NOW!
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.
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.
Create Multi Coumn Web Pages
Once through the HTML/CSS tutor, learn how to create multiple columns on your web pages by visiting our Easy Flexbox tutor. Find out MORE!!
Dark Mode Toggle Kit
One of the most popular trends in web design is called Dark Mode
Our latest template kits offer a mini 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 FadeIn 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.
Easy Flexbox Tutorial and Templates
Flexbox is a powerful tool that makes building web pages with multiple columns a breeze. No more stressing about margins, padding and column alignment.
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).
CSS for the Rainbow:
background: linear-gradient(135deg, #ff0000 0%, #ffcc00 50%, dodgerblue 100%);
Flexbox Tutor
- 1...#1 Get Started
- 2...#2 Define Structure
- 3...#3 Add Header
- 4...#4 Add Nav Element
- 5...#5 Columns & Content
- 6...#6 Add Footer
- 7...#7 Add Media Query
- 8...Clamp Function
Flexbox Templates
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.
What Else?
❶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
❷Just for FUN: 😁 🐕 📫 ✍ ✔ WingDings, Webdings and Such
❸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
❹Sundry 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.