Design comparison
SolutionDesign
Solution retrospective
What are you most proud of, and what would you do differently next time?
i am able to understand has time goes by i am so greatfull
What challenges did you encounter, and how did you overcome them?i encountered some margin and border area difficulty
What specific areas of your project would you like help with?margins padding spacing and implimating fonts
Community feedback
- @JamesWallison1Posted 7 months ago
Congratulation on completing one of the FEM challenges! You are doing great but there are multiple mistakes that need to be fixed, I also really want you to take it account too!
- For the first one: we will discuss about landmarks, this is important, the code you are using here is declaring a class with a div, but the div can't tell what is the role of that part so landmarks help this, using
<main></main>
<section></section>
<footer></footer>
is like a command, it helps better accessibility and also better styling of code. For example, with the paragraph part, instead of writing:
<h3> These language are the backborn of every <br />website,defining structure,content and <br />presentation </h3>
You can change to:
<h3> These language are the backborn of every <br />website,defining structure,content and <br />presentation </article>
So remember adding that into your next solution!
- For the second thing, you are totally different from almost everyone in FEM because of using clip-path, well knowing that you are trying to create the border-radius for the elements in that container but this can cause to time-consuming and difficulties when reading code. So instead of using clip-path, you can use border-radius instead!
- Thirdly is about centering your card, your card here is not properly centering and there is a pro tips that can center it easily without any difficulties, using
margin: 0 auto;
in CSS at your container will automatically center in the middle of the screen. About the height, you can addmin-height: 100vh;
display: flex
andalign-tems: center
this will also automatically center the card in the height. - And there are also some minor mistakes like padding and margin: well this is depends on your way of thinking, if you want it to be more beautiful add the font and adjust the padding and margin. And you are good to go! You are doing great! So keep pushing yourself to become a successful front-end develop! Thanks a lot for spending time readin this small comment!
0 - For the first one: we will discuss about landmarks, this is important, the code you are using here is declaring a class with a div, but the div can't tell what is the role of that part so landmarks help this, using
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