Responsive website and app design

Hello there 👋. Good job on completing the challenge !

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

• You should not use inline-CSS because it is not a good practice. Instead, you should use only the external stylesheet to style your page. By doing this, you will be able to have a better organization of your code and will be able to understand it better.

• 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.

• float: left is a somewhat outdated approach for creating two columns and can lead to layout issues. It's recommended to use flexbox and maintain widths or directly use the grid layout, which can generate two columns with just a line of code.

.card {
  /* height: 60%; Remove this*/
  /* width: 45%;  Remove this*/
  box-shadow: 0 0 50px hsl(221, 100%, 96%);
  border-radius: 20px;
  max-width: 600px;
  display: flex;
}

• 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.

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

Happy coding!

Hello @Shikamaru007!

Your solution looks great!

I have a couple of suggestions for improvement:

• Don't use percentage values for height or width. It can cause bugs and make your card too big or too small depending on the screen size.

• For height. Just add the content, and let it adapt.

• For width, it's nice to add a max-width fixed value (like px) to prevent your element from overgrowing.

• Also, for semantic purposes, replace your div.card with main.card. This won't create visual impact but they make your HTML code more semantic and improve SEO optimization as well as the accessibility of your project.

I hope it helps!

Other than those details, you did an excelent job! 😊