I would like to know if there is a better way of coding the output. Are there best practices that I could have applied or are there unnecessary elements, classes, or CSS that I added that will have the same result if those are removed? I will greatly appreciate your opinions and suggestions. Thanks
Nice work! I'm also working on the "Newbie" challenges atm, so take what I say with a grain of salt as I am still learning too.
Small suggestions I would try to implement:
As for your CSS:
height: fi;. At least I think it is a typo 😅px with rem as this makes your code more responsive. This video should help explain this all in better detail and give better examples as to when to use each unit.I used CSS Variables for colors that simplifies project maintenance and customization, which is a good practice.
What challenges did you encounter, and how did you overcome them?I learned how to use box-shadow to add subtle depth to elements, which enhances the design visually. I also used some aspects of BEM (Block Element Modifier)
What specific areas of your project would you like help with?I intend to continue improving and applying suggestions. For example, in this project I used BEM in the CSS class names and used rem in the fonts instead of pixels. In the next project I also intend to start with a CSS reset.
Well done on this project! I've also just learned CSS variables and it does make it SO much easier!
Small suggestions I would try to implement:
With your BEM, try giving it a more specific name. For example, instead of main__description, change it to card__description. This makes which element it is more clear and will make the jump to bigger projects (which will have many more components) easier.
In CSS, when using the height property, ask yourself "Do I really need to set height here?" If yes, use a min-height. You want to avoid heights on container/text elements when you can and let the content do the work there (unless there is a background color on that element, in which case height might be needed depending on various factors).
Finally, try and replace px with rem as this makes your code more responsive. This video should help explain this all in better detail and give better examples as to when to use each unit.
As you mentioned you'll be implementing CSS resets next. Make sure this is the first piece of CSS you apply before anything else and it will make styling a lot easier!
Hope this helped, I look forward to seeing your progress 🙂
Just wanted to let you know I think you accidentally posted the wrong link for the preview site solution.
If you go to: your profile > click on the solution > click on the button with three dots (top right) > click on edit solution ...
This will allow you to change the link to the correct one so that you can get feedback 🙂
