Latest solutions
Simple CSS
Submitted 4 months agoI used flexbox for every container to align items. Don't know if there is a better way of doing this. Also, I haven't figured out how to make the fonts smaller for mobile design.
Latest comments
- @Victor-BarrioSubmitted 3 months ago@salilphadnisPosted 3 months ago
Well done. I looked at your design and your code and I can't really see anything I would improve on. Your HTML and CSS are readable and well structured and your CSS is especially well written and minimal. You have made good use of variables to improve the readability and set default values and then overridden them. Keep it up.
Marked as helpful0 - P@PKosmowskiSubmitted 4 months agoWhat challenges did you encounter, and how did you overcome them?
choosing between grid and flex
What specific areas of your project would you like help with?i was wondering how to make this four card display using grid only
@salilphadnisPosted 4 months agoYou may want to fix the link to your code as it says page not found. However, I was able to go up one level and back into the repository.
Your desktop design looks very good. However, I see that you don't have the mobile design. For this design, I found it easier to go with grid rather than flex. I first did the mobile design using 1 column grid for the cards. Then for the desktop design, using the media query @media (min-width: 768px), I changed the grid structure in to 3 columns and 4 rows and spread the cards as shown in the desktop design.
Here is my CSS for reference: https://github.com/salilphadnis/four-card-feature-section/blob/main/style.css
Marked as helpful1 - @ThalesmarSubmitted 4 months agoWhat are you most proud of, and what would you do differently next time?
This is my final frontend challenge, and I couldn’t be prouder of what I’ve accomplished. It’s been a rewarding journey, and this milestone feels like a true testament to my growth and dedication.
@salilphadnisPosted 4 months agoYour solution looks good, and your CSS and HTML is well written and readable. Perhaps the only feedback I would like to give is to use more default attributes in the body element of the CSS instead of repeating it in the element, such as font-family, etc.
Marked as helpful0 - @fjorikSubmitted 4 months ago@salilphadnisPosted 4 months ago
Your design looks very good, both on desktop and on mobile. You have made good use of the <section> semantic. I would like to offer one minor feeback, and that is to move the style section to it's own css file in order to separate the design from the html.
0 - @1ah90Submitted 4 months ago@salilphadnisPosted 4 months ago
Design looks good and your code is very well structured and easy to understand. If I do need to give some feedback, it would scale back on the hover effect on the button that makes it the design feel a little jumpy. But I assume you added that for learning. So, its all good.
Marked as helpful0 - @FernandoArriaga87Submitted 4 months ago@salilphadnisPosted 4 months ago
Your design is well structured and html easy to read. As a newbie, I learnt some new things by looking at your code.
Marked as helpful1