All comments

• 

  Thomas• 60

  @TomSif

  Submitted 3 days ago

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

  "For the first time, I started with a mobile-first approach and adjusted the breakpoints with media queries. It's probably my most advanced project so far, even though it's still simple. I spent way too much time fine-tuning some design details, such as the bullet points in the list, which needed to be centered in the paragraphs. There's probably a quicker method, but I eventually managed to adjust everything as expected. The project is fully responsive—probably a bit rough around the edges, but I'm still pretty proud of it!"

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

  "The darn bullet point that needed to be centered in the middle of the paragraph gave me a hard time. I had to use ::before with content: "\2022" and position: relative, then adjust the position of the last bullet with padding. And for some reason, it took me hours... At least now lists hold no more secrets for me—well, until proven otherwise!"

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

  "I'd like to know the best way to implement margins so that they scale with the screen resolution. I had to use media queries at different resolutions, but the result feels a bit choppy. There must be a better way to do it."

  

  Front-end_Mentor_recipe-page-main

  1

  20

  

  Alexander Roan• 100

  @dearestalexander

  Posted 3 days ago

  Hi Thomas,

  I'm not an expert, but a few comments:

  • You may consider putting some comments in your html to explain your approach
  • I'm not sure you need so many <div> and <sections>. When I look at <section> guidance, that generally applies to a larger peice of content. And you should only use when something more specific doesn't fit. I chose to put the whole recipe component into an <article> as it feels like an <article>, fits well with the examples in W3C guidance. Within that <article> I only felt I needed one styling <div> for the differently formatted 'preparation' section. All other content could be style partically with by using 'main'. And it's easy to space it all out with flex, padding and margins as needed.

  CSS

  • I recommend reading up on block element method , it's a good way to structure class names to make it easy to follow the logic of what is used where.
  • For accessibility and re-usability it seems one good practice to get into the habbit of following is to apply specific styles mostly on classes. When you get to more complex designs avoiding styling on html tags mean there's less likely for specific adjustments to have unintended consequences. Of course I think base styling to body and main is normal, but styling on h1, p, ul etc. seems might be better to use classes.
  • It's possible to make this responsive without using any @media queries at all. You can use width: min() and specific a size in ch for desktop and a size in & for mobile.
  • I think you can re-work to reduce the number of CSS entries you have if you want to simplify.

  Feel free to take a look at my solution to compare. I spent quite a bit of time trying to build it in line with feedback the community gave me on my previous solution. They gave a lot of good tips on responsiveness, readability, accessibility etc.

  Marked as helpful

  1

  This comment has received 2 repliesShow
• 

  Bastien Ricard• 100

  @bricard-dev

  Submitted 16 days ago

  

  Social links profile

  3

  20

  

  Alexander Roan• 100

  @dearestalexander

  Posted 16 days ago

  Looks good!

  0
• 

  Pedro Jorge das Neves Pinto Vieira• 40

  @pedro-10-vieira

  Submitted 23 days ago

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

  The main challenge in this project was to recreate the preview's font-sizes and dimensions only by eye.

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

  If there is a more optimal/clean solution, I would like to receive some feedback :)

  

  Responsive Blog Card page using Flexbox

  1

  31

  

  Alexander Roan• 100

  @dearestalexander

  Posted 20 days ago

  Hi Pedro, your design looks good. All the element spacing seems a good match.

  Overall size looks a bit smaller, but exactly the same happened with me, after first submission I increased my height and width a bit to get a good match.

  Marked as helpful

  1
• 

  mooradmaharramly• 100

  @muradmaharramly

  Submitted about 1 month ago

  

  QR Code Component

  1

  41

  

  Alexander Roan• 100

  @dearestalexander

  Posted 21 days ago

  Hello, your colours, font and size look good. I think you could adjust to centre the white outline on the page in line with the sample. There's a fairly easy way to centre on the page using a combination of absolute position, top, left and transform.

  Marked as helpful

  0