Hello, congratulations on completing the challenge! Let's have a look at what you can improve next time:
-
It's a good practice to make the mobile design first and then add a media query for the desktop version.
-
In the picture tag, you just need one breakpoint to indicate when the design will go from mobile to desktop. Use min-width, now max. In other words, it would look like this:
However, it's a better idea to use em or rem instead of pixels, what takes us to the next point:
-
Don't use pixels or other absolute units for dimensions, it doesn't make your page responsive. You should be using mostly em or rem. You can read about CSS units here.
-
To make the image responsive, don't add height
and width
. Instead, give it max-width: 100%
and object-fit: contain
.
-
Double-check the font sizes and line height of the text. The bigger heading looks noticeably smaller than the design's, and the paragraph's lines look too close to each other.
-
You're missing the active state for the button. You're going to need cursor: pointer
and the :hover
pseudo-class with the darker background color.