Submitted 5 days ago

HTML CSS

dooffenschmitz• 30

@Dgitial

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?

I’m most proud of achieving a clean and responsive design for the profile card using rem units for consistent sizing and flexbox for layout alignment. The CSS transitions for hover and focus states also enhance the user experience, making the interface feel interactive and polished.

Next Time: Next time, I would consider incorporating CSS Grid for more complex layouts and experimenting with advanced CSS animations to add more visual interest. I’d also like to ensure even better accessibility and test the design on a wider range of devices and screen sizes to improve overall usability.

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

One challenge was converting pixel values to rem units to ensure responsive and scalable design across different devices. Initially, it was tricky to maintain visual consistency while switching units.

Solution: To overcome this, I carefully calculated the rem values based on the default root font size and tested the design extensively in different browser environments. I also used CSS variables for consistent color management and made adjustments based on real-world testing to fine-tune the layout.

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

I would appreciate feedback on the following areas:

Responsiveness: Are there any improvements I could make to better handle different screen sizes, especially for mobile devices? Accessibility: What additional steps can I take to enhance accessibility for users with disabilities? CSS Techniques: Are there more efficient or modern CSS techniques that could improve the layout or performance of the profile card?

Community feedback

Steven Stroud• 4,120

@Stroudy

Posted 5 days ago

Great work on this! You should be proud of how far you've come. Here are a few observations that might help you improve further…

Using an <a> tag for navigation is semantically correct, improves accessibility for screen readers, and ensures consistent behavior across browsers, unlike a <button> not intended for links.
Consider using a naming convention like BEM (Block, Element, Modifier) is beneficial because it makes your CSS more organized, readable, and easier to maintain. BEM helps you clearly understand the purpose of each class, avoid naming conflicts, and create reusable components, leading to a more scalable codebase. For more details BEM,
Add a flex-direction: column; on your <body> to stack your attribution under your <body>.

I hope you found this advice helpful! Keep up the great work. You’re doing amazing, and I can’t wait to see what you create next. Happy coding! 🚀

MikDra1• 6,090

@MikDra1

Posted 5 days ago

I encourage you to use this technique to make the card responsive with ease:

.card {
width: 90%;
max-width: 37.5rem;
}

On the smaller screens card will be 90% of the parent (here body), but as soon as the card will be 37.5rem (600px) it will lock with this size.

Also to put the card in the center I advise you to use this code snippet:

.container {
display: grid;
place-items: center;
}

Hope you found this comment helpful 💗💗💗

Good job and keep going 😁😊😉

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