@joaskr
Posted
Hi,
Good job with the solution! It looks just like the design! Here are some minor suggestions if you want to improve your code :)
Accessibility
- You should use HTML landmark elements such as <header><nav><main><footer> because they improve accessibility. In your code you can change <div class="container"> to <main class="container">
- You should add alt text to <img> because it improves accessibility for users using screen readers.
- There's no <h1> on the website - it's a good practice to include one. In your code
<p class=headline>
could be a <h1> element
Visual aspect
- I noticed a small bug in your solution. When you open the site on mobile in landscape mode the design gets a little bit broken. You might want to look into that.
Code
- You are using px in your project. As per the responsive design best practices you should use rem and em. Here's a nice blog post explaining them.
- You are using position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); to position the elements on the page. I would suggest looking into Flexbox as it makes positioning elements much easier. video tutorial article
Overall, good job! Let me know if you have any questions
Keep coding and good luck with future challenges!