Static Comp Challenge 2

Specification

This exercise is to keep you working that HTML/CSS muscle. 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.

This used to be a mod 1 project that students had to do in addition to their main projects. Y’all got this!

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

PRO-TIP

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

static-comp-challenge-3

Below is the rubric we used to use to grade this static comp

HTML

Accessibility

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.

Style

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.

CSS

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.

Implementation

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.

DESIGN

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 noticeable and/or unintuitive 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.