Your challenge is to create a simple CSS Zen Garden design. Youll find a link to the HTML and a simple starter CSS under the Participation heading on the front page. Download these files and work on your local computer to build something beautiful! If youre so inclined, youre welcome to contact the Zen Garden owners to get your design listed!
Choose and print off a design fromOpen Designs(or a website of your choice). Make sure you choose a design that is within your grasp – a little beyond your current skills, but not too far beyond so as to overwhelm you!
CSS Challenge 8 A CSS Zen Garden entry
This challenge is designed so that you can do it multiple times at different levels of difficulty if you find it helpful!
You can also try to get your page to look like the page from the image on the right (challenge 2-A), which uses a few more advanced (though not too hard) CSS techniques.
Youll need to hide the h1 somehow! (for some good tips on the best and most appropriate way to do this, you might like to read throughWebAIMs Invisible Content page).
If youve started experimenting withCSS Web Fonts, this is a perfect place to use them.Font SquirrelandGoogle Web Fontsare excellent resources for finding decorative heading and body text fonts that are free to use.
CSS Challenge 3 2-column layout
CSS Challenge 2 Shakespeares Sonnet
Challenges:Web design,HTML,AJAX,,JavaScript,PHP,XML,Information Architecture,Algorithms
Try using a background image that fits the aesthetic of your design, but remember to keep your text readable!
If you can improve on the design (shouldnt be too hard!) without increasing the difficulty of this challenge, great! Ill happily replace the image!
This time youll be working with a chunk of HTML similar to a blog post, but now youre in charge of the design. Create a colour scheme and layout that has a look and feel related to one of the following words:
CSS Challenge 7 Cutting the code
A small website design calledRed Tiefrom OpenSource Web Design
!DOCTYPE HTML PUBLIC -//W3C//DTD HTML 4.01//EN html head titleCSS Challenge 2/title /head body div id=wrap h1Shakespeares Sonnet 18/h1 p This is one of the most famous of the sonnets. It is referenced in the film Dead Poets Society and gave names to the band The Darling Buds and the book and television series The Darling Buds of May. Read it and weep! /p ul liShall I compare thee to a summers day?/li liThou art more lovely and more temperate:/li liRough winds do shake the darling buds of May,/li liAnd summers lease hath all too short a date:/li liSometime too hot the eye of heaven shines,/li liAnd often is his gold complexion dimmd,/li liAnd every fair from fair sometime declines,/li liBy chance, or natures changing course untrimmd:/li liBut thy eternal summer shall not fade,/li liNor lose possession of that fair thou owst,/li liNor shall death brag thou wanderst in his shade,/li liWhen in eternal lines to time thou growst,/li liSo long as men can breathe, or eyes can see,/li liSo long lives this, and this gives life to thee./li /ul p class=copyrightSee the a href= Shakespeares sonnets/a Wikipedia article for more information /p /div /body /html
This challenge is designed to help you build your process for producing a CSS-based layout from scratch. The idea is to choose a design fromOpen Source Web Design(or otherwise) that:
CSS Challenge 7 Cutting the code
If you get stuck, chat with the people around you to get ideas rather than looking at a solution. Only look at the solution if youre really really stuck and theres no one to talk with!
CSS Challenge 5 Gimme some whitespace
Youll need to link your HTML to a new stylesheet.
TheCSS Zen Garden siteis a collection of unique designs that all use exactly the same HTML, with only the CSS changing between them. Its intended to show how powerful CSS can be in changing the sites style and appeal.
Testing:Testing Website performance,Website Performance Test Plan
This one will get you fiddling with margins and padding!
This ones inspired by the design ofclearleft. A nice clean look with lots of whitespace. Have fun!
Professional development:Contribute to personal skill development and learning,Useful Applications,Useful Books,Emerging Technologies,Using the Internet as a Learning Tool
CSS Challenge 2 Shakespeares Sonnet
Design:Accessibility,Design Principles for Web Design,Design Suggestions
Youll need to fiddle with paddings/margins to get the divs bumped up against each other.
Activities:Web design group learning activities,Pen and Paper HTML activities,A Web Design Quiz show,Ordering Tasks for a Web Project,Paired Bio Pages,Scoping a Small Project,Emerging Technologies Research Activities
CSS Challenge 6 The Headline Challenge
These challenges are here to help you flex your CSS skills, and see where you need to practise more!
Project management:An introduction to Project Management,Developing a Client Project
!DOCTYPE HTML PUBLIC -//W3C//DTD HTML 4.01//EN html lang=en head titleCSS Challenge 4/title /head body div id=wrap div id=header /h1 /div div id=nav ul lia href=Home/a/li lia href=Writings/a/li lia href=Sonnets/a/li lia href=Life Story/a/li lia href=About Shakespear.net/a/li /ul /div div id=sidebar h2Sonnet Index/h2 ul lia href=Sonnet 1/a/li lia href=Sonnet 6/a/li lia href=Sonnet 11/a/li lia href=Sonnet 15/a/li lia href=Sonnet 18/a/li /ul /div div id=content h1Shakespeares Sonnet 18/h1 pThis is one of the most famous of the sonnets. It is referenced in the film Dead Poets Society and gave names to the band The Darling Buds and the book and television series The Darling Buds of May. Read it and weep!/p ul liShall I compare thee to a summers day?/li liThou art more lovely and more temperate:/li liRough winds do shake the darling buds of May,/li liAnd summers lease hath all too short a date:/li liSometime too hot the eye of heaven shines,/li liAnd often is his gold complexion dimmd,/li liAnd every fair from fair sometime declines,/li liBy chance, or natures changing course untrimmd:/li liBut thy eternal summer shall not fade,/li liNor lose possession of that fair thou owst,/li liNor shall death brag thou wanderst in his shade,/li liWhen in eternal lines to time thou growst,/li liSo long as men can breathe, or eyes can see,/li liSo long lives this, and this gives life to thee./li /ul /div div id=footer p class=copyrightSee the a href= Shakespeares sonnets/a Wikipedia article for more information /p /div /div /body /html
HTML:What is HTML,Advanced HTML Tutorial,HTML Challenges,Lists and Tables,The Structure of HTML,Pen and Paper HTML activities
Without looking at the HTML/CSS of the chosen design, youll then work together or on your own to code the HTML and CSS for the layout using the steps below.
Get started styling your page! As you work, you might choose to just focus on the layout and not worry about the images. On the other hand, you might also choose to use the images for your chosen design and add them to your stylesheet.
Text is available under theCreative Commons Attribution-ShareAlike License; additional terms may apply. By using this site, you agree to theTerms of UseandPrivacy Policy.
For some inspiration, checkout the collection ofTypography for Headlines
Publishing:Getting Your Site On the Web
The thumbnails are not very representative, but this challenge requires you to create a
Certification and standards:Cert IV Website Qualifications in Australia,Australian Qualifications,Web design qualifications
For some ideas for styling the horizontal nav bar, seelistamatic.
!DOCTYPE HTML PUBLIC -//W3C//DTD HTML 4.01//EN html lang=en head titleHeadline Challenge/title /head body div id=wrap div class=thepost h1 class=posttitleCSS Layout/h1 h2 class=dateheaderMonday, May 29, 2006/h2 p Wonder when CSS layout techniques will be less of an art and more of a science. /p p class=postfooter emPosted by Robin./em /p /div /div /body /html
CSS Challenge 1 Fonts and Colours
Add some more content paragraphs if you like.
Dont worry if your text doesnt wrap at the same word — it will depend on the size of your browser window.
Try to use the HTML structure as-is, but add some extra divs if you really need to.
For this and the next few challenges, you may want to first look through MaxDesignsTwo columns with colourtutorial.
This page was last edited on 22 December 2017, at 18:44.
CSS Challenge 1 Fonts and Colours
This first challenge only involves changing your fonts and colours – no layout or other more advanced CSS here! Copy-n-paste the HTML to get started, and click on the image to see what your page should look like!
You can use the following fonts list for help:
CSS Challenge 6 The Headline Challenge
JavaScript:An Introduction to Programming with JavaScript,JavaScript Challenges,Getting to know JavaScript events,Getting to know the Document Object Model with JavaScript,JavaScript pen-n-paper activities,Web Programming Intro,Produce basic client side script for dynamic web pages
PHP:Simple functions in PHP,Dynamic websites,PHP challenges,Dynamic websites with PHP,Generating a receipt with PHP,Responding to HTML forms with PHP,
Course meta-information:Web Design,About the web design learning project,New Structure,Sample Timetable
Add some content such as headings, navigation etc. If you need paragraphs of text, you might want to try theLorum Ipsum generator
Projects:A small website project,A step-by-step web design project,Build a basic web page,Build a small website
Youll need to link your HTML to a new stylesheet.
CSS:Learning Basic HTML and CSS,,Embedded CSS,Basic HTML and CSS Tutorial,Inline CSS,Develop cascading style sheets,CSS3 Animations
CSS Challenge 4 2 Columns with a header and footer
This second challenge will help you to re-cap your CSS text formatting skills, as well as start using margins and padding. Copy-n-paste the HTML to get started, and click on the image to see what your page should look like!
Youll need to set a fixed width for your wrap, and then float the navigation
layout that is centred in the browser window. Click on an image for a closer view.
!DOCTYPE HTML PUBLIC -//W3C//DTD HTML 4.01//EN html head titleCSS Challenge 3/title /head body div id=wrap div id=nav h2Sonnet Index/h2 ul lia href=Sonnet 1/a/li lia href=Sonnet 6/a/li lia href=Sonnet 11/a/li lia href=Sonnet 15/a/li lia href=Sonnet 18/a/li /ul /div div id=content h1Shakespeares Sonnet 18/h1 pThis is one of the most famous of the sonnets. It is referenced in the film Dead Poets Society and gave names to the band The Darling Buds and the book and television series The Darling Buds of May. Read it and weep!/p ul liShall I compare thee to a summers day?/li liThou art more lovely and more temperate:/li liRough winds do shake the darling buds of May,/li liAnd summers lease hath all too short a date:/li liSometime too hot the eye of heaven shines,/li liAnd often is his gold complexion dimmd,/li liAnd every fair from fair sometime declines,/li liBy chance, or natures changing course untrimmd:/li liBut thy eternal summer shall not fade,/li liNor lose possession of that fair thou owst,/li liNor shall death brag thou wanderst in his shade,/li liWhen in eternal lines to time thou growst,/li liSo long as men can breathe, or eyes can see,/li liSo long lives this, and this gives life to thee./li /ul p class=copyrightSee the a href= Shakespeares sonnets/a Wikipedia article for more information /p /div /div /body /html
This time youve got an extra header and horizontal navigation to worry about!
!DOCTYPE HTML PUBLIC -//W3C//DTD HTML 4.01//EN html lang=en head titlelive and let learn/title meta http-equiv=Content-Type content=text/html; charset=utf-8 /head body div id=header blockquote pLearning is not a privilege, its a right./p /blockquote div id=logo h1live and let learn/h1 img src=csschallenge5.jpg alt=live and let learn /div /div div id=content div id=content-side dl dta href=services/Services/a/dt ddLearning and facilitation through TAFE WSI/dd dta href=learning/Personal Learning/a/dt ddLearning from the network/dd dta href=resources/Resources/a/dt ddBrowse through resources …/dd dta href=about/About/a/dt ddWhat am I about? Personal interests and other stuff/dd /dl /div !– content-side — div id=content-main h2Please update your links!/h2 smallWednesday, October 12th, 2005/small pNew blog address: a href= /p pDuring the last holidays Ive been busy moving my blog from a href= to a href= … why? Good question! Part of the Web Design course that I facilitate is a client project where participants are required to develop a site from start to finish – and id been a while since Id been through that process myself – so what better a project for the holidays (next to my gardening project to get me emaway/em from the computer)! /p pYoull notice that the site itself is still in prototype stage, but the blog is all up and running so Im going to be using liveandletlearn from now on. strongPlease update your bookmarks/feeds/strong! And please give me any feedback youve got time for at a href= /p /div !– content-main — /div !– content — /body /html
If youre new to CSS, have a read through the first page of Wise WomensGetting Started with Cascading Style Sheets, which introduces CSS along with some everyday examples.
You may also want to fiddle with widths/margins of the navigation and content divisions!
Create your HTML code with a DOCTYPE, head, title, body and your divs that youve decided on and link it to a stylesheet.
!DOCTYPE HTML PUBLIC -//W3C//DTD HTML 4.01//EN html head titleCSS Challenge 1/title /head body style=background-color:333; color:fff h1Shakespeares Sonnet 18/h1 p This is one of the most famous of the sonnets. It is referenced in the film Dead Poets Society and gave names to the band The Darling Buds and the book and television series The Darling Buds of May. Read it and weep! /p ul liShall I compare thee to a summers day?/li liThou art more lovely and more temperate:/li liRough winds do shake the darling buds of May,/li liAnd summers lease hath all too short a date:/li liSometime too hot the eye of heaven shines,/li liAnd often is his gold complexion dimmd,/li liAnd every fair from fair sometime declines,/li liBy chance, or natures changing course untrimmd:/li liBut thy eternal summer shall not fade,/li liNor lose possession of that fair thou owst,/li liNor shall death brag thou wanderst in his shade,/li liWhen in eternal lines to time thou growst,/li liSo long as men can breathe, or eyes can see,/li liSo long lives this, and this gives life to thee./li /ul p class=copyrightSee the a href= Shakespeares sonnets/a Wikipedia article for more information /p /body /html
CSS Challenge 3 2-column layout
Hint 2: to get the wrap division to stay centred, youll need to set the left and right margins to a_t_ (youve got to fill in the blanks).
CSS Challenge 5 Gimme some whitespace
At this point, you might want to use a strategy such asRuss Weakleys coloured boxesto give your divs some colour so you can see where they are!
CSS Challenge 4 2 Columns with a header and footer
If you get stuck, try following456BereaStreets 2-column layout tutorial
Use your printout to decide on your HTML structure (what divs youll use etc.)
When youre happy with your design (and only then!), print out your HTML and CSS as well as the HTML and CSS that was used by the original author of your chosen design. Looking at the differences, work out the pros and cons of your code versus the original.