Static Comp Challenge 2


The static comp challenge is a series of three challenges to keep you working that HTML/CSS muscle. :muscle: You will be asked to recreate a static comp, with each growing in complexity. For each challenge, you’ll be given a static comp and asked to recreate it. 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. “bt-comp-challenge-1”)
  • 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

Submission Details

Place submissions in appropriate tab of the Submission Sheet


This is layout that takes a good amount of time to build. Don’t wait until the week of to get started.




Novice Knows what a semantic tag is and leverages the HTML5 structural tags to organize the content of their markup.
Advanced Beginner Leverages more precise semantic tags when applicable, and employs basic ARIA roles attributes for added clarity in structure, descriptive image alt attributes, title attributes for applicable anchor tags.
Proficient Employs detailed accessibility practices throughout markup, especially in forms and can speak to decisions made in accessibility choices as it relates to specific accessibility concerns.
Exceptional Can run markup through a variety of online accessibility tools and score well for content, color, screen readers, etc.


Novice Crafts markup with proper indentation and opening/closing tags.
Advanced Beginner Crafts markup with proper and logical nesting.
Proficient Crafts lean, efficient markup that is easy to read and follow across naming conventions, structure, and solid formatting that follows industry best practices.
Exceptional Crafts lean, efficient markup and can speak directly to choices made to improve performance, including but not limited to, page load times, css/js optimizations, image optimizations.


Structure of Code

Novice Can effectively target DOM elements via tag, class, and/or id and write CSS rules around each element to create the desired style.
Advanced Beginner Can cleanly and logically organize CSS rules according to similar categories (i.e. typography, layout, components), and then logically organize the remaining CSS rules based on flow of the markup. Organizes properties within rules alphabetically.
Proficient Leverages cascading styles and CSS specificity rules to create more complex targeting of elements in order to reduce, reuse, share styles across elements. Organizes properties within rules based upon industry standard principles of writing consistent, idiomatic CSS.
Exceptional Understands the performance implications surrounding cascading/specificity and crafts CSS that is mindful of reducing complexity and increasing performance.


Novice Can articulate how the CSS box model works and apply it appropriately in a static layout.
Advanced Beginner Can articulate the differences between the approaches of absolute/relative positioning, flex-box, floats, and can appropriately apply the approaches to solve a variety of layout problems.
Proficient Develops layouts that work cross-browser, are responsive, and can logically defend the choices made in implementation approach for layout.
Exceptional Can articulate rationale for all parts of the CSS implementation (each line of code/CSS rule) specifically in regards to the balance of: structure of code, design integrity, performance.


Comp Recreation

Novice Can establish a complementary color palette, integrate font(s), and execute a handful of the large comp details.
Advanced Beginner Can accomplish about 50-75% of the large and small design details and can logically rework them on at least 1 breakpoint.
Proficient Developer captures the spirit and design intent of the comp. Some small details need polish to achieve a pixel-perfect match to the comp, but developer is clearly mindful of details and has made a conscious and careful effort to match the comp. Any design decisions left open to interpretation are handled thoughtfully and are well executed, but are more noticable and/or unintuative than they would be if the designer had provided the solution, or may not be totally seamless during screen-size transitions.
Exceptional Developer skillfully captures the spirit and design intent of all comp details. Execution is pixel-perfect and any design decisions left open to interpretation are solved intentionally, are as seamless as if the designer had provided the solution, are handled gracefully, and enhance the overall design.

Design Concepts

Novice Can integrate typography, color choices, and layout in ways that do not detract from legibility.
Advanced Beginner Can apply fundamental design concepts with increased sensitivity that result in clear legibility but likely break in areas of responsiveness, layout, “noise”.
Proficient Can apply fundamental design concepts in a comp that demonstrates a thoughtful, purposeful, cohesive strategy that does not detract from legibility or overall design integrity.
Exceptional Typography, color choices, and layout decisions are thoughtful and appropriate, and strongly enhance the layout and legibility of the design.

Lesson Search Results

Showing top 10 results