Submitted about 2 months ago

flexbox, grid, li::mark, pseudo classes, border-bottom, font-face

Vetle Limbodal•40

@vlimbo

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 am most proud of my problem solving for this project. I stumbled upon a lot of different challenges, but I managed to solve them at last with some googling.

Next time I think I would want to get more into how to use the figma files, I am still a little bit confused about them, and would love to get more confident on that part. It really makes life easier if you are able to utilize the figma files effectively

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

The first challenge was getting the paragraphs to not take up the entire lines. I am still a little unsure on how to do this effectively. I thought that by using flexbox and setting the align-items property, the div will automatically shrink to the size of the content, but I managed to solve it using max width on the paragraphs.

And figma also tested my temper this project. Its a little hard to navigate and understand all the different parts of it. I did however get out the most important details, like the colors and fonts.

The biggest struggle was getting the dots in the list to shrink. I had no clue that it was possible to change the font size of these things by using li::mark, and also use this pseudo class to change the color of the dots.

One more interesting thing that I learned, once you remove the dots from the list, they actually have a default padding that you need to remove if you want them to center.

Yes and also getting the space between the list elements themselves and the bullet points I took my time on, but eventually figured out that you can use padding to create the space by applying it to the elemnts.

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

Use figma effectively, and also knowing when to actually the different units for width and height. I feel like there are so many best practice solutions I simply dont know about.

Community feedback

Steven Stroud•11,890
@StroudyPosted about 2 months ago
Hello again, Fantastic effort on this! You’re really nailing it. Just a few things I noticed that could make it even better…

Using a <main> tag inside the <body> of your HTML is a best practice because it clearly identifies the main content of your page. This helps with accessibility and improves how search engines understand your content. <div class="main-container">

Having a clear and descriptive alt text for images is important because it helps people who use screen readers understand the content, making your site more accessible. It also improves SEO, as search engines use alt text to understand the image's context, helping your site rank better, Check this out Write helpful Alt Text to describe images,

Your heading elements <h1><h3><h2>, Heading elements should be in sequentially-descending order (e.g., <h1>, <h2>, <h3>) to create a clear content structure, improving accessibility and SEO. Skipping levels or using them out of order can confuse screen readers, affect search engine rankings, and make your content harder to understand.

Using font-display: swap in your @font-face rule improves performance by showing fallback text until the custom font loads, preventing a blank screen (flash of invisible text). The downside is a brief flash when the font switches, but it’s usually better than waiting for text to appear.

This does not matter that much at this stage but something to be mindful of for SEO(Search Engine Optimisation), <meta> description tag missing that helps search engine determine what the page is about, Something like this <meta name="description" content="description goes here" />

You’re doing fantastic! I hope these tips help you as you continue your coding journey. Stay curious and keep experimenting—every challenge is an opportunity to learn. Have fun, and keep coding with confidence! 🌟
Marked as helpful
0
guilhermesiqueira13•150
@guilhermesiqueira13Posted about 2 months ago
Good Work
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