This is my first challenge so I would appreciate if you could give me some advice on how to structure my code. Also, all kind of improvements that I can add to my solution are welcome. I found it difficult to do a responsive design. That was the hardest part. Thank you so much.
@SurajHadage
Posted
Using semantic elements overwhelmed us in our very first time. So use "role" attribute to solve issue. <div role="main"></div><div role="article"></div><div role="figure"></div>
<div role="banner"></div> etc. But don't use role attribute in child's child's element.Marked as helpful
@CharlieeLuna23
Posted
Hi! A newbie here so take my advice with a grain of salt :)
You did pretty good for your first challenge, congrats!!
Little tip that I can provide for structure is to not repeat your classes unnecesary. e.g. In your styles sheet you have your hero image as ".card .card-image img" when you could have used only ".card-image" which is the class you assigned to the img.
This repeats several times and I feel it makes it hard to read as there's a lot of repetition.
Also, what is it that you found difficult for the responsive design?
Again, pretty good job!!
Marked as helpful
@aixmarina
Posted
@CharlieeLuna23 Hey! Thank you for your words, I appreciate. You're right, I didn't realize it at first. It's sometimes redundant so I will check that out and I'll try to be more specific. About the responsive design, I tried to change the font-size of the headings and the paragraph in the @media (max-width: 375px) but I couldn't do it. I would have liked to make the card smaller in the mobile design.
@dev-mksingh
Posted
@aixmarina regarding responsive it'll be better option if you chose mobile-first approach. This will help you a lot(it does to me), in this approach you to first create or structure the approach for the mobile version, and then use media queries for the bigger screen size or for desktop version.
@CharlieeLuna23
Posted
@aixmarina As mentioned by Manoj, it's better to start working with a Mobile First approach, for me it is easier to fit the small content into the bigger screen than to fit the big content into the smaller screen. That will help a lot with responsiveness.
@dev-mksingh
Posted
Hey there!! Good work, appreciate the structure you made. Well everything is good, a minor improvement you might would like to work on(its totally upto you):
Use Semantic HTML elements rather using <div></div> everywhere. Semantic Elements are better for understanding even when in future you will return to your code. And its much expressive in terms of structuring.
Hope this will be helpful.
Marked as helpful
@aixmarina
Posted
@dev-mksingh Hey! Thank you. I will study how to use more semantic HTML elements instead of div. Sometimes I don't know which one to use so I end up using div for everything. Again, thank you for your advice :)
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
