Create a Free Website with HTML and CSS

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.

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 HTML/CSS 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.

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 Template Kit

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

Easy Flexbox tutorial is finally HERE.

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 is a powerful tool that makes building web pages with multiple columns a breeze. No more stressing about margins, padding and column alignment.

Working Examples

They're copy and paste. Flexbox can be as confusing as you want to make it. Start simple with these working examples.

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.

Click Me to Take one for a Spin

What's New?

❶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

❸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.

Top

Create a Web Page w/ HTML and CSS

Helpful Free Things