Result Summary using HTML CSS

Community feedback

• 

  Melvin Aguilar 🧑🏻‍💻•61,140

  @MelvinAguilarPosted 10 months ago

  Hello there 👋. Good job on completing the challenge !

  I have some suggestions about your code that might interest you.

  CSS 🎨:

  • Consider adopting a Mobile First approach in your next project. This means designing for the smallest screens first and then scaling up as needed. This helps to create a more user-friendly and accessible experience for all users.

  • When creating a media query, the goal is to override styles that can change between screen dimensions. There's no need to copy the same styles like the body element, only use the ones you need to change.

  • For a responsive and resizable component, consider using max-width instead of width for the element, also remove the height:

  .container {
    /* height: 450px; */
    /* width: 640px; */
    max-width: 640px;
    ... 
  }
  

  • The two columns should not have a fixed height, and they should have width: 50%; instead of a defined width. In the media query, you can then set them to width: 100%;, but without fixed widths.

  • Use min-height: 100vh instead of height. Setting the height to 100vh may result in the component being cut off on smaller screens, such as a mobile phone in landscape orientation.

  HTML 🏷️:

  • Use semantic elements such as <main> and <footer> to improve accessibility and organization of your page.

  I hope you find it useful! 😄 Above all, the solution you submitted is great!

  Happy coding!

  1

  ---

  

  Harshbardhan Behera•150

  @HarshBeheraPosted 10 months ago

  @MelvinAguilar Thank you for your advice . I will take a note of it in next project.

  0