Skip to content
OverviewSolutions
36
Comments
16

Bello Ibrahim

@repro123660 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

View more solutions

Latest comments

  • Amiko Elvis•260
    @amikoelvis
    What are you most proud of, and what would you do differently next time?

    I'm most proud of building a fully responsive and accessible newsletter sign-up form with proper form validation and smooth UI transitions using just HTML, Tailwind CSS, and vanilla JavaScript. I paid close attention to matching the design specs and ensuring a clean user experience across devices.

    Next time, I would focus more on improving accessibility further (like keyboard navigation and ARIA roles), and maybe consider adding subtle animations or transitions for a more polished feel.

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

    One of the main challenges I encountered was matching the exact design colors and hover effects from the provided style guide without using a Tailwind config file. Since HSL values aren't supported directly in Tailwind's default utility classes, I had to work around it by using inline styles or approximating with existing Tailwind color classes.

    Another challenge was implementing the hover effect on the button, which required a subtle gradient animation from right to left. I overcame this by experimenting with Tailwind's bg-gradient-to-l, hover: states, and testing different background transition strategies until it visually matched the design.

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

    I would like help with:

    • Improving the gradient hover effect on the submit button to better match the design spec (a smooth darker orange flowing from right to left).
    • Optimizing Tailwind class usage, especially where I had to use inline styles or approximations due to lack of custom configuration.

    Responsive newsletter-sign-up-form using JavaScript and Tailwind CSS

    #tailwind-css
    2
    Bello Ibrahim•660
    @repro123

    Hi, nicely done.

    You can add custom classes in tailwind CSS v4+. Also your roboto font won't work the way it is currently

    In your input.css file: @import "tailwindcss";

    After the above, you can add your custom classes with the @theme variable, like this

    @import "tailwindcss"; 

@theme {
/* for colors */
--color-primary-color: hsl(0, 0%, 100%);

/* for font family */
--font-roboto: "Roboto", sans-serif;

/* for font sizes */
--text-primary-size: ***;
}

    check here for full details https://tailwindcss.com/docs/adding-custom-styles

    From the code in the above input.css file, you can now use the custom classes in your html e.g

    <body class="font-roboto bg-primary-color ...etc"></body>
    Marked as helpful
  • Bello Ibrahim•660
    @repro123

    Great solution. Not really many things to correct here.

    You can center the whole content on the body by:

    body {
    display: grid;
    place-items: center;
}
/* OR */
body{
    display: flex;
    align-items: center;
    justify-content: center;
}

    Also, imagine if the designer told you that there will be more texts in each card, at some screen sizes, the cards will stretch significantly in height. You can make the .card-grid a grid-template-column: repeat(2, 1fr) and same for the grid-template rows too, at some screen sizes, before going to the desktop design.

  • Taophyc•400
    @Taophycc
    What are you most proud of, and what would you do differently next time?

    This was my second javascript challenge on javascript, proud of my work.

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

    I had a little problem with toggling the the rating numbers.

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

    Overall feedback on the project and the code would be helpful.

    An interactive rating component built with html css and javascript

    1
    Bello Ibrahim•660
    @repro123

    Well done man, great stuff!.

    I have an observation though; i can't navigate through the numbers with just my keyboard, using the tab button. That's an accessibility flaw... it would have been more correct using the form & > radio inputs + submit button.

    still, great job

  • Bello Ibrahim•660
    @repro123

    Well done, Blessing. Just a few corrections:

    • Use semantic, landmark elements. All the contents in the div container should be in a main tag

    • The direct children of a ul or ol element must be an or li. In the case in your project, use:

    <ul>
   <li><a href=""></a></li>
</ul>
    • in your assets >>> images folder, remove the space in the image file name. myimage.png or my-image.png or my_image.png, not my image.png
    Marked as helpful
  • P
    Ruben Bardok•180
    @Rubenbard
    What challenges did you encounter, and how did you overcome them?

    i started with tailwind to practice and vanilla javascript and oh boy. the original javascript is in the main.css. it worked. but than also learning tailwind and trying to adjust things and let ai "fix" a problem, all hell broke out, finally after hours of bugfixing i tried a tooltip from flowbite and `i must say that is a nice system. I didn't have the nerve to adjust the mobile design.

    responsive article page with tailwind and Flowbite

    #tailwind-css
    1
    Bello Ibrahim•660
    @repro123

    Well done.

    When the button is clicked and the share options pops up, clicking the button does not close the pop up, i think that is a bug. Also, the social media images should be in <a> tags

    Marked as helpful
  • Bello Ibrahim•660
    @repro123

    Nice work. Some corrections.

    • It is a wrong practice to limit the body to a specific height. Use min-height: 100dvh instead. On a larger project, that height you used on the body will cause bugs.

    • This challenge does not need a media query... However subsequently, if you have to use a media query, they must be in responsive units like rem.

    • Use responsive units for font sizes too. Rem is fine. /* 1 rem = 16px*/

    • finally, also try and use a Modern CSS Reset at the top of your stylesheets. You can check out Andy Bell's Modern CSS reset or the one by Josh Comeau.

    Great job, once more

    Marked as helpful
View more comments