Design comparison
Solution retrospective
This project was done using HTML and CSS. I'll appreciate review especially when it comes to the naming convention and the accessibility of the project.
Community feedback
- @AdrianoEscarabotePosted about 2 years ago
Hi Vaibhav Kumar, how are you?
I really liked the result of your project, but I have some tips that I think you will enjoy:
- <html> element must have a lang attribute [click here](https://dequeuniversity.com/rules/axe/4.3/html-has-lang?application=axeAPI)
to remove the scrollbar, wrap the footer with the main tag
The rest is great!
I hope it helps... 👍
Marked as helpful0 - @hossam-khalafPosted about 2 years ago
Hello, @Soulz001 Great Job on what you achieved in the design so far.
here are some notes:
1- You can use the main tag as your container instead of adding non-necessary divs, your code will be more readable and much cleaner, also try to use semantic elements more, like <section> <articles>
2- the mobile version of your projects has a scroll and doesn't match the design, after reading your code I saw that the padding on the pics__section causing that problem, it's so large for the mobile screen, decrease it to 9 or 10 rem or try using <picture> tag instead of using the background property on the <div>. -- you can read more about it here: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/picture
3- good job on background effect by the way but, You can use [mix-blend-mode] to make this color blend between the image and the background-color of the container. And play with the opacity to reach the actual effect.
4- try increasing the font size of the heading to match the design and also adding some padding-right to text__section to match the desktop design, also don't forget to change it in the media-query -- which you can change to 600px for example instead of 1024 --
don't get overwhelmed by all of the notes, there is nothing wrong with your code, it's just a better way of doing things, we are all still learning and we will always have more to learn about.
have a great day Happy Coding😊
Marked as helpful0@Soulz001Posted about 2 years ago@hossam-khalaf Thank you for this review. I will effect the changes
1
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