Skip to content
OverviewSolutions
11
Comments
13
Caleb Abuul
@Caleb-Abuul

All comments

  • Caleb Abuul•320
    @Caleb-Abuul

    This is incredible. There isn't anything much I would add to this. Just to call out that to make your code more accessible, use header, main and footer tags. The whole of the card could have been wrapped in a main tag. But then again, your work is incredible. No significant difference between what you did and the design. Keep it up.

    Marked as helpful
  • Caleb Abuul•320
    @Caleb-Abuul

    Hi Abhay, well done for the incredible work you did here. While div's are great at segmenting our code, they don't tell a good story from an accessibility standpoint. So, to ensure that even in our tiniest of work, we put accessibility at the core, it would be better to use tags such as header, main, and footer to segment our work properly. The attribution for example, would have been best enclosed within the footer tag. And the main tag would have been used to enclose the main card. But then again, well done for the amazing work.

    Marked as helpful
  • Caleb Abuul•320
    @Caleb-Abuul

    Hi Aya Hassan. Your submission is remarkable I must say. However, for issues of accessibility I would advice that you use tags such as header, main and footer to properly structure your html code. Although the js code is little, it would be proper to put it in a separate file and link it to the html. Aside of these, your work is superb. Thumbs up!

    Marked as helpful
  • Caleb Abuul•320
    @Caleb-Abuul

    Your work is great! it is responsive and the solution includes semantics, which is very awesome. The layout looks great on different screen sizes. However, there are just a few things I'd like to point out;

    Font-family You would need to change the font family of the bold text since it does not align with the design.

    Format You need to also bold the text. Secondly, the perfume at the top has a letter spacing.

    By making these little changes, you will improve your work greatly.

    Marked as helpful
  • Akrem Muktar•170
    @Alfeyn
    What are you most proud of, and what would you do differently next time?

    all things great, and would like to do differently the responsiveness for next time.

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

    I was working on the desktop-first approach before, and now working with the mobile-first approach is challenging. I try a little bit to make it responsive.

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

    The responsive part.

    Product preview card component solution

    #sass/scss
    1
    Caleb Abuul•320
    @Caleb-Abuul

    You did a great job. Nice work. However, I feel that a few things could be improved on.

    • To make it more accessible, use semantic HTML. That is wrap the product Card section in a main tag, and the attribution div in a footer tag. Alternatively, you could use arial-label attributes and set the value to main on the product Card section tag, and footer on the attribution div.
    • Regarding responsiveness trying using percentages instead of rigid values such as 40rem etc. to set the width of the product Card container. Also, remove the height property for the container and let the content of the container decides its height. That way, when the viewport changes, the container will readjust accordingly, making it more responsive. Lastly, let the image occupy 100% of its container, since all the images are optimized.
    Marked as helpful
  • Caleb Abuul•320
    @Caleb-Abuul

    Hi, you did an awesome job on this challenge. However, I would like to point out a few things that could be improved on. First, the border-radius is two small. Try 2rem or 32px. Also the background color for each of the summary children div's has much opacity, so it's a bit hard to see the text on it. Reduce the opacity a bit. Other than these I'd rate you 9/10. The remaining 1 is for your computer 💻👍.

  • Caleb Abuul•320
    @Caleb-Abuul

    You did a great job. I love the custom properties and classes you created. However, I think you should make the #wrapper width 100% of its container or 100vw for mobile. Also, only apply border-radius to the bottom left and bottom-right of the score card. This will ensure the design looks like the mobile preview in the design file. Here's how to apply border radius to only the bottom corners of the score card.

    CSS
border-bottom-left-radius: 2rem;
border-bottom-right-radius: 2rem;
  • yagnik0•440
    @yagnik0
    What are you most proud of, and what would you do differently next time?

    I'm proud that I've completed this project as much as I can come close to design, Well for the next time maybe I'll try to write less minimal CSS.🚀

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

    It was a bit challenging for me to make it responsive but somehow I manage to do it with a googling particularly for hamburger menu.🤔

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

    Any feedbacks are welcome!😌

    Happy Coding!🫡

    Loopstudios-Landing-Page

    1
    Caleb Abuul•320
    @Caleb-Abuul

    You did an incredible job, and the solution does not differ considerably from the design. It is responsive and the code is structured and readable.

    Marked as helpful
  • Caleb Abuul•320
    @Caleb-Abuul

    Nice one! You did an amazing job I must say. However, I'd suggest you correct a few things here and there. Remove the spread value for the box-shadow so that you would have a solid box-shadow. And the box-shadow should become wider on hover i.e double it's size on hover. Plus increase the border-radius a bit; to maybe 15px or 20px.

  • Caleb Abuul•320
    @Caleb-Abuul

    Your solution is simply amazing. I like the time and effort you put into the email validation. Well, all that is left for you to do now is to include a README.md file at the root of the repo.

  • Caleb Abuul•320
    @Caleb-Abuul

    This is amazing. Great work you got there... I like the fact that your validation is automatic. That is as the input box is in focus the validation kicks in. However, the social media icons you included are overflowing. Please find a way of fixing that. Plus you may have some accessibility issues, given that your html is not properly marked. I'd suggest you wrap all the <body > content in a <main> tag to fix that.

  • Caleb Abuul•320
    @Caleb-Abuul

    Nice work you got there. However, there are no hover states for the biggest heading h1 and the card. The h1 does not turn yellow on hover and there is no box-shadow increase for the card. Also you didn't include landmarks in your code. Simply wrap the whole preview card in a <main> tag, and then the attribution div in a footer tag in your HTML file.

    Marked as helpful
  • Caleb Abuul•320
    @Caleb-Abuul

    You did an awesome job. You only have a few hover errors on texts here and there, like the nav links should turn gray when hovering. And also the border of the input text-box should be that primary orange color when in active.