Responsive page using CSS Flexbox

Community feedback

• 

  Tushar Biswas•4,080

  @itushPosted over 1 year ago

  Congratulations on completing the challenge! 🎉

  Welcome to the platform! 🎉 We're thrilled to have you here and excited to see your progress 💪as you continue your front-end development journey.

  Your solution looks nice to me :)

  Also great work with the JS, where the div elements created by the map function are added as children of the summary-items container in the DOM.

  In my projects, I try to use at least one main element for a page, and avoid divs as much as possible and use section and article element wherever I can.

  Now, to avoid styling issues one must clearly understand at least few basics of CSS.

  I remember when I started out, I made countless mistakes and spent long hours searching for solutions. But hey, you don't need to go through the same struggles! 🙌 To help you shorten the learning curve, I recommend going through the following articles. They contain valuable insights that can make your journey smoother:

  📚🔍 12 important CSS topics

  📚🔍 11 important HTML topics

  I hope you find these resources helpful in your coding adventures! 🤞

  I'm eagerly looking forward to seeing the amazing projects you'll create in the future! 🚀💻

  Keep up the fantastic work and happy hacking! 💪✨

  Marked as helpful

  1

  ---

  

  P

  Ghenu Andreea Daniela•130

  @danyela2000Posted over 1 year ago

  @itush thanks!

  1
• 

  Joachim•840

  @Thewatcher13Posted over 1 year ago

  Hi,

  • You should have a main landmark element for semantics

  • use a ul for the right column, not p tags.

  Are you completly new to webdev? Did you have already the qr code challenge?

  Marked as helpful

  1

  ---

  

  P

  Ghenu Andreea Daniela•130

  @danyela2000Posted over 1 year ago

  Hello, @Thewatcher13. No, I'm not new to webdev, but I am at the beginning of the road. I took some courses on front-end development. And I decided to practice with some projects. I don't understand why I need landmarks, I didn't use them so far. Thanks

  0

  

  Joachim•840

  @Thewatcher13Posted over 1 year ago

  @danyela2000

  Here is a guide on semantic elements.

  https://web.dev/learn/html/semantic-html/

  Also your font-size should not be in px (absolute value) but in relative values (rem) https://fedmentor.dev/posts/font-size-px/

  I recommended to do the qr code challenge on frontendmentor

  1

  

  P

  Ghenu Andreea Daniela•130

  @danyela2000Posted over 1 year ago

  Thank you very much @Thewatcher13.

  0
• 

  Joachim•840

  @Thewatcher13Posted over 1 year ago

  • why did you choose a p tag on those? "Your result" "Great" "Summary"

  • Your button should have a type(type:button)

  0

  ---

  

  P

  Ghenu Andreea Daniela•130

  @danyela2000Posted over 1 year ago

  @Thewatcher13, I used to write and use p tags very often, instead of headings, but I corrected them here, now.

  About the type="button". If I don't use a button inside a form element, I don't think is necessary to use this attribute. This is important if you want to differentiate it from other types of buttons such as reset or submit buttons. But I think the reason for using it is just for accessibility or clarity.

  0

  

  Joachim•840

  @Thewatcher13Posted over 1 year ago

  Good to see the changes! Different browsers may use different default types for the <button> element, for this reason it is always usefull to do it.

  0