Skip to content
OverviewSolutions
25
Comments
13

JoyObaidu

@JoyObaiduNigeria330 points

I’m Joy Obaidu, a front-end developer with 3+ years of experience building responsive websites using React, Tailwind CSS, and Webflow. I help startups, small businesses, and creators turn ideas into high-performing digital products.

I’m currently learning...

Frontend web development

Latest solutions

View more solutions

Latest comments

  • JoyObaidu•330
    @JoyObaidu

    The layout looks good Nice one, we both used tailwind css.

  • James•120
    @fivetailsdevelopment
    What are you most proud of, and what would you do differently next time?

    I was happy with how this turned out, especially figuring out how to change the title colour on hover to match the coloured line at the top of the container.

    There is probably be a better way to reduce the amount of code used.

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

    No major issues, other than figuring out the right size to use without Figma files.

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

    None for this challenge.

    Four Card Feature with animated hover

    1
    JoyObaidu•330
    @JoyObaidu

    Nice One even without figma👍

  • P
    Srijan Manandhar•450
    @srijanss
    What are you most proud of, and what would you do differently next time?
    • I got to learn about the css transition, transform and transform-origin property.
    • I also got to learn about how to use CSS borders to create triangle shapes.
    • I learned how to add event listeners and toggle share links block based on user interactions.
    • I've also used window.innerWidth to decide on which share links styles to use for which screens. And update the viewPortWidth variable based on window resize so that screen size is updated and corresponding share link block is shown.
    What challenges did you encounter, and how did you overcome them?
    • managing styles for popup item in both desktop and mobile layout was a bit challenging
    • I've used position property along side some calc() functions to make the popup work
    What specific areas of your project would you like help with?

    Any feedback and comments are welcome.

    Article preview component with interactivity using JS

    #accessibility#vite
    1
    JoyObaidu•330
    @JoyObaidu

    The layout looks good and I also learned from your code

  • JoyObaidu•330
    @JoyObaidu

    Your approach to the styling is okay

  • Oluwafemi Kolade•100
    @Mercy1024
    What specific areas of your project would you like help with?

    Any tips on improvement would be appreciated

    Social-Link-Profile

    #accessibility
    3
    JoyObaidu•330
    @JoyObaidu

    It includes semantic html and it is accessible. Keep it up 👍😊The layout looks good on a range of screen sizes

  • PhilippeItsMe•130
    @PhilippeItsMe
    What are you most proud of, and what would you do differently next time?

    Flexbox and grid and getting easier for me (not easy but not as hard as before) So it's cool

    I used the clamp(0.9em,0.4em + 1vh,1.1em); solution to make my font-size growth with the vh of the page

    Not so seduce by the function for the moment.

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

    To put in place the grid and to over come the issue of the rounder corner that i put first on the image and then on the container (

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

    I would like to have my font-size increasing not only when I increase the height of my page but also when I increase the widht of the page. A 2 directions actions.

    Would be great to have your insight on this one

    Second issue : the space between the button and the bottom of my container is increasing when a push live my code with gitup but not when I dont it with Visual Studio Code, any ideas why ?

    Parfum Challenge

    #accessibility
    2
    JoyObaidu•330
    @JoyObaidu

    To achieve a font increase according to the width and height of the page, you can solve that using this :

    1. font-size: calc(var(--base-font-size) + var(--scale-factor) * (100vw + 100vh) / 2);

    For your second question : Ensure all changes are committed and pushed to the repository. Check for case sensitivity in file names and paths. Different default styles applied by the browser.

    Keep Up the good work 👍😊

View more comments