Stepping out with W3.CSS: 1

W3.CSS is a free Web page framework from those wonderful people at W3Schools. It has a straightforward guide onsite to all the clever things it can do without complicated programming and I find it easier to handle, and not as finicky, as Bootstrap 4.

Why use a framework?

Frameworks do all the web page heavy-lifting for you. You know that the specifications work, and anything you change that does not work is your fault.

All your stylesheet needs to include are the overrides that change the default settings. That makes it easy to read and edit.

These days you will want to create sites that work on everything from cellphones to desktop monitors. A framework makes that easy.

If you simply call the framework in from the Internet rather than download the CSS, you don't even need to upload it each time, though you may want to download the file while you are developing pages in case you don't have an Internet connection. It's easy to get rid of later.

Why W3.CSS?

It's extremely simple but also powerful. Almost everything you need to do on a webpage can be achieved using W3.CSS. So it will save you heaps of time once you have mastered its formulas, which are spelled out straightforwardly and thoughtfully at w3schools.

The site offers numerous templates for whatever kind of site you may be creating. It comes with colors included. If you don't want that, use w3pro.css or link it to your pages with this code in your head section: <link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3pro.css">.

If you want an example of how the W3.CSS can help you, here's a very simple demonstration. Use your browser's Source View command to see how plain and understandable the code can be.

What does this guide offer?

I'm expecting that you will want to explore the w3schools guide on your own. Here's their crash course. What this tour offers is help with some of the more demanding challenges in creating a web page using the framework.

Tip: comment your code and use semantic HTML

For example, you can find yourself collecting piles of unreadable </div> commands unless you document them carefully. I'll show you how to do that.

First tip: use semantic HTML (header, section, article, footer).

The other thing I do is put a comment before the closing tag immediately I create the div, e.g. 