Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

Frontend Mentor | Social links profile

paulDevβ€’ 440

@dev-paulL

Desktop design screenshot for the Social links profile coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


What are you most proud of, and what would you do differently next time?

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β€’ 3,130

@Alex-Archer-I

Posted

Hi!

You use main and footer correctly. As for section - small project like this isn't really need them. You can style main as container. In bigger sites it's preferable to use article 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 of em. They are more predictable =)

Good work overall, keep doing =)

Marked as helpful

0

paulDevβ€’ 440

@dev-paulL

Posted

@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 with em. Should have I set everything to rem?

1
Alexβ€’ 3,130

@Alex-Archer-I

Posted

@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 when em start to get it's value from another em 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 helpful

0
paulDevβ€’ 440

@dev-paulL

Posted

@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 use px."

What would you personally use in these types of components/challenges?

1
Alexβ€’ 3,130

@Alex-Archer-I

Posted

@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 helpful

0
paulDevβ€’ 440

@dev-paulL

Posted

@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β€’ 3,130

@Alex-Archer-I

Posted

@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 helpful

0

Please log in to post a comment

Log in with GitHub
Discord logo

Join 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