Skip to content
OverviewSolutions
12
Comments
9

Abimbola

@Abimzz200 points

I’m a mysterious individual who has yet to fill out my bio. One thing’s for certain: I love writing front-end code!

Latest solutions

  • newsletter sign up with success message main

    Abimbola•200
    Submitted 3 months ago

    Any suggestions on efficiency or to streamline my code would be appreciated.

    2 comments

  • Article preview component

    Abimbola•200
    Submitted 4 months ago

    some of the solutions i used felt a little janky and i would appreciate an suggestion that can help me streamline my code.

    0 comments

  • Testimonial grid section

    Abimbola•200
    Submitted about 1 year ago

    Overall, while I believe the code isn't the most streamlined I've written, it is functional and meets the project requirements. I recognize that there are areas for improvement, particularly in optimizing the code for better readability and efficiency. i would really appreciate any suggestions that could help me improve my code.

    2 comments

  • Four card feature section

    Abimbola•200
    Submitted about 1 year ago

    i have no area in specific but will be open to any suggestions or tip that can help to improve my code

    1 comment

  • Recipe page

    Abimbola•200
    Submitted about 1 year ago

    I would appreciate help with the styling of the list marker, i was unable to figure out how to change only their style without affecting the rest of the link.

    2 comments

  • Social links profile

    Abimbola•200
    Submitted about 1 year ago

    I would be glad if the someone can look over my code and point out any issue with the cade or what i could have done better. thank you

    1 comment
View more solutions

Latest comments

  • Abimbola•200
    @Abimzz

    First of all, congratulations on completing the project—it looks great!

    I did notice a few minor issues that could be improved:

    Desktop

    • The .card element is not centered horizontally.
    • The padding at the bottom of .card is not visually balanced with the rest of the card.

    Between 1020px and 430px viewport widths

    • The .card does not fully cover the form area.

    Mobile

    • The page becomes scrollable, which may affect user experience.

    General

    • After dismissing the .successCard, the form fields do not reset.
    • Most of the ARIA roles used are either unnecessary or incorrectly applied.
    • The #resetBtn button does not require a type attribute.

    Suggested Fixes

    Desktop

    • Replace margin-top with margin: 2rem; on .card to properly center it.
    • Adjust padding to ensure visual uniformity at the bottom of .card.

    Between 1020px and 430px

    • Remove fixed height and width properties from .card to allow it to fully cover the form.

    Mobile

    • Remove margin-bottom from .container to prevent unwanted scrolling.
    • For .successCard, set height: 100vh; to fill the viewport height.
    • Replace old padding with 1rem for consistency.
    • Add margin-top: auto; to both .message and #resetBtn to improve layout spacing.

    General

    • In your JavaScript, add emailInput.value = ''; to reset the email field when dismissing .successCard.
    • Remove unnecessary or misused ARIA roles from index.html to improve accessibility.
    • Remove the type="reset" attribute from #resetBtn since it is outside the form and does not require it.
  • Abimbola•200
    @Abimzz

    First, congratulations on completing this project! You’ve done a great job overall. I noticed a few areas that could be improved:

    Desktop:

    • The card is not horizontally centered.
    • The padding in .card__content is not uniform.
    • In .card__share, using margin: auto; would help create space between .card__info and also enhance the site’s responsiveness.
    • .card__social is not positioned directly above the .card__share button.

    Mobile:

    • .card__social is displayed instead of .card__social2.
    • In the media queries, some styles are being redefined unnecessarily. Removing these redundancies will help streamline your code.

    Overall, these adjustments will help improve the layout and maintainability of your project. Great effort so far-keep it up!

  • Abimbola•200
    @Abimzz

    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!

  • AKdeBerg•160
    @AKdeBerg
    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•200
    @Abimzz

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

  • Abimbola•200
    @Abimzz

    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
  • ivan-josef•70
    @ivan-josef
    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•200
    @Abimzz

    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
View more comments