Submitted 4 months ago

Responsive layout using CSS Flexboxes, Google Fonts

Lampros Liontos• 100

@reteov

Preview site(opens in new window)View code(opens in new window)

This is a solution for...

Social links profile

HTML
CSS

1newbie

View challenge

Design comparison

SolutionDesign

Solution retrospective

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

At this point, there's not really anything I am proud of, per se. I'm satisfied that I'm learning my way around CSS, and am able to write HTML to make the most of it.

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

The main challenges I'm having is the fact that the attribution section is throwing off the size and positioning of the main window, since it pushes the main window up, throwing off the alignment between the page and the design screenshot. I had to add margins and padding for the top and bottom of the main area to bring it close to the original size.

Also, lining up the sides is a tricky thing, since I'm attempting to use em values instead of straight pixels. In this case, there's really no solution per se, just constant adjustment until the sides are close enough to make the difference subtle.

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

I'm not sure how to line up the box sizes exactly without using non-responsive elements such as pixels, as well as adding margin and padding to everything in different amounts; this seems like a poor idea at best, and a nightmare to troubleshoot later.

Community feedback

Daniel 🛸• 44,230

@danielmrz-dev

Posted 4 months ago

Hello there!

Congrats on completing the challenge! ✅

Your solution looks great!

📌 It's recommended to use semantic HTML elements like <ul> and <li> for creating lists. This ensures that your code is more accessible, maintainable, and semantically meaningful.

Here's and example on how you can refactor your code:

After Refactoring

<ul class="list-container">
    <li><a href="#">Github</a></li>
    <li><a href="#">Frontend Mentor</a></li>
    <li><a href="#">LinkedIn</a></li>
    ...
</ul>

By using <ul> and <li>, you convey the structure of your content more clearly, making it easier for screen readers and search engines to understand. Additionally, it aligns with best practices for HTML semantics.

I hope you find this helpful!

Keep up the excellent work!

Lampros Liontos• 100

@reteov

Posted 4 months ago

@danielmrz-dev Okay, done. This was a lot trickier than I expected... First, I had to figure out how to remove the bullet points and indentation, and then there is the whole "hover/focus" thing, which was a bear to figure out until I learned about the :focus-within effect, which got the job done. While I was at it, I also changed my name to an h1 tag to resolve that message in the accessibility report.

Please log in to post a comment

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