Design comparison
Solution retrospective
What should I do to improve this project? What your honest opinion about my code? Do you think I should use framework such as react and tailwind to build this project?
Community feedback
- @AdrianoEscarabotePosted almost 2 years ago
Hi Agil, how are you? I really liked the result of your project, but I have some tips that I think you will enjoy:
If we see how the layout is behaving at higher resolutions, with the help of google dev tools, we will see that it is stretching a lot, to solve this we can use a max-width with the value we want the content to stop growing and to center use a margin: 0 auto
body { max-width: 1440px; margin: 0 auto; }
Avoid using
px
, If your web content font sizes are set to absolute units, such as pixels, the user will not be able to re-size the text or control the font size based on their needs. if you want to keep using px for development and then format the whole code to rem, you can use this vscode extension: px to remThe rest is great!
I hope it helps... 👍
Marked as helpful1 - @SinisaVukmirovicPosted almost 2 years ago
Hello!
To improve, use more (all) HTML5 semantic elements, and use them more correctly. Unlike most beginners your are using some semantic elements, which is great, but also misusing some of them.
More on semantic HTML5 elements
Also, use of headings (h1, h2, h3...) elements is not correct.
Your code, in general is OK, but for a beginner it is quite good. Learn and apply said things and it will be very good code.
And, while learning, you should stick to making everything with vanilla CSS and JS. Move on to frameworks only when you learned the fundamentals.
Hope this helps!
1 - @TjasaZilPosted almost 2 years ago
Hi Agil,
good work on the project. To enhance your code you can put the navbar section outside of the main component and wrap it into
<header>
tag. You can read more about the tag and why it is used here. I also see that all of your pictures do not have an alt attribute. Some of the alt attributes are empty. It is good practice to describe the picture in the alt attribute, just in case, the user can not see the image (slow connection, broken src or the user uses a screen reader).I do not think you need to use any frameworks with this project, as it is pretty simple. Basic HTML, CSS, and a bit of JS are enough. You can redo the challenge once you know some frameworks if you want.
Otherwise, you are doing great :)
Cheers! 🥂
1
Please log in to post a comment
Log in with GitHubJoin 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