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 specific stylesheet needs to include are the overrides that change the default settings. That makes it easy to read and edit. For example, I have that inserts icons to tell visitors which links take them offsite and what ones keep them onsite while opening a new window. Here if is.
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.
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.
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. 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.
<!-- / w3-container -->