css

07. Mini Project 👩‍🎓👨‍🎓

Mini-Project: CSS Snippet Cheat Sheet

In this activity, you will work with a group to 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.

  • You and your group can decide which CSS styles and colors you will use to design the application, but the app needs to be a responsive. Use the following images to gain 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:

    On a desktop, the application displays three CSS code snippets per row.

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

    On a tablet, the application displays two CSS code snippets per row.

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

    On a mobile device, the application displays one CSS code snippet per row.

💡 Hints

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

🏆 Bonus

  • Set this project up in your own GitHub repositories so that you can deploy and use it for future reference!

✅ Solutions

Solutions Click Here