Static Comp Challenge 2


The static comp challenge is a challenge to get you working that HTML/CSS muscle. :muscle: You will be asked to recreate a webpage based off of the provided static comp. Don’t worry, we’ll give you a bit of creative license, however the objective is to build something that respects the integrity of the original design. Once you get into the workforce - building out comps that reflect the designer’s choice in layout, spacing, font, imagery, and color to the smallest detail is a requirement.

Things to Note

  • We have not provided you with any assets, nor native files. You will have to source assets on your own per the creative license guidelines below.
  • We have not provided breakpoint specific comps. You will need to employ some creativity here with a heavy dose of good judgment. Think about how you, as a user, could best experience the content/layout across various screen sizes. Is the content legible? Does the imagery (especially full bleed background images) still make sense and look good? Do portions of the nav become icons (and are they intuitive?), or a menu?

Creative License

You may NOT take liberties with the layout, but your creative license includes:

  • Copy
  • Images
  • Icons
  • Color palette, but ONLY if you select a complementary palette. We highly encourage you to visit sites like: material palette or coolors or color-hex

Base Requirements

  • Basic static site setup with index.html and styles.css
  • Site must be responsive
  • Create a repo on github :octocat: for your work with following naming construct: [initials]-comp-challenge-[challenge number] (i.e. “cd-comp-challenge-2”)
  • Include a README with the repo that provides a brief overview of the project, and images of both the original comp and your version.
  • Push your final work to github pages

Additional Requirements

  • Site must work across Firefox, Safari, Chrome
  • Developer must use normalize or reset file in CSS
  • You are allowed to use flex-box and/or grid

Submission Details


Lesson Search Results

Showing top 10 results