Frontend Mentor | MahmoodElsaayed's profile

All comments

Ekisola Babatunji•20

@DBasic-cmdSubmitted 4 months ago

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

Successfully cloned a blog-card

MahmoodElsaayed•150

@MahmoodElsaayedPosted 4 months ago

Congrats on completing the project 🎉
Regarding your query,
- In this case it's actually quite simple. you can use the clamp(min, ideal, max) to set a responsive width to the card.
- here's how to do it
  1. remove media queries
  2. in .blog-card set width: clamp(310px, 43vw, 384px)
    - short explanation: basically, 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 max
    - long explanation: I'm really bad at explaining things concisely, so here's a visual guide that helps illustrating how it works.
  3. You'll notice that the img's layout broke. You'll need to set it's width to 100% 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

Siyam Ahmed•30

@Siyam1888Submitted 4 months ago

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.

Blog Preview Card using HTML and CSS

MahmoodElsaayed•150

@MahmoodElsaayedPosted 4 months ago

Some minor suggestions
- HTML
  - The <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.
  - use an <a> tag instead of the <h1> since that text should be a link to a blog post rather than a basic title
- Figma
  - this is just a matter of preference, but if you want to replicate a design more accurately using figma you can use the finder (on the left) to toggle each element in the design. when you click an element, it will display all of it's style properties (color, width, padding, etc) in the design panel on the right. You can use those to create more accurate designs while saving yourself the headache of tweaking values by eye.

Gabriel.cmd•220

@gabriel-m-devSubmitted 4 months ago

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

Recipe page

MahmoodElsaayed•150

@MahmoodElsaayedPosted 4 months ago

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
- <table>
- <tr> (table row)
- <th> (table header)
- <td> (table data).
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