Design comparison
Solution retrospective
Feedback welcome.
-
It was my first time working on a project, so it was very difficult. However, I think I learned a lot by searching for tags and attributes.
-
I'm not sure if the code configuration was efficient. Also, I'm not sure because I've never seen anyone else's code.
-
I would really appreciate it if you could give me feedback on the best practices and the different parts of my code.
Community feedback
- @Aman-ZaveriPosted over 2 years ago
Great job on completing your first project! Here are a few things you should keep in mind for your next project:
- Look into semantic tags. They are basically tags used for specific things in your HTML code. For example, instead of the .attribution class, you could have used a footer tag.
- Understand the purpose of div's a bit more well in order to use them more efficiently throughout the code. The div with a class of .img seems unnecessary since it only holds one tag inside of it. Removing that div should not impact your code.
- When naming classes, it's always good to develop good practices. For example, the .grid class is usually called the container because it holds all of the code inside of it.
- As for the .attribution class, it would have been better to keep that inside of the .grid tag instead of creating a whole new div tag for it. It's always good to know that the lower the amount of divs, the better and more efficient the code is.
- Moving onto the CSS... try learning about relative lengths. Those units make it so much easier to position the elements and make your website responsive. Using pixels can usually bring up lots of issues. That being said, you might still need to use pixels as a unit, but understand where to use it.
- If you want all the text on your page to have the same font, try putting the font family in the body so you don't have to repeat it constantly throughout the code.
- To make it easier to position elements on your page, learn about Flex and CSS Grid. Trust me, they are a life-saver and you will be using them everywhere. I learned it from "Web Dev Simplified", but you can learn it from anywhere.
- Now that you have finished this project, try to go through other people's projects and try to find out what they did well in this project. Learning from other projects is a great way to improve. Don't worry, it's not cheating :)
- When creating a website, the code isn't all that matters. Try creating a README file so others can understand how your code works and what your goal was. It may be slightly time-consuming and tedious, but it's a great practice all professionals follow.
I know that I threw a lot at you, but don't be scared. Creating more projects and implementing a new practice is the best way to improve. As your first project, you did an exceptional job and I know you will grow further very quickly. I am also a beginner, but these are the things I learned on the way as I created more projects. Hope this helped!
0 - @Li-BeePosted over 2 years ago
Hey looks really good well done 👍
I think you need to change your font on the desciption text - currently different to the design.
Also to clear your accessibility issues add
<main></main>around you code as such, to give a landmark (here is more info on it if you are [interested] (https://dequeuniversity.com/rules/axe/4.3/landmark-one-main?application=axeAPI).<body> <main> <div class = "grid">...</div> <div class="attribution">...</div> </main> </body>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