Design comparison
Community feedback
- @wess-MHHWPosted 9 months ago
Hey Ali, fantastic work on your project! You've achieved a lot, and with a few tweaks, it could be truly exceptional.
Firstly, consider organizing your code by creating separate files for HTML and CSS.
This practice, common in web development, enhances code management, especially in larger projects, and contributes to better overall performance. Adapting this habit in smaller projects will set a solid foundation for future endeavors.
Things I like about your code:
- Including the
<main>
tag, which many people do not include. - Setting up colors and fonts as Custom Properties.
Suggestions for improvement:
HTML
In the Why us section, observe the design preview where each sentence is on a single line. You have two choices: either use the
<br>
tag to separate them or create a<p>
tag for each paragraph.Using
<br>
:<p>Tutorials by industry experts<br> Peer & expert code review<br> Coding exercises<br> Access to our GitHub repos<br> Community forum<br> Flashcard decks<br> New videos every week</p>
Using
<p>
:<p>Tutorials by industry experts</p> <p>Peer & expert code review</p> <p>Coding exercises</p> <p>Access to our GitHub repos</p> <p>Community forum</p> <p>Flashcard decks</p> <p>New videos every week</p>
CSS
To perfectly center an element on the screen :
1.Ensure that the body occupies at least the entire screen height.
body { min-height: 100vh; }
2.Utilize one of these techniques: Grid CSS or Flexbox.
Relying solely on margins may fall short.
Using Grid:
main { display: grid; place-items: center; }
Using Flexbox:
main { display: flex; align-items: center; justify-content: center; }
Feel free to explore other solutions. Additionally, check out my take here. I'm open to any feedback.
Great job once again on your hard work, and best of luck!
0 - Including the
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