Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

NFT landing page using HTML and CSS

@Pablo6152

Desktop design screenshot for the NFT preview card component coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


I used @media (orientation: landscape) instead of fixed pixels to show the desktop layout, I'm not sure if that's bad practice, also I think my CSS is too messy

Community feedback

@StormKing969

Posted

Hi,

Let me begin by saying congratulation for completing this challenge. As for your question about organizing your CSS file, I believe that you can do two thing (speaking from personal experience):

  • First you can section off your components with comments and basically group everything that is related together. (However, I stopped doing that because once your CSS file has more than 100 lines, it becomes hard to locate specific tags)

The link below is an old portfolio project of mine that shows what I mean by sectioning off your file into components using comments and also the issue that I mentioned above

https://github.com/StormKing969/Personal-Portfolio/blob/main/assets/css/styles.css

  • The second way is to learn SASS/SCSS. It's very easy to learn and you can easily link several different styling files into one. For example in your case, you could have one file to store all your variables, another to store the default values of your tags and a third one to style the card itself. This makes going back to your file and locating specific tags easy and

The link below is an example on how I used SCSS to style my project

https://github.com/StormKing969/Personal-Portfolio-Version-2/tree/main/scss

1
Sang Le 520

@sqle157

Posted

Hi,

First of all, congratulation for completing this challenge. I think you did a pretty nice job, and I have some tips from my personal experience to help you organize your CSS.

  1. I see that you have some classes like middle, flex-type, text-accent, ... which are the utilities classes, you can group those classes into 1 comment block, like this
    .flex-type { your code }
    .middle { your code }
    .text-accent { your code }

I think that will help you create a more readable and organized structure for your CSS.

  1. You can group your component CSS base on your HTML structure from top to bottom. Also, if you have any hover effect or anything for your component, try to write it right after your css for your component. For example, if you have a hover effect on your card, you can write your CSS like this
    .card { ... }
    .card:hover { ... }

I recommend watching Kevin Powell and Traversy Media on Youtube. They have great content for CSS and Frontend Skills in general, and I think you will learn a lot from them!

1

Please log in to post a comment

Log in with GitHub
Discord logo

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord