Mini-Project: CSS Snippet Cheat Sheet

Build a webpage that will hold a collection of CSS snippets. What better way to learn CSS than to build a knowledge base of CSS?

Instructions

The completed application should meet the following criteria:

• As a user, I can view a collection of labeled CSS snippets in a responsive grid.

• As a user, I can easily identify these CSS snippets by their headings.

• As a user, I can highlight a code snippet by clicking on it.

• As a user, I can view my application on a mobile device as well as a desktop.

Specifications

• Must use semantic HTML elements and proper indentation.

• Use CSS variables to maintain clean and reusable values for a color scheme.

• Use flexbox and media queries to create a responsive grid layout.

• Each CSS snippet should have a card-like layout with the CSS syntax wrapped in an HTML pre element.

• Each CSS snippet can easily be highlighted for copying on click using the CSS user-select property.

• Must incorporate a background color using a CSS linear-gradient function.

• Must incorporate a bit of animation using the CSS transition property.

• I can choose which CSS styles and colors will use to design the application, but the app needs to be a responsive. The following images provide an understanding of how the app should look at different screen sizes, from a layout perspective:

  • At size 992px and above, the app should resemble the following image:

    

  • At size 768px and above, the app should resemble the following image:

    

  • On mobile devices, anything under 768px, the app should resemble the following image:

    

💡 Hints

• The HTML <pre> element is very literal about spaces and indentation. To gain a better understanding of how to work with it, I will use this article on considerations for styling the pre tag.