@devBritt
Latest solutions
Recipe Page
Submitted 22 days agoI am stuck in a position where I think the solution is simple, but I just can't make my head come around to it. So the problem is that I am not able to make my site close to the design, but it looks exactly similar when I zoom out to 50%. I tried adjusting the max-width of my main container, but failed miserably.
Latest comments
- @akil4
It looks original to the Design!
- @ShagunGupta-techWhat are you most proud of, and what would you do differently next time?
I’m proud that I used media queries for the first time and successfully made the layout responsive across different screen sizes. I created a clean, readable layout using only HTML and CSS — no frameworks, just raw code. I followed a mobile-first approach, which helped me better understand the importance of simplicity and scalability
I would try to use CSS Grid for more control over layout structure.
I’d explore accessibility improvements like aria-labels and better semantic tags.
I’d add dark mode support and maybe even try converting it into a React component for practice.
What challenges did you encounter, and how did you overcome them?One of the main challenges I faced was managing the layout on small screens, especially:
The image scaling awkwardly or overflowing its container
Background or layout spacing issues on mobile view
How I overcame it: I used media queries to adjust padding, font sizes, and image dimensions based on screen width.
I learned to use CSS properties like max-width, object-fit, and width: 100% to make the image more responsive and visually appealing on all devices.
I also experimented with hiding unnecessary elements on mobile to keep the layout clean and focused.
What specific areas of your project would you like help with?What I’d like help with I’d love feedback or guidance on:
Using aria-label effectively to improve accessibility.
Understanding when to use aria-label, aria-labelledby, or semantic tags like <section> and <article>.
How to test if my recipe page is screen-reader friendly and what tools I can use for that.
Best practices for adding ARIA to static content like ingredients and instructions.
@akil4Great!
- P@jakimiszka@akil4
Hey there! Just took a peek at your Social Links Profile, and wow, you've really built a fantastic foundation here!
Interactivity: This is the main one. While the <p> element works, getting that full, smooth interactive feel isn't there yet, especially for folks using their keyboard. You'll want to ensure that when someone tabs through the links, the entire block clearly highlights, just like it should do on hover.
Design Details: You're incredibly close to the original design, which is awesome! Just a couple of minor tweaks could make it perfect.
- @markrextomWhat are you most proud of, and what would you do differently next time?
How i am able to finish projects quicker, its like a everyday development and i am so loving it. thank you frontendmentors.
What challenges did you encounter, and how did you overcome them?No challenge at all
What specific areas of your project would you like help with?No area.
@akil4Hey there! Your code is extremely clean: it features semantic HTML, those BEM classes are spot on, and your @font-face setup for the variable fonts is top-notch.
Now, to get it truly pixel-perfect like the original design, think of these as the fun final polish:
- The "Published..." date in the design is a bit lighter.
- The description's grey is a tad darker in the design.
Keep up the phenomenal work!
- @NullCoffeeException@akil4
Looks the best!
