P
@CoderAlchemy24
Latest solutions
Latest comments
- @gok786
🥳 well done
- @MargaritaAlexWhat are you most proud of, and what would you do differently next time?
For not giving up and experimenting through the process!
What challenges did you encounter, and how did you overcome them?I had challenges both with HTML & CSS! Writing code with semantic html tags was a bit challenging. I asked questions and got answers.
What specific areas of your project would you like help with?It seems that all of my solutions are slightly out of proportion, there bigger than the original so I would like a feedback on what am I doing wrong in that area, and also feedback for the entire solution
@gok786🥳Well done
- @C1SLRWhat are you most proud of, and what would you do differently next time?
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
@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.
- @Akinloye3264@gok786
Overall Feedback:
You've created a clean and visually structured blog preview card with a solid understanding of layout and basic styling. The use of Flexbox is appropriate and your font choices are on brand for a modern UI.
What’s Good:
Semantic structure is mostly clear and easy to follow.
Nice use of Google Fonts and Flexbox for layout.
Card styling (border, shadow, radius) looks visually engaging.
Good use of class naming and image handling for the avatar.
Suggestions for Improvement:
Accessibility & Semantics:
Use meaningful tags like <article>, <section>, and <time> instead of <h2> for date.
Consider adding alt attributes to all <img> tags for accessibility.
Image Styling:
img { width: 50; } is missing a unit (px). Should be width: 50px;.
Content Spacing:
Add some spacing (e.g. margin-top) between elements like h3 and the paragraph for better readability.
Responsive Widths:
Avoid hardcoded widths like width: 400px on h3; this can break responsiveness. Use relative units or let it adjust naturally.
CSS Cleanup:
Remove unused or commented code for better readability.
Fix the empty font-weight: in .udo.
External Link:
Your attribution link to Gmail might not be appropriate — consider using a personal portfolio or GitHub instead.
- @Sheyon565@gok786
Strengths:
Clean and Simple HTML Structure:
The HTML structure is minimal yet functional, making it easy to understand. You've used semantic tags like <main>, <h1>, and <p>, which is great for both accessibility and SEO. The structure makes it easy to maintain and extend in the future.
The use of the <meta> tags for viewport settings ensures the page will be displayed correctly across different screen sizes, which is essential for responsive design.
The <link> to Google Fonts and the favicon are well-implemented, making the page visually appealing and enhancing user experience.
Responsive Image Handling:
Removing the fixed width and height attributes from the <img> tag is a smart move. By making the image responsive (with width: 100% and height: auto), you allow it to scale appropriately on various screen sizes, preventing any potential layout breakage or distortion.
This adjustment makes the image adaptable to both mobile and desktop views, ensuring a seamless experience for users across devices.
Typography and Headings:
The typography (using Outfit font from Google Fonts) looks great, and the heading structure with <h1> helps provide a clear content hierarchy. The alt text for the QR code image is descriptive, which improves accessibility by making it clear what the image represents.
Correcting the typo in the title ("fornt-end" to "front-end") improves readability and professionalism. Small details like this help ensure a polished user experience.
Minimal and Efficient CSS:
The CSS is concise yet effective, applying global resets with * { margin: 0; padding: 0; box-sizing: border-box; }, which ensures consistent behavior across different browsers.
Using CSS variables (--white, --slate-300, etc.) to manage colors and padding makes the CSS easier to maintain and adjust. This is an excellent practice for scalability, as changing a color palette or adjusting padding can be done in one place rather than across multiple rules.
