sme93 / number-guesser-refactor

Number Guesser

HTML & CSS Refactoring Activity

Notes from this lesson can be found here.

Installation Instructions

• Fork this Repo
• Clone down to your machine
• cd into the directory
• Run open index.html to view in browser

Grade the project

In breakout rooms, use the rubrics below to score this project. You will not need to look at the JavaScript file! Focus on the HTML and CSS files only. Be ready to discuss your scores when we come back.

HTML Rubric

4:

• Developers use BEM, SMACCS, or another set of naming conventions for classes.
• Application fully implements HTML that is accessible for individuals with visual disabilities. Note: This is checked using Chrome DevTools Lighthouse audit tool.

3:

• Application utilizes consistent naming for HTML classes and IDs, and follows suggested conventions. Example: classes should be named using kabab-case, ids should be used sparingly

2:

• Application uses an appropriate amount of HTML semantic elements. Semantic elements like <button>, <li>, etc. are used instead of <div> or <span>. If <div> or <span> elements are used, they are only for styling purposes.

1:

• Style and syntax meets the criteria of the Turing HTML Style Guide.

CSS Rubric

4:

• CSS is DRY, utilizing classes/rules to cut down on repetitive styles.
• Microinteractions such as hover states and animations have been thoughtfully added to improve the user experience.
• Design is responsive across small, medium and large breakpoints.

3:

• CSS includes several examples of using a class to apply a styling rule block to multiple elements.
• The design of the page is cohesive and ensures an intuitive user experience. Any user could navigate the application without any guidance from the developer.

2:

• Developer makes attempts to write DRY CSS by having at least 1 example of using a class to apply a styling rule block to multiple elements.
• There is no use of the !important tag. One exception may be for a .hidden class.
• The design of the page does not match the overall layout provided in the comp.

1:

• Style and syntax meets the criteria of the Turing CSS Style Guide.

Original Comp: