Web Design/CSS challenges

These challenges are here to help you flex your CSS skills, and see where you need to practice more! Copy the text of the challenge to an HTML file on your own computer and add CSS in a  block to get the desired appearance.

If you can't remember what CSS properties are available, refer to the MDN CSS Reference.

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!

Hints:
 * You'll need to link your HTML to a new stylesheet.
 * You can use the following fonts list for help: http://www.w3.org/Style/Examples/007/fonts
 * Don't worry if your text doesn't wrap at the same word -- it will depend on the size of your browser window.

Challenge 2: Shakespeare's Sonnet


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!

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.

If you can improve on the design (shouldn't be too hard!) without increasing the difficulty of this challenge, great! I'll happily replace the image!

Hints:
 * The thumbnails are not very representative, but this challenge requires you to create a fixed-width layout that is centred in the browser window. Click on an image for a closer view.
 * To get the wrap division to stay centred, you'll need to set the left and right margins to a_t_ (you've got to fill in the blanks).

Challenge 3: 2-column layout


This one will get you fiddling with margins and padding!

Hints:
 * You'll need to set a fixed width for your wrap, and then float the navigation.
 * You may also want to fiddle with widths/margins of the navigation and content divisions!
 * For this and the next few challenges, you may want to first look through MaxDesign's Two columns with colour tutorial.

Challenge 4: 2 Columns with a header and footer


This time you've got an extra header and horizontal navigation to worry about!

Hints:
 * For some ideas for styling the horizontal nav bar, see listamatic.
 * You'll need to fiddle with paddings/margins to get the divs bumped up against each other.
 * If you get stuck, try following 456BereaStreet's 2-column layout tutorial.

Challenge 5: Gimme some whitespace


This one's inspired by the design of clearleft. A nice clean look with lots of whitespace. Have fun!

Hints:
 * You'll 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 through WebAIM's Invisible Content page).

Challenge 6: The Headline Challenge
This time you'll be working with a chunk of HTML similar to a blog post, but now you're in charge of the design. Create a colour scheme and layout that has a look and feel related to one of the following words:


 * Passion
 * Love
 * Funky
 * Creative
 * Elegant
 * Industrial
 * Gothic

Try using a background image that fits the aesthetic of your design, but remember to keep your text readable!

If you've started experimenting with CSS Web Fonts, this is a perfect place to use them. Font Squirrel and Google Web Fonts are excellent resources for finding decorative heading and body text fonts that are free to use.

For some inspiration, checkout the collection of Typography for Headlines

Hints:
 * You'll need to link your HTML to a new stylesheet.
 * Add some more content paragraphs if you like.
 * Try to use the HTML structure as-is, but add some extra &lt;div&gt;s if you really need to.

Challenge 7: Cutting the code
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 from Open Source Web Design (or otherwise) that:
 * 1) you like!
 * 2) is a little beyond your current skills
 * 3) is not too far beyond your current skills (so you don't get overwhelmed!)

Without looking at the HTML/CSS of the chosen design, you'll then work together or on your own to code the HTML and CSS for the layout using the steps below.

This challenge is designed so that you can do it multiple times at different levels of difficulty if you find it helpful!

Steps:

 * Choose and print off a design from Open 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!
 * Use your printout to decide on your HTML structure (what divs you'll use etc.)
 * Create your HTML code with a DOCTYPE, head, title, body and your divs that you've decided on and link it to a stylesheet.
 * At this point, you might want to use a strategy such as Russ Weakley's coloured boxes to give your divs some colour so you can see where they are!
 * Add some content such as headings, navigation etc. If you need paragraphs of text, you might want to try the Lorum Ipsum generator
 * 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.

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 you're really really stuck and there's no one to talk with!

When you're 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 pro's and con's of your code versus the original.

Challenge 8: A CSS Zen Garden entry
The CSS Zen Garden site is a collection of unique designs that all use exactly the same HTML, with only the CSS changing between them. It's intended to show how powerful CSS can be in changing the site's style and appeal.

Your challenge is to create a simple CSS Zen Garden design. You'll 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 you're so inclined, you're welcome to contact the Zen Garden owners to get your design listed!

Challenge 9: CSSBattle targets
CSSBattle is an online code-golfing game where players have to visually replicate given targets using HTML/CSS. It's not only limited to code golfing but can also be used by developers starting to learn CSS to practice CSS properties.

There are plenty of targets there to practice your CSS skills there.