Skip to content
OverviewSolutions
36
Comments
16
Bello Ibrahim
@repro123

All 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
  • 𝓛𝓮𝓸𝓼𝓶𝓪𝓻𝓽•80
    @leo-smart7
    What are you most proud of, and what would you do differently next time?

    Really enjoyed working on this project, it helped me test out level on CSS.

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

    I encountered a bit challenge during the creation of the social link buttons, I had to make research to figure how to get it done.

    Social link profile using HTML and CSS

    1
    Bello Ibrahim•660
    @repro123

    Well done on completing the challenge. Just a few observations:

    • Make sure you start each project in a different folder, don't put all your projects in one folder

    • Use the DRY (Don't Repeat Yourself) principle in your CSS. You have many margin: 0; and padding: 0; in multiple places. You can use:

    * {
margin: 0;
padding: 0;
}

    • brings me to my third point. Try and use a modern CSS reset before your styles in your CSS file. Check out Andy Bell or Josh Comeau's CSS resets

    • there are too many combinators. Using just a CSS class will be fine.

    • avoid using px for font size or for media query. It's bad for responsives.

    Nice job, once more

    Marked as helpful
  • Khai•80
    @khlv2219
    What are you most proud of, and what would you do differently next time?

    I didn't have much experience in grid-layouts but could master this challenge almost without problems.

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

    Sizing img elements. At first, I used percentage units. Then, I saw that if the screen width gets smaller the image looks very weird. So, I used rem-unit instead.

    Testimonials grid section challenge

    1
    Bello Ibrahim•660
    @repro123

    well done

  • Bello Ibrahim•660
    @repro123

    well done

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

    I really enjoyed this one. good challenge

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

    responsiveness always takes time

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

    overall feedback on the project

    A responsive landing page built with HTML and CSS

    3
    Bello Ibrahim•660
    @repro123

    Well done mate. I had fun doing this when i did this too because i learnt several new things.

    One thing i'd correct is, that <section class="nav-bar"> should actually be a header.

    Nicely done, once more.

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

    It was an exciting challenge, I had fun throughout the journey

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

    no problems

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

    Overall feedback on the challenge

    A responsive clipboard landing page built with HTML and CSS

    2
    Bello Ibrahim•660
    @repro123

    Well done. Just have a few comments to make:

    • Avoid using px for font sizes and media-queries. Use responsive units instead like rem or em

    • Try and use a modern CSS reset at the top of all your CSS files. You can search for the one by Andy Bell

    • There's no hover for the call-to-actions

    • The Download for iOS and Mac should be in a tags, not button tags

    -On some screen sizes(between 540 and 600px,between 900 and 100px), the page is not very responsive because of the media-queries you used.

    -the footer should also have a background colour

    Well done once more

    Marked as helpful
  • davilucas•80
    @Davilucca22
    What are you most proud of, and what would you do differently next time?

    Do que você mais se orgulha? aprendi a lidar com heranças e diferentes tipos de estilização

    Recipe Page

    1
    Bello Ibrahim•660
    @repro123

    nicely done

  • Bello Ibrahim•660
    @repro123

    well done

  • Zaitsev Artem•50
    @Aldeimeter
    What are you most proud of, and what would you do differently next time?

    Next time I will use relative units for typography to adjust it to different screen sizes better

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

    I would like to understand better how to make typography more responsive

    Blog preview card with html and css

    2
    Bello Ibrahim•660
    @repro123

    kudos

  • Bello Ibrahim•660
    @repro123

    nicely done

  • Bello Ibrahim•660
    @repro123

    Nicely done challenge! Your solution looks great.

    I have some suggestions however:

    • Don't limit the width of the body tag.
    • Use min-height: 100vh; instead on the body.
    • You may also add padding on the body
    • Use width: 100%, and a max-width: 20rem(thats 320px) on the .card instead

    Otherwise, a lovely work.