Course List >> HTML5 and CSS3 >> CSS3 >> Project: Building with Backgrounds and Gradients
Scroll up or hover over the breadcrumbs to view the navigation bar

Project: Backgrounds and Gradients (with Apple)

In this project you'll clone the website of one of the most design-forward companies in the world. It's not a very complex site but it uses background photos well and the navbar at the top contains a gradient that you should be able to mimic.

Steps to Victory

  1. Go to this old version of apple.com and have a look around.
  2. Follow the instructions atop the Google Homepage project to set up a Github repository for this project (of course you'll need to change the title).
  3. Create a new HTML document.
  4. Think about all the elements on the page and how they are grouped together.
  5. Lay out the basic structure of the page using empty <div> elements that are appropriately sized and positioned. You may want to make their background colors different so you can see them. Don't forget to use your browser's developer tools (right click on the page, click "inspect element")!
  6. Set up the top navigation bar. How is that gradient achieved?
  7. Set up the main background image. You can grab that exact image from their webpage by finding the <section id="hero"> tag in your inspector and checking out its background image.
  8. Fill in and position the additional sections. Don't worry about enclosing every paragraph of text in <p> tags.
  9. Push your solution to Github.

Student Solutions

Send us your solution so we can show others! Submit a link to the Github repo with your files in it by using any of the methods listed on the contributing page. See the Google Homepage project for examples

Additional Resources

This section contains helpful links to other content. It isn't required, so consider it supplemental for if you need to dive deeper into something

  • Add some!

From the creators of The Odin Project...

The Viking Code School
Viking ad 180x150