Design comparison
Solution retrospective
learn more about responsive and improve my knowledge in the frontend field
What challenges did you encounter, and how did you overcome them?the challenges I face are a little more difficult on the layout of text images and responsiveness
What specific areas of your project would you like help with?in terms of distance and layout because I didn't get the figma design
Community feedback
- @indigorosePosted 26 days ago
This is a really nice solution to this challenge.
The HTML is easy to read, however for the next challenge try to extend your use of semantics, such
<main>
or<section>
rather than<div>
.It helps us to see the flow of the page better and improve accessibility.
Most use the cheat sheet from the Mozilla MDN site MDN Web Docs Cheat Sheet.
For the text responsiveness, the
clamp()
css function has been helpful with sizing responsive text MDN description.There is also
letter-spacing
andline-height
in css that will also help with the text design requirements.Even without the Figma files, the site is still impressive and meets the responsive requirements.
Hope to see your other solutions soon.
Marked as helpful0@rafirachmawanPosted 25 days agoThank you for your input, yes it is very true that the HTML structure does not use semantics and I am very grateful for your input, I will update my source code. @indigorose
0 - @josenegrete123Posted 28 days ago
Great work! For your
@media
section of the CSS, you don't need to change thefont-size
around because per the figma documents, they are all the samefont-size
, from mobile-version to desktop. Also theh1
and the firstspan
should be in a different font. But that was given in the style-guide. Theline-height
in theh1
could also be change to0
.Marked as helpful0@rafirachmawanPosted 26 days agoThank you very much sir, I will replace it immediately and I will update it soon @josenegrete123
0
Please log in to post a comment
Log in with GitHubJoin our Discord community
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