Design comparison
Solution retrospective
I have recently started learning front-end development. I was never able to learn programming without doing a project and frontendmentor seemed a great place. After learning basic HTML and CSS I did this challenge and learned a lot along the way. I am open to any sort of feedback which would help me improve my skills. I was not able to create the exact due to my limited knowledge of html. I would appreciate if anyone guides me on my short comings.
Community feedback
- @rohits673Posted over 3 years ago
Hi, Your site looks better on desktop version, nice work there👍. But you can improve it for medium sized and mobile devices, you can use responsive units for margin and
text-align:centerat mobile devices. also, for the background image as @Liem said I would like to add that you can also usebackground-blend-mode:multiply;with given bg-img and color. For more clarification you can check my solution and let me know if I need to improve something there. Thanks!0 - @liemdangPosted over 3 years ago
Hey Talal! It was a good idea to start with a real project on frontendmentor instead of watching endless tutorials. Hope you will develop your skills fast.
Now to your project: instead of using the img tag for the image, you can also use only a div tag with a class. In the CSS file you can give this class from the div tag the property background-url which links to your image. In the same class you can set the background with opacity, so that you can color your image. You can have a look at my codepen: https://codepen.io/liemdang/pen/jOmEdeG
Hope this was helpful to you.
0
Please log in to post a comment
Log in with GitHub
Join our Discord community
Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!
Join our Discord