Skip to content
OverviewSolutions
10
Comments
7
Abimbola
@Abimzz

All comments

  • Abimbola•170
    @AbimzzPosted 2 months ago

    Firstly, I want to commend you on the excellent work you did on the project! Your attention to detail and overall design approach are commendable, and it’s clear that you put a lot of effort into creating a functional and visually appealing site.

    While the project is strong, I noticed a few areas where improvements could be made:

    1. Background Color

      • The background color currently set as --Very-dark-blackish-blue: hsl(219, 29%, 14%); should be changed to --Light-grayish-blue: hsl(210, 46%, 95%);. This adjustment will create a lighter and more inviting atmosphere for the site.

    2. Breakpoint Adjustments

      • The breakpoint for your design needs to be adjusted to maintain a clear and readable layout across different screen sizes. Ensuring that your site is responsive will greatly enhance the user experience.

    3. Class vs. ID Usage

      • It’s advisable to use class names as much as possible instead of IDs. Classes provide more flexibility and can be reused across multiple elements, which is beneficial for maintaining consistency in your styles.

    4. Header Syntax

      • For your .header, consider using a more semantic approach by applying syntax such as h1, h2, h3. This not only improves the structure of your HTML but also enhances SEO and accessibility.

    5. Font Weight for Header

      • The font weight for the .header should be set to either font-weight: 500; or font-weight: 600;. This adjustment will help achieve a more balanced and visually appealing text hierarchy.

    Overall, you’ve done a fantastic job with the project, and with these adjustments, it can be even better. I appreciate the hard work you’ve put into this, and I look forward to seeing how you implement these suggestions. Keep up the great work!

    0
  • AKdeBerg•160
    @AKdeBergSubmitted 2 months ago
    What are you most proud of, and what would you do differently next time?

    I used Grid to implement the layout. I wasn't very skilled using Grid but this time I tried anyway and managed to complete the challenge.

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

    Designing the layout was a bit tricky. Specifically, the way the first and last card sits between row. I didn't know how to implement this so had to learn about Grid. After learning about the Grid and few trials and errors was able to solve it.

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

    Any suggestions is appreciated.

    Four Card Feature Section (Mobile First Approach using Grid)

    1
    Abimbola•170
    @AbimzzPosted 2 months ago

    first well done on the site, your code was a little more involved than i was expecting but it turned out just fine

    1
  • Abimbola•170
    @AbimzzPosted 3 months ago

    First and foremost, I want to commend you on the great job you've done with the site! it’s clear that you’ve put a lot of effort into this project.

    I did notice a few areas that could benefit from some adjustments:

    1. Border Radius on Images

      • The border-radius property is currently applied to all four corners of the images. It would be more visually appealing to apply it to only two sides, which can create a more refined look.

    2. Card Body Height

      • The height of the .card-body should be adjusted to match the height of the image. This will create a more cohesive appearance and ensure that the layout is balanced.

    3. Image Alt Text

      • The alt attribute in the <img> tag is essential for accessibility. It should be used to describe the image in case there is an error in loading it. This not only improves accessibility for users with screen readers but also enhances the overall user experience.

    4. Breakpoint Adjustments

      • The breakpoint for the site needs to be reconsidered, especially regarding the effects of both paddings and margins. Ensuring that these elements are accounted for will help create a more responsive design.

    5. Mobile View Spacing

      • There seems to be a lack of space between the card and the body in the mobile view. Adding some margin or padding will improve the layout and make it more visually appealing on smaller screens.

    6. Cart Icon Color

      • The cart icon currently has a color: black; style applied. Changing this to color: white; would enhance visibility and align better with the overall design aesthetic.

    Overall, your work is commendable, and with a few adjustments, it can be even better. I appreciate the effort you've put into this project, and I look forward to seeing how you implement these changes. Keep up the great work!

    Marked as helpful
    0
  • ivan-josef•70
    @ivan-josefSubmitted 3 months ago
    What are you most proud of, and what would you do differently next time?

    i found thist challenge more difficult than the previous one, but i managed to complete it.

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

    I didn't understand why I had to modify only the widht element of my container item

    recipe page

    1
    Abimbola•170
    @AbimzzPosted 3 months ago

    First and foremost, I want to commend you on the excellent job you've done with the site! The styling of the list markers is particularly impressive. I found it to be visually appealing and well-executed. Your example has provided me with valuable insights that I can apply to my own code, so thank you for that!

    Areas for Improvement While the site has many strengths, I did notice a few areas that could benefit from some adjustments:

    1. Card Padding and Max-Width

      • The padding for the card elements appears to be a bit too large, which can affect the overall layout and spacing. Reducing the padding could create a more balanced look.
      • Additionally, the max-width of the cards seems somewhat small. Increasing this value could enhance the visual impact and usability of the cards, allowing for better content display.

    2. Mobile Responsiveness

      • One significant issue is the lack of a mobile view. On smaller screens, the layout becomes disorganized, which can detract from the user experience. Implementing media queries will be essential in addressing this. By defining different styles for various screen sizes, you can ensure that the site remains user-friendly and visually appealing across all devices.

    Overall, your work is commendable, and with a few adjustments, it can be even better. I appreciate the effort you've put into this project, and I look forward to seeing how you implement these changes. Keep up the great work!

    Marked as helpful
    1
  • Abimbola•170
    @AbimzzPosted 3 months ago

    the font weight used for the social links was not correct. font-weight: 600; should have been used instead of font-weight: 600;. other than that the rest of your code was masterful written.

    0
  • Abimbola•170
    @AbimzzPosted 3 months ago

    perfectly done! i can't fault you for deciding not to make the site responsive. i also like the you made use of var in order to streamline the whole process, i believe that you archived the main goal of the exercise

    0
  • Abimbola•170
    @AbimzzPosted 3 months ago

    First of, nice work on the project.. there are a few minor things i would like to point out:

    • Font: the font-family used was no the required font for this project which was (outfit) and the font-weights needs to be adjusted.
    • the .container should have take up 100% of the view screen as it was acting as the background for the entire website.
    • paddings should have mainly been used instead of margins.
    • there was no box-shadow on the card.

    Most of the other issues with the site can be fix by using flexbox, so i recommend that you look into flexbox.. this should help you start https://css-tricks.com/snippets/css/a-guide-to-flexbox/

    keep coding, keep improving.

    Marked as helpful
    0