@MahmoodElsaayed
@DBasic-cmd
Submitted
What are you most proud of, and what would you do differently next time?
I'm most proud about my speed and understanding of the project.
What challenges did you encounter, and how did you overcome them?
I had a very little issue with the box-shadow but with a little research I got it done.
What specific areas of your project would you like help with?
I need helping in making changes for smaller screens without using media query
@MahmoodElsaayed
Posted
Congrats on completing the project 🎉
Regarding your query,
clamp(min, ideal, max) to set a responsive width to the card..blog-card set width: clamp(310px, 43vw, 384px)
clamp tells the .blog-card "if the ideal value grows or shrinks you'll change with it but you can't be lower than min or higher than max100% so it occupies only the width available to it instead of it's default width, and lastly add a margin-right: 23px to the .card-image class to stop that overflowing.Marked as helpful
@Siyam1888
Submitted
What are you most proud of, and what would you do differently next time?
I am proud that I could complete the project in a short time and I could make it look almost like the design without using the design file.
I would like to learn and implement CSS positioning, padding, and margins in a better way in my upcoming projects.
What challenges did you encounter, and how did you overcome them?
I learned a new way to add fonts using the @font-face property. Apart from this, all the other parts were easy and known to me.
What specific areas of your project would you like help with?
I am a beginner in this field. I would love your feedback on any aspects of my code that can be written in a better way.
Thanks in advance for your helpful feedback.
@MahmoodElsaayed
Posted
<strong> tag is used to put strong emphasis on it's contents. it does not only embolden text but also provides semantic meaning to screen readers, which can announce the text with added emphasis. It is generally better to use it within the body of content/paragraph to highlight important phrases or words. For a stand-alone author name, consider using a <span> with a class for styling.<a> tag instead of the <h1> since that text should be a link to a blog post rather than a basic title@gabriel-m-dev
Submitted
What challenges did you encounter, and how did you overcome them?
many. Especially the tables section. I even left this project unfinished because I couldn't match the boards to the original design. I did my best although I am not satisfied with the final result.
What specific areas of your project would you like help with?
table section
@MahmoodElsaayed
Posted
Hey, I also had some trouble with the table section. But the solution turned out to be pretty simple, at least in this case.
HTML has it's own semantic tags for tables
Pieced together, they'll automatically give you a pretty close version to the desired layout and you'll only need to do some minimal styling to get it right.
// HTML
<table>
<tr>
<th>Calories</th>
<td>277kcal</td>
</tr>
<tr>
<th>Carbs</th>
<td>0g</td>
</tr>
<tr>
<th>Protein</th>
<td>20g</td>
</tr>
<tr>
<th>Fat</th>
<td>22g</td>
</tr>
</table>
// CSS
table {
width: 100%;
text-align: left;
}
table th,
.nutrition table td {
padding: 10px 30px;
}
This is way easier than manually aligning the items and also more accessible. But tbh with you, I wouldn't get too caught up on tables. You'll rarely need them and they can get complicated real fast. But on the off chance that you find yourself needing to use tables, MDN has a 2 part guide to tables.
Other than that, great work on your project! It looks great 👍😊
Marked as helpful