Skip to content
  • Unlock Pro
  • Log in with GitHub
Profile
OverviewSolutions
17
Comments
21

Chevalier Antoine

@SeyBooFrance670 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!

I’m currently learning...

Learning on the go ig ?

Latest solutions

  • advice-generator vue.js

    #vue#axios

    Chevalier Antoine•670
    Submitted over 3 years ago

    0 comments
  • Todo application built with Next.js, Redux Toolkit, TailwindCSS

    #next#tailwind-css#typescript#redux-toolkit

    Chevalier Antoine•670
    Submitted over 2 years ago

    0 comments
  • FullStack Product-feedback-app

    #express#react#axios

    Chevalier Antoine•670
    Submitted over 3 years ago

    1 comment
  • space-tourism-website using next.js


    Chevalier Antoine•670
    Submitted over 3 years ago

    0 comments
  • bookmark-landing-page


    Chevalier Antoine•670
    Submitted over 3 years ago

    0 comments
  • Rock Paper Scissors


    Chevalier Antoine•670
    Submitted almost 4 years ago

    1 comment
View more solutions

Latest comments

  • Simon•100
    @Oldault
    Submitted about 3 years ago

    Neon Pink responsive stat preview card

    2
    Chevalier Antoine•670
    @SeyBoo
    Posted about 3 years ago

    Hi Monkey Man,

    Quick note but 250 px is very small and no modern phone will every have such a small screen so don't worry about it.

    For the background image, you can add a color to it this way, background: rgb(126, 85, 85, .5) url(http://placekitten.com/320/160); You just need to slow down the opacity of the color

    And to change the picture based on the size you have two way

    • Using img tag :
    // HTML
    
    <img src="#" alt="#" class="desktop" />
    <img src="#" alt="#" class="mobile" />
    
    // CSS 
    
    .desktop {
    display:none;
    }
    
    @media (min-width:1024px) {
    .mobile {
    display:none;
    }
    .desktop {
    display:block;
    }
    }
    
    • Background Image
    //CSS
    background: rgb(126, 85, 85, .5) url(http://placekitten.com/320/160);
    
    @media (min-width:1024px)
    {
    background: rgb(126, 85, 85, .5) url(url for dekstop);
    }
    
  • Icekid35•260
    @Icekid35
    Submitted about 3 years ago

    Interactive comment section

    #accessibility#react#fetch
    2
    Chevalier Antoine•670
    @SeyBoo
    Posted about 3 years ago

    Hello ! Bravo for your first react solution ! For best practice you could :

    • Create a file for every component that you created so it's easier to read
    • The App file is not a component so i shouldn't be in the components folder
    • Instead of using style={{display:show ? "":"none"}} you should look for conditional rendering (I was doing the same mistake ahah)

    https://reactjs.org/docs/conditional-rendering.html

    const [showModal, setShowModal] = useState(false);
    
    {showModal ? <Modal />  : null }
    <button onClick={() => setShowModal(!showModal)}>Display modal</button>
    

    Have a nice day :)

    Marked as helpful
  • Eric Chua Zheng Hua•60
    @bigmac369
    Submitted about 3 years ago

    react-js-advice-generator-app

    #react#tailwind-css
    1
    Chevalier Antoine•670
    @SeyBoo
    Posted about 3 years ago

    Hello !

    Bravo for your first solution using React.

    For best practice i will suggest you to

    • Save your API response into an Array
    • Using a components for the card
    • Using meaningful name for the Image (Can help when working on large project or with a Team)

    You could also try to make it more responsive by starting to make it mobile first. A lot of website are built Mobile First nowadays cause the majority of the traffic is on mobile device.

    Have a nice day :)

    Marked as helpful
  • chapes111•50
    @chapes111
    Submitted over 3 years ago

    Learning flex box

    1
    Chevalier Antoine•670
    @SeyBoo
    Posted over 3 years ago

    Hello nice solution your code is clean and everything work well !

    Just a small design update you can do is add : transform: scale(.9); on the Mobile Section it will be cleaner in my opinion and you don't have a lot of code to change using scale.

    Have a nice day :)

    Marked as helpful
  • RUTVIK-SANATHARA•190
    @RUTVIK-SANATHARA
    Submitted over 3 years ago

    nft-preview-card-component-main

    1
    Chevalier Antoine•670
    @SeyBoo
    Posted over 3 years ago

    Hello nice solution.

    I will suggest you some things you can improve on your project.

    • Make the Design "More Responsive" for the Tablet + More center on the Desktop.
    • Some way you can do that :
    • Your container change based on the view width of the users, so the img should also (if not it will not be centered)

    Have a nice day ! :)

  • Muhammad Zubair•50
    @iAmZubair00
    Submitted almost 4 years ago

    Social Media Dashboard built with HTML, CSS and Sass, and JS

    1
    Chevalier Antoine•670
    @SeyBoo
    Posted almost 4 years ago

    Hello great solution i love the animation that you provide it's simple but add a lot to the website.

    I suggest you some point that you can improve :

    Some visual improvement :

    • Maybe add a max-width on the main element because on larger screen we see 2 row , one with 5 box and one with 3 box.
    • Add a height: 100vh; on the container element so that i can take the full height of the screen.

    JavaScript improvement:

    • A easier way to do the toggle is just to add the class 'light' in the body element.

    For the SCSS part your code is very well cut and organised and seem well typed so well done.

    A overall great solution keep going !

View more comments
Frontend Mentor logo

Stay up to datewith new challenges, featured solutions, selected articles, and our latest news

Frontend Mentor

  • Unlock Pro
  • Contact us
  • FAQs
  • Become a partner

Explore

  • Learning paths
  • Challenges
  • Solutions
  • Articles

Community

  • Discord
  • Guidelines

For companies

  • Hire developers
  • Train developers
© Frontend Mentor 2019 - 2025
  • Terms
  • Cookie Policy
  • Privacy Policy
  • License

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Beta Member

This badge is a shoutout to the early members of our community. They've been around since the early days, putting up with (and reporting!) bugs and adjusting to big UX overhauls!

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub