Website URL: https://slspencer.github.io/flexbox-cards/Main/index.html
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?
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.
-
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:
-
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:
-
- 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.
- Set this project up in your own GitHub repositories so that you can deploy and use it for future reference!
© 2022 Trilogy Education Services, LLC, a 2U, Inc. brand. Confidential and Proprietary. All Rights Reserved.