Design comparison
Solution retrospective
Getting close to the original design without having access to Figma file.
What specific areas of your project would you like help with?Maybe my usage of main
& section
is questionable, same thing for the footer.
Community feedback
- @Alex-Archer-IPosted 4 months ago
Hi!
You use
main
andfooter
correctly. As for section - small project like this isn't really need them. You can stylemain
as container. In bigger sites it's preferable to usearticle
tag, but there could be sections inside it.And I suggest you to put google fonts links inside the
head
- it'll good for page optimization.Also use
rem
instead ofem
. They are more predictable =)Good work overall, keep doing =)
Marked as helpful0@dev-paulLPosted 4 months ago@Alex-Archer-I Hi! Thank you for your feedback, good eye, I've always put the font links inside the
head
, I didnt review my html before submitting this timeπ€I like to pretend that I'm creating components that need to be integrated to a full site. Thanks, I will read more about
article
.In the "style-guide.md" they say Font size (paragraph) : 14px. But I should not use pixels. So I wrote
body{font-size: 0.875rem;}
(which I learned is the lowest we can go). Is that the right technique? Then scaled the texts withem
. Should have I set everything torem
?1@Alex-Archer-IPosted 4 months ago@dev-paulL
There is a good article about articles =)
Yeah, now I see the point of your usage of
em
, but I still believe that this could play a dirty trick in bigger apps. It's just when you'll have a really complex layout (especially when you'll work with frameworks and have to create different components separately) you can easily skip the point whenem
start to get it's value from anotherem
on the higher level. it's a bit abstract explanation, hope I put it clearly =)And what about using
rem
everywhere there is another good article (not about articles =)) I can suggest.Marked as helpful0@dev-paulLPosted 4 months ago@Alex-Archer-I
Yes, I read about the
em
rules but didn't fully understand them. Now, it makes more sense. πI used
<article>
for my next challenge.In the second article you suggested, they say, when talking about padding:
- "This question is the root of the mental model I use. If the value should increase with the default font size, I use
rem
. Otherwise, I usepx
."
What would you personally use in these types of components/challenges?
1@Alex-Archer-IPosted 4 months ago@dev-paulL
Hey, glad I could help =)
Well, I'm still on my way to properly tune my mindset for different cases =)
I'm trying to change settings and see what part of the page became looks weird. For example, small image which served as decoration for the text should grow with the font size, but big illustration probably not.
As for those challenges (especially newbie level) I take them as opportunity to practice different stuff - once I even made all with px. Guess should redo all of this now =)
Marked as helpful0 - "This question is the root of the mental model I use. If the value should increase with the default font size, I use
- @dev-paulLPosted 4 months ago
@Alex-Archer-I
Thank you again for your tips. You are right, I think it will be easier to understand how everything aligns and which unit to use later, in bigger challenges. I'm gathering as much knowledge as I can along the way by doing them in order. It's fun, and in my opinion, the faster I can develop small components, the better they will integrate into more complex projects.
1@Alex-Archer-IPosted 4 months ago@dev-paulL
Yeah, it is definitely worth to move forward step by step. To gather experience, to get familiar with the layouts, to focus on the particular theme instead of trying to learn all a the same time.
And you right - it's fun =)
You're welcome, fell free to ask, comment and stuff if need =)
Marked as helpful0
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