Frontend Mentor - Recipe page

Community feedback

• 

  Alex•3,130

  @Alex-Archer-IPosted 4 months ago

  Hey, well done, neat work =)

  I don't really think that every part should be tabbable as it mostly for interactive elements not for scrolling.

  And I guess you shouldn't skip the titles hierarchy - I mean I understand why you didn't use h1 here but otherwise that is better when they follow their order. And "preparation time" could be h3 too.

  (Actually I did it the same way, but I was wrong then =))

  Marked as helpful

  0

  ---

  

  paulDev•480

  @dev-paulLPosted 4 months ago

  @Alex-Archer-I Haha welcome back 👋 Thank you for your second feedback

  That's true.

  I tried to make all the text blocks in li aligned (I hope that makes sense) but didn't find how to do it. Do you remember?

  1

  

  Alex•3,130

  @Alex-Archer-IPosted 4 months ago

  @dev-paulL

  Do you mean align with the markers? In that case options are very limited. Maybe, it's better to replace them with before or after pseudo-elements.

  0

  

  paulDev•480

  @dev-paulLPosted 4 months ago

  @Alex-Archer-I I thought about it last night😂 I tried again this morning and made it work without before and after. (repo is updated)

  1

  

  Alex•3,130

  @Alex-Archer-IPosted 4 months ago

  @dev-paulL

  I looked through your repo, but can't catch what exactly solved the problem =)

  Is it font-weight for the markers? Or line-height for the text? Or margin-padding combination?

  0

  

  paulDev•480

  @dev-paulLPosted 4 months ago

  @Alex-Archer-I Hmm, I think I removed the list-style-position:inside and that's it. I must've forgot to delete it from my style after trying different things 😴

  1

  

  Alex•3,130

  @Alex-Archer-IPosted 4 months ago

  @dev-paulL

  Oh, than I didn't get you at first! I thought you want to align markers vertically so that they are on the top of the line.

  That makes more sense now =)

  Glad that you manage to find a solution.

  0

  

  paulDev•480

  @dev-paulLPosted 4 months ago

  @Alex-Archer-I

  Yes, I meant that the entire block of text in the lists should have a margin on the left. As you can see in the screenshot (it didn't update for some reason), the text 'wraped' around the marker.

  1
• 

  P

  Marc REGNIER•90

  @marc-regnierPosted 4 months ago

  Great work, but be careful with the dimensions and the font, as they're not the same as on the model. Otherwise, the HTML is well structured.

  0

  ---

  

  paulDev•480

  @dev-paulLPosted 4 months ago

  👋 Thanks for the feedback, @marc-regnier! You're right. On desktop, the sizes look a bit different, though it's very similar to the original on mobile.

  I made a few changes and added a new screenshot to the GitHub repo. 👍

  0