Let the CSS Zen Gardens wow you with variety and elegance. Making a pretty website isn’t so complicated after all!
“I fear not the man who has practiced 10,000 kicks once, but I fear the man who has practiced one kick 10,000 times.”
— Bruce Lee
Visiting the CSS Zen Gardens is the perfect antidote to programming anxiety. CSS Zen Gardens is a website that invites you to sit back, relax, and stroll through peaceful avenues of beautiful websites. More importantly, the website showcases the power and versatility of a single language: Cascading Style Sheets (CSS).
1. Navigate to http://csszengarden.com
2. Click the ‘View All Designs’ button in the top left-hand corner
3. Scroll around and click on designs that interest you
4. Don’t miss:
WHAT’S THE BIG DEAL?
The first website appeared in 1989. It was an ugly thing; green text on a black background, no pictures or pretty fonts or gradient backgrounds. It took another 6 years before you could even separate website text into two columns!
CSS, born in 1998, solved this problem by allowing developers to separate content (written in HTML) from style (written in CSS). Making big changes to a website could now be done by changing a single file: the stylesheet.
And that’s exactly what CSS Zen Gardens showcases. Every one of their designs is written with the exact same HTML. Only one line — the link the stylesheet — is different from design to design. And more importantly, none of their designs require AngularJS, jQuery, or Bootstrap; just pure, simple CSS.
TAKE A PEEK BEHIND THE SCENES
1. Navigate to your favourite CSS Zen Garden website (ex: http://www.csszengarden.com/215/)
2. Right click (or ‘CTRL + click’) anywhere on the web page. A small grey box should appear:
3. Select ‘View Page Source’. This shows the raw HTML of the webpage.
4. Press ‘CTRL + F’ to bring up the search bar. Type ‘stylesheet’ and hit ‘Enter’. Pay attention to the ‘href’ tag next to the highlighted text. To access the raw CSS file, you can click on the link in blue.
5. Navigate to your second favourite CSS Zen Garden website. Repeat steps 2-4
6. Compare the raw HTML of both pages. What’s different? What’s the same? Now compare the raw CSS pages
7. Navigate to www.google.com. Repeat steps 2-4. How does this web page compare to the two previous ones?
CSS / HTML Introduction
History of Web Design
Visit a Reproduction of the First Website
Web Browser History
Also In The December 2017 Issue
Building and creating your tools with the Minecraft toolbox helps you survive the game.
Sensors give robots the senses humans have.
30+ ideas for all age holiday gifts, from books to apps to board games to VR and more.
There might be a reason that too-real robot and video game character creeps you out.
You computer mouse cursor finally gets a cat to chase it.
Create turtles with Python, the programming language.
This programming language uses colors instead of text and punctuation to add and perform other tasks.
Use micro:bit to water your plants!
Knowing how passwords are cracked can help you create better passwords.
Studying satellite photographs shows a lot about what happens in the world.
There are a number of strategies teachers (plus parents and students) can take to learn programming.
Pigpen ciphers uses alien-like symbols to hide secret messages.
This project uses conductive thread to create a glove to activates your phone.
The repl.it website and React are one way to create mobile apps.
Software programming does neat things with language, in this case, mixing capital letters.
This Scratch game has lots of ways you can customize the game play. No cats were harmed in the making of this article either.
Links from the bottom of all the October 2017 articles, collected in one place for you to print, share, or bookmark.
Interesting stories about computer science, software programming, and technology for October 2017.