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

vite nojs fontsquirrel woff2_compress

P
Jim Barnettβ€’ 260

@jamesbarnett

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?

I was more methodical with regards to top and bottom margins and padding for vertical alignment when compared to my last challenge. Also, this was my first time self-hosting fonts and converting them to woff2.

Differently - I would take more of a mobile first approach. My media query strikes me as clunky. Perhaps a mobile first approach would have resulted in something different.

What challenges did you encounter, and how did you overcome them?

I was tripped up briefly on the "social links list" by default margins/padding on `` elements. It first presented by making everything look "too indented". Using the search term "ul no indent" gave me plenty of explanations. I later encountered an issue with the spacing on the bottom of the social links list, but I immediately suspected default padding/margin values and confirmed it with the dev tools.

What specific areas of your project would you like help with?

I am interested to hear opinions on the media query.

  • Should it have been decomposed into multiple media queries?
  • Is there a standard practice for media query placement within a css file?
  • I am always looking for feedback on markup structure. Opinionated and nitpicky things are welcome.

I have two uses of text-align: center. Are there better solutions?

Community feedback

P
DalaScriptβ€’ 380

@DalaScript

Posted

Hey, Good Job!πŸ‘βœ¨

Your design looks very good, also you don't need a lot of media queries, only if you consider it necessary.

Here are some tips to improve this project:

  • First of all, we should start with mobile design firstπŸ“±, that we have benefits like 1. Better mobile experience🌟, 2. Simpler codeπŸ”§, 3. Faster websites⚑, 4. It's easier to add more laterβž•.
  • To center an article element, you must give its main element:
height: 100vh;
display: flex;
align-items: center;
justify-content: center;

Good luck!πŸ€πŸ‘

nika.dala

Marked as helpful

1

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