Hi, I'd say I'm very fairly new to coding. I had to refer to several youtube videos on how to do this challenge just to understand why did they do it in a certain way and mostly just ended up following how it is done.
I'd really appreciate if there's a better and simpler way to do this challenge so I can try to learn and understand what other ways are there to do this challenge.
@Vitiyah
Posted
Hi Putra,
Follow the DRY method, Don't Repeat Yourself to make the code much shorter, for example
.content h3, .content p { text-align: center; }
This will make the code much shorter. Otherwise, good coding and great start. Wish you all the best
Marked as helpful
@Hassiai
Posted
Replace <div class="card"> with the main tag and <h3> with <h1> to fix the accessibility issue. click here for more on web-accessibility and semantic html
Give .content a padding value for all the sides and give h1 a margin-bottom value or p a margin top value for the space between the text. Add a font-size of 15px/0.9375rem to .content this will reduce the font-size of h1 and p.
Use relative units like rem or em as unit for the padding, margin, width values and preferably rem for the font-size values, instead of using px which is an absolute unit. For more on CSS units Click here
Hope am helpful.
Well done for completing this challenge. HAPPY CODING
Marked as helpful
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
