Blog preview

Hi Jordan, as a fellow newbie, here's the following I saw in your layout.

Border - the layout must have a border of black, Class - although it's not necessary, it must be better that our elements must have a certain class name as a distinction, this may also help as we style this in our CSS file. Responsiveness - the layout is not responsive on the Small screen, especially on a 320px device. instead of giving a fixed width to your "main" element, try to replace it with a min-width at wider devices and a maximum width at smaller devices. Height - one thing I learned from our colleague here is that avoid a height of 100vh, instead use min-height: 100vh to avoid overlapping when the smaller device is in the landscape. also, avoid giving fixed px quantity in height and width, it may affect your responsiveness in other devices CSS Reset - add CSS reset when designing in CSS. you can search for it and apply it to your code.

That's it, I hope I can help you on your journey.

Hello there 👋. Congratulations on successfully completing the challenge! 🎉

• I have a suggestion regarding your code that I believe will be of great interest to you.

ADDING HOVER STATE 🪄:

• Looks like the component hover state with box-shadow has not been set yet. Your solution would be perfectly finished if you add this as a finishing touch!

• Just add the following css rules

main {
  transition: box-shadow .3s;
}

main:hover {
  box-shadow: 12px 13px 0px 1px rgba(0,0,0,0.93);
}

• Now your component's hover shadows has been set properly

.

I hope you find this helpful 😄 Above all, the solution you submitted is great !

Happy coding!