Submitted 3 months ago

Media Queries, Aria Labeling, Tabindexing

Vasu Vallabh•190

@coding-vasu

Preview site View code

This is a solution for...Recipe page

HTML
CSS

1newbie

Design comparison

SolutionDesign

Solution retrospective

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

I worked on detailing, including:

List marker styling
ARIA labeling
Tab indexing

I encountered a development blocker related to responsiveness. Next time, I will isolate the problem and resolve it. I believe this approach will help me focus better and find a solution more efficiently.

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

Responsiveness: The image was getting inside the wrapper when its width was higher than the mobile screen.

List: Creating a gap between the marker and the text. I went through some blogs and resolved it.

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

Achieve Responsiveness: Using clamp().

This way, I can avoid writing media queries. I have gone through a few blogs; however, I couldn’t find a definitive guide. Please let me know if you could help me out.

Community feedback

Steven Stroud•11,870
@StroudyPosted 3 months ago
Hello, Great job with this challenge I can see you put a lot of effort in and trying to go beyond the scope of the challenge, couple of things I noticed,

You should avoid using px as it is an absolute unit and not a responsive unit like rem or em, this is a great site, px to rem converter and you should look at this article from a Frontend mentor dev, Why font-size must NEVER be in pixels.

I ran Google Dev tools, Lighthouse, score was 91 out of 100 for SEO, you can make this 100 by putting a <meta> description tag in the head.

By default <h1> tags have a font-weight: bold if you change it to font-weight: normal it will match the brief. (I know this because I had the same issue)

Using max-width: 100% or min-width: 100% is way more responsive then just width:100%, check out this article also from the same Frontend mentor dev responsive-meaning, she goes into more detail.

I look forward to seeing more from you, good luck and I hope some of this information help 🎉
1
Vasu Vallabh•190
@coding-vasuPosted 3 months ago
@Stroudy Thanks for your valuable feedback.

I have updated my code

converted px -> rem

Updated the code as per lighthouse suggestion

h1..h6 (font weight: bold -> normal

I am thinking of clamp to make me page responsive need to learn more
1
Steven Stroud•11,870
@StroudyPosted 3 months ago
@coding-vasu, Your more than welcome 😁
0
Vasu Vallabh•190
@coding-vasuPosted 3 months ago
@Stroudy , One last thing. I have gone through your few of your preview sites, I see that you are able to use GitHub pages for multiple repositories. Could you please let me know how did you achieved it.

Thank you!
0
Vasu Vallabh•190
@coding-vasuPosted 3 months ago
@Stroudy , One last thing. I have gone through your few of your preview sites, I see that you are able to use GitHub pages for multiple repositories. Could you please let me know how did you achieved it.

Thank you!
0
Steven Stroud•11,870
@StroudyPosted 3 months ago
@coding-vasu No problem, open up github.com, find the repository you want click on it, Then click on settings at the top, On the left click on pages, Then under branch, hit the drop down hit main then next to it select /root. Wait 5 mins and a link will appear with your website just above it when you refresh super easy.
0

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