This is a solution to the NFT preview card component challenge on Frontend Mentor. Frontend Mentor challenges help you improve your coding skills by building realistic projects.
Here's a brief overview of the project
Users should be able to:
- View the optimal layout depending on their device's screen size
- See hover states for interactive elements
- Solution URL: Git repo
- Live Site URL: Github pages
- Started off writing HTML
- Add CSS starting from base styles
- Added most css to achieve layout structure
- Add minimal tweaks
- Semantic HTML5 markup
- Vanilla CSS
- CSS variables
- Flexbox
- No javascript
I can center a div with CSS - yay!
To see how you can add code snippets, see below:
<body>
<section class="preview">
...
</section>
</body>section.preview {
flex: 1;
align-self: center;
display: flex;
justify-content: center;
align-items: center;
}-
Responsive layout – This challenge specified break points but I did not find anywhere to use it
-
Better naming – Css class names could definitely improve
-
CSS reusability - I tried to re-use most of CSS but still had a challenge, it could be more leaner
-
Cascading styles – Say for example I have the following
start of file
a {
text-decoration: none;
color: pink;
}
a:hover {
color: deeppink;
}somewhere along the way
.footer a {
color: fuchsia;
}I expected the hover styles to still work, even for the footer links but it stopped.
Still need to figure that out
- CSS Scan - This helped me to copy and paste box shadows for cards.
- Website - nixon kosgei
- Frontend Mentor - @nixoncode
- Twitter - @nixoncode
To all the creators who put out content for free. Thank you