This hero area is not looking very heroic! Styles sure are important!
This area should be catchy and often features a 'call to action' by the designer to the web site guest.
Notice that the header area above doesn't sport any fancy navigation; it just has the framework that can be utilized later. This lets us focus on other things. We told you this was a 'bare bones' type of app!
This is the main area
Big Whoop!
It's deliberately void of content; you need to bring your own and certainly you intend to add some styles, right?!!
We've tried to provide a sampling of most of the common HTML tags on this page. Also, notice we are using 'semantic'-type markup. W3Schools has a great writeup on semantic elements that should be studied and religiously incorporated!
To visually show the different 'semantic' regions, we are using the hr tag, but modern web design encourages you to use CSS borders instead. This is particularly true when designing HTML tables.
We use many reference sites to help use design robust, engaging web pages. For example, here are some thoughts about where to place nav and header content on a web page from our old friends at Stack Overflow. We even used that site to help us here, on this app, to make some structural decisions. We love you, StackOverflow!
Why yes, we did make sure that this page's HTML validated!
