Project: Building with Backgrounds and Gradients (v1)


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.


  1. Take a close look at the screenshot below which is taken from an old version of the Apple website:

  1. Create a new HTML document and download the media assets that you will use from here.

  2. Think about all the elements on the page and how they are grouped together.

  3. Lay out the basic structure of the page using empty semantic HTML elements that are appropriately sized and positioned.

  4. Set up the top navigation bar. How is that gradient achieved?

  5. Set up the main background image.

  6. Fill in and position the additional sections. Don’t worry about enclosing every paragraph of text in <p> tags.

  7. Push your solution to a private Github repo and submit the URL to the Quiz below.

Additional Resources

  • Suggest some in the comments below!

When looking for help, try doing so in the following order:

  • Did you try everything you could?
  • Did you read the documentation?
  • Did you Google for it?
  • Did you post your question on Slack/Forum?
  • Did you ask your fellow students for help?
  • Did you ask your Mentors for help?
  • Did you leave a comment on the comments section of this page?
  • Did you ask your Instructor for help?
    • Did you arrange and appointment with your instructor using Calendly? Visit this URL and set up an appointment:
    • Is it urgent? Did you try reaching him on Slack

UPDATED: 30.10.2020