I have been struggling to be consistent with maintaining responsiveness. Went for a mobile-first approach here and did media queries instead on desktop. I started to use relative units like em and rem over px. Can I get some inputs on my unit usage (em, rem, %, etc.) and overall, my CSS structure since I feel like they are redundant but I do not know where to start refactoring. Thank you!
Hello @Zach !!! Congragulations on your efforts, and you did a good job on this project! Looks very much like the original design. Also, after reviewing your code I have noticed:
you have a little bit of a redundant code(specifically in the media query section in my opinion) like .container {...} , button {...} etc
in the .container code where you put .container { position: absolute, top.... } you could instead use a more 'modern' solution like using its parent container(In this case <body> element) and put on it something like body { display: flex; justify-content: center; align-items: center} to center a .container div
OR
you could also use:
.container { margin: 0 auto; max-width: ...(whichever you want it to be max)},
You could put 'font-family....' on body element and ofc if needed, also on button separately, instead of putting it on p, h1, h2 etc, because this way you will be more general with it
Also, with selectors that have the same values , in your case h1, h2 you could wrap them like: h1, h2{ font-weight: 900; }
All in all, these are not some 'huge' mistakes you made or anything like that, it's just a suggestion for slight improvement and making a code a little bit more cleaner and easier to read in my personal opinion. And again, you did a good job on this one @Zach! Wish you all the best, and keep coding!!!
Hello Nitin! Congragulations on finishing this challenge. Looks good. Also, try changing the color of the paragraph in the center of the card to more suiting one, closer to the design. And again, good job! Keep coding!
I'm still learning. Any feedback is welcome! :)
CARLOSAG1609 This looks pretty much the same as the original! Space between the icons and headings are little bit lower, but that does not really matter, you can change it quickly.I think you did really well, as your css code is very nicely written!! I like how you kept it very clean and neat, and it is obvious that you put some nice effort into building this project.Keep it going CARLOSAG1609 ! :)
