Flex Box , Css Variables and Local Fonts
Solution retrospective
As Beginner level i tried as much as possible to create same design according to solution this time i achieved my target better than before and more in semantic way this time i used differently is root directories which help me a lot.
What challenges did you encounter, and how did you overcome them?first problem i was facing are applying local fonts for that i used youtube and w3schools and after i achieved my goal with extra learning of a new property call @font-face second problem i am facing is to center a div like my senior said try to avoid using height properties but for centering a div i didn't find any solution but as temporary i am giving to an element a specific height for my solution
What specific areas of your project would you like help with?i don't know right now but yeah definitely my code is not superb i want every possible advice to make my future code superb
Please log in to post a comment
Log in with GitHubCommunity feedback
- @gok786
✅ What’s Working Well Semantic HTML: Good use of semantic tags like <main>, <section>, and heading tags (<h1>).
Font Management: You've loaded custom fonts with @font-face correctly and separated heading/paragraph fonts.
Consistent Color Theme: The use of CSS variables makes your color system easy to manage and scale.
Responsiveness (Basic): Centering with Flexbox and using vh units is a good start for a vertically centered layout.
Focus State: Nice touch on accessibility with the :focus style for buttons.
⚠️ Suggestions for Improvement 🔧 HTML Improvements Alt Attribute:
Your img tag has an empty alt="". You should either describe the image (e.g., alt="Jessica Randall's profile picture") or explicitly mark it as decorative with role="presentation" or aria-hidden="true" if it's purely visual.
Use of <sub>:
You’re using <sub> for the location text, but <sub> is intended for subscript (like H₂O). Replace it with a <p> or a <span> and style it appropriately.
Quotes on Description:
Avoid unnecessary quotation marks around "Front-end developer and avid reader." unless it's a literal quote.
🎨 CSS Enhancements Responsiveness:
Your .profile_card has fixed height and width. Consider using relative units (em, %, max-width, etc.) or media queries for better responsiveness on different screen sizes.
Button Spacing:
Currently, all .social_links_button are full width. Add padding/margins on the container or limit their max-width to avoid edge-to-edge alignment on small screens.
Focus Styling Specificity:
Your selector .social_links :focus is broad. It should be .social_links_button:focus for clarity and specificity.
Font Weights:
Your @font-face includes font-weight: 400 for both fonts, even though InterSemiBold is actually bold. Consider setting font-weight: 600 or adjusting accordingly for heading clarity.
🧼 Code Cleanup Commented Code:
Clean up or move the attribution section into a more clearly designated footer or dev-comment section if you're not planning to use it.
💡 Optional Enhancements Add hover effects for buttons.
Include aria-labels for accessibility on social links.
Consider using a container max-width instead of fixed pixel widths.
Implement dark/light mode toggle if you want to build on this.
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