Skip to content
OverviewSolutions
11
Comments
13

Caleb Abuul

@Caleb-Abuul320 points

Junior Web Developer | Aspiring Software Engineer

Latest solutions

  • Expense Chart

    #accessibility#tailwind-css#web-components#webflow#webpack
    Caleb Abuul•320
    Submitted 27 days ago

    I designed the bar chart using a grid layout. If there is a better way of designing charts in HTML, CSS, or JavaScript, don't hesitate to let me know in the comments. Thank you.

    0 comments

  • Mortgage Repayment Calculator

    #accessibility#pure-css
    Caleb Abuul•320
    Submitted 6 months ago

    Actually my code has been bulky, and I fear that simple problems that require minimal code get me writing tons of code and I understand that this is not healthy. So, how can I ensure that I write minimal code, whether HTML, CSS and most especially JavaScript?

    0 comments

  • Product Card Preview

    #accessibility#pure-css
    Caleb Abuul•320
    Submitted 6 months ago

    I do not have any specific area that I need help with. However, any suggestion for improvement is very much welcome.

    1 comment

  • Contact form

    #accessibility#bootstrap#tailwind-css#webflow#pure-css
    Caleb Abuul•320
    Submitted 6 months ago

    I really would not need much help with my code right now. But I am open to learn ways I can make it even better, more responsive, more accessible and more sleek.

    0 comments

  • Bento-grid with HTML and CSS

    #accessibility#bootstrap#ionic#tailwind-css#webflow
    Caleb Abuul•320
    Submitted 7 months ago

    I am somewhat comfortable with my grid layout but managing the content of the grid is where my challenge lies. How can I style grid-container content such that it doesn't over floe it's container

    0 comments

  • Results summary component using HTML and CSS

    #accessibility#pure-css#web-components#webflow#animation
    Caleb Abuul•320
    Submitted 7 months ago

    I am comfortable with my project right now, however, if there is anything I could do better I'd really love to know.

    1 comment
View more solutions

Latest 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 💻👍.

View more comments