@wojtekbrejnak
Posted
Hello, @Sezalsaundarya11! Great job on building your second FEM project! I’d like to offer some constructive feedback. Allow me to share valuable tips that will serve you well in your future projects:
I. HTML Structure: Remember to properly structure your HTML documents using tags like <main>, <article>, <section>, <header>, <footer>, and <nav>. These elements enhance accessibility and maintainability. Using proper structure will minimize the need too use too much divs.
You can avoid complexity changing your HTML to:
<body>
<main>
<section>
<img>
</section>
<article>
<h1></h1>
<p></p>
<footer>
<img>
<section>
<h5></h5>
<h6></h6>
</section>
</footer>
</article>
</main>
</body>
II. Heading Order: Maintaining the correct order of headings (from <h1> to <h6>) is crucial. It ensures semantic clarity and assists screen readers. In your code you used <h2 class="top-heading> and <p class="card-content"> it would be better to use just <h1> for the title and <p> for card-content text. Your <span> element could be <h6>(as showed in point I).
III. Simplify CSS Selectors: Whenever possible, use element selectors to avoid unnecessary complexity in your code. For instance, if you’re targeting a .card-container class, consider leveraging the HTML structure (as mentioned in point I) and directly target the mainelement.
IV. Avoid Absolute Units: Instead of using fixed units like px, opt for relative units such as em and rem. This approach ensures responsiveness across different devices and screen sizes. You used rems in many places but there are some px in your .css file that could be changed to rems as well.
V. Format Your Code: Format your code for better readability. Your code formatting is good but it could be even better if you change (for example):
h5{
font-weight:700;
}
span{
font-weight:500;
}
to this:
h5 {
font-weight: 700;
}
span {
font-weight: 500;
}
It's not a big change but will make your code more readible.
VI. Meaningful Commit Titles: When committing changes, it’s helpful to provide descriptive titles. Instead of generic ones like Update README.md opt for specifics such as Add live site url Clear commit messages benefit both you and your future collaborators. Remember to commit every change you’ve made to your project, ensuring that it has been tested and works. Commits are a great way to showcase your workflow and progress in building projects.
Let me share a little tip with you, another great way to center a containter is to use grid:
.container {
display: grid;
place-items: center;
}
I think that you did really good with the responsive design. If you want to sharpen your skills, Kevin Powell is an excellent teacher, and he recently uploaded a video titled A Practical Guide to Responsive Web Design on his YouTube channel YouTube video link. I highly recommend watching not only this video but also exploring his entire channel and his website Kevin Powell's website link, which is a valuable resource for frontend developers.
My general impression of your project is really good, you did a very good job. Keep up the great work, and best wishes on your coding journey! If you ever have any questions, feel free to reach out — I’m here to help. You can find my contact information in my profile. Keep coding and stay curious!
Marked as helpful
