CSS site style testing

Use the links below to re-style this entire web site to see how you can change the looks of a website with CSS while leaving the content in tact.


Purple Style
gzuslivz
Rolling Navigation Menu
Ugly with Motion

The Perfect Website

The goal

The goal of this page/site is to have the perfect web site. Realizing that there is no perfect design, I hope to achieve a site that:

Web Design and Devices

Original web design was written for desktop and laptop computers. Smartphones weren't a thing and desktop computers were far more common than laptops. So web pages were styled using HTML (no CSS) and were designed to "look good" on a desktop machine. If you've ever seen early web pages (from the early 90's), you probably wouldn't say that they look good, though.

As smartphones came around and browsers on smartphones become more common, tech folks came to the realization that web sites at the time looked terrible on a smartphone. The text was teeny tiny and or extended off the screen. The solution was adding a mobile friendly site which was a dumbed down version of the "real" site. This could be seen as adaptive design. CSS became a thing and styling moved from HTML to CSS; HTML became used primarily for content (not styling). Web pages could be designed on multiple sizes. With adaptive design, if you adjust the browser, the content does NOT re-size/adjust.

It's hard to maintain one site though, and people definitely couldn't manage 2. That's when responsive design became a thing. Unlike adaptive design, if you adjust the browser, the content DOES re-size/adjust. A site gets designed once and can be used for all devices. This, in my opinion, is the only way to go.

This site will provide examples general HTML and CSS as examples that can be used in web design. For example, this is a paragraph.

This is an expandable details and summary section that is closed by default (which is what most of these are setup as)Details go in here.

This is an expandable details and summary section that is open by default.These are the details. You can still collapse this section.

I may add other popular HTML tags along with their CSS counterpart to this site in the future. You can right-click and View Source or View Page Source to see how something was put together. You can also right-click and Inspect to temporarily manipulate HTML content or CSS styling. Web developers tend to gravitate toward the Inspect option on large projects to find things that they want to change.

Web Accessibility Awareness (watch this video)

Accessibility