Skip to content
OverviewSolutions
8
Comments
8
Fatma Tawfeek
@Fatma-Tawfeek

All comments

  • Fatma Tawfeek•110
    @Fatma-TawfeekPosted about 2 months ago

    Your work is excellent, and there’s nothing to add or improve. Great job!

    0
  • Fatma Tawfeek•110
    @Fatma-TawfeekPosted 2 months ago

    Great job on structuring the CSS! The grid layout is well-organized and responsive, with effective use of grid areas. A few suggestions:

    • In .testimonials-grid, the padding: 2; value seems incomplete and might need units like rem or px.
    • Consider using rem or em for all sizing for better scalability across different devices.
    • The media query uses flex on the body, which could affect centering. You might want to adjust it for better alignment on smaller screens. Overall, clean and efficient work! Keep it up!
    0
  • Aamir Khan•130
    @AamnbabaSubmitted 3 months ago
    What specific areas of your project would you like help with?

    I need help how to tackle the projection of responsive pages. Its looking difficult enough.

    Responsive Four Cards

    1
    Fatma Tawfeek•110
    @Fatma-TawfeekPosted 3 months ago

    You've done a great job laying the foundation for a well-structured, responsive layout! Here are a few suggestions to make your CSS even better:

    • Headings Padding: Instead of padding-inline: 6rem; for headings, consider using margins or flexbox for better alignment across different screen sizes.

    • Font-size Scaling: Setting html { font-size: 62.5%; } is great for easier rem calculations, but overusing it in media queries (e.g., 50% on small screens) may cause text to become too small.

    • Responsive Design: Your media queries cover different screen widths, but setting body { max-height: 13.6rem; } in one query could squash your layout on smaller devices. It's better to adjust padding or layout proportions instead.

    • Grid Class: There’s a class called grid { gap: 1.5; }, but it seems incomplete. Ensure the unit (rem, px, etc.) is specified for the gap value.

    • Card Dimensions: Fixing card width and height might make it less flexible on smaller screens. Using relative units or setting max-width/min-width may improve responsiveness.

    Marked as helpful
    0
  • Fatma Tawfeek•110
    @Fatma-TawfeekPosted 3 months ago

    Excellent work !! but there are some notes you should take care of :

    • first, you should use <button> element for Add to cart button not <div>.
    • second, you should put all page content in <main> tag not just card content then you can put all card content in another div with "card" class for example.
    0
  • gio•120
    @fakegioSubmitted 3 months ago
    What are you most proud of, and what would you do differently next time?

    I am most proud of implementing the small details of the design. Next time, I would overthink less and try to implement the "easiest" solution, instead of trying to think of a clever implementation, and end up implementing the "easiest" solution anyway.

    What challenges did you encounter, and how did you overcome them?

    The small bullet points, horizontal lines, nutrition tables, and responsiveness were challenges for this exercise. I overcame them by trying to chunk them down into digestible problems, rather than treating them as one big problem.

    What specific areas of your project would you like help with?

    Media query breakpoints and responsiveness between the desktop, tablet, and mobile designs. Getting the site to look similar to the given sizes (i.e. 1440 for desktop, 768 for tablet, 375 for mobile) isn't the challenge, the challenge is deciding on how it should look in between the given sizes.

    Responsive recipe page

    1
    Fatma Tawfeek•110
    @Fatma-TawfeekPosted 3 months ago
    • Excellent work! I really don't have any comment on your solution.
    0
  • Aldo Yáñez•40
    @AldousTheWiseSubmitted 3 months ago
    What are you most proud of, and what would you do differently next time?

    I try to use less pure css for flexbox or grid, but I feel proud to make the structure using jquery.

    What challenges did you encounter, and how did you overcome them?

    The use of media queries. I don't like to use them, but I see they are necessary.

    Responsive presentation card using Vanilla CSS, HTML and JQuery.

    1
    Fatma Tawfeek•110
    @Fatma-TawfeekPosted 3 months ago

    It seems perfect from screenshot But I can't find the card code in html file !!

    0
  • Fatma Tawfeek•110
    @Fatma-TawfeekPosted 3 months ago
    • It is all fine but you should be careful with following the design system like the yellow background color and text colors
    • you shouldn't use the "button" element for "learning" part you may use the "span" or even "div" element better
    0
  • Dave•40
    @Guitar8634Submitted 3 months ago
    What are you most proud of, and what would you do differently next time?

    I am most proud of the following-

    • learning Markdown today
    • the basic process for using github to submit work on Frontend Mentor
    • my knowledge of html and css got me through this design
    What challenges did you encounter, and how did you overcome them?

    The challenges I encountered in this order were-

    1. remembering how to center the card using this code-
    body {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: calc(100vh - 1px);
}
    1. choosing which way to order my css
    2. understanding when to use display: flex;
    What specific areas of your project would you like help with?

    Areas I'd Like Help With

    • figuring out how to have a link in hover grow with it moving the other links next to it for example, I have this code for my links-
     .attribution a:hover {
    font-weight: 600;
    transition: all .225s ease-in-out;
    color: hsl(47, 51%, 55%);
}

    When the font-weight grows, the text on either side moves out of the way to create space. I'd like it to grow over the other text. Would this be a z-index or `` type solution?

    thanks!

    Mobile-first QR Code Component

    2
    Fatma Tawfeek•110
    @Fatma-TawfeekPosted 3 months ago
    • you should fix the height of the card to match the original design
    • you should also fix the shadow of the card to match the shadow of the original design
    2