Skip to content
Submitted about 1 year ago

vite nojs fontsquirrel woff2_compress

vite, accessibility
Jim Barnett•260
@jamesbarnett
A solution to the Social links profile challenge
Preview (opens in new tab)Code (opens in new tab)

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?

Code

Please log in to post a comment

Log in

Community feedback

  • P
    DalaScript•600
    @DalaScript

    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

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