Skip to content
OverviewSolutions
17
Comments
21
Chevalier Antoine
@SeyBoo

All comments

  • Chevalier Antoine•670
    @SeyBoo

    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);
}
  • Chevalier Antoine•670
    @SeyBoo

    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
  • Chevalier Antoine•670
    @SeyBoo

    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
  • Chevalier Antoine•670
    @SeyBoo

    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
  • Chevalier Antoine•670
    @SeyBoo

    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 ! :)

  • Chevalier Antoine•670
    @SeyBoo

    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 !

  • Chevalier Antoine•670
    @SeyBoo

    Hello !

    Great solution i agree with Hardy, i will just suggest you some other improvement you can do :

    • Search how to center vertically your components
    • Make some space around when we are on mobile (container { width: 90%; margin-top:10vh; margin-bottom:10vh}

    A great solution overall your code is well typed, well done !

    Marked as helpful
  • Chevalier Antoine•670
    @SeyBoo

    Hey 👋!

    Amazing solution one little improvement you can do is make your button a anchor tag.

    Have a nice day!

  • Chevalier Antoine•670
    @SeyBoo

    Hello 👋 !

    You did a very good solution nice work ! I just suggest you one little things:

    • Make your button a anchor tags.

    Keep doing amazing solution like this !

  • Chevalier Antoine•670
    @SeyBoo

    Hello 👋 great solution !

    Everything look good you can try to make it responsive on mobile.

  • Chevalier Antoine•670
    @SeyBoo

    Hey 👋 great solution !

    I will just suggest you one amelioration

    • Add h and p tags on your html.

    Have a nice day 👋 !

  • Chevalier Antoine•670
    @SeyBoo

    Hello 👋 !

    Your code is pretty well organized well done !

    • I will just suggest you to try to make the website responsive on mobile

    Have a nice day great work !

  • Chevalier Antoine•670
    @SeyBoo

    Hello 👋 congrats for your first challenge !

    I suggest you things you can update/learn

    • Make your website responsive using media queries and responsive units.

    Have a nice day keep doing !

  • Chevalier Antoine•670
    @SeyBoo

    Hello 👋 great solution!

    I can do little change

    • Try to remove the bottom scroll bar on mobile

    • Reduce a little bit the size of the icon

    Overall it's pretty great ! Have a nice day 👋 !

  • Chevalier Antoine•670
    @SeyBoo

    Hello 👋 great solution!

    One thing you can improve:

    • Remove the bottom scroll bar on mobile version because when we scroll down the content move.

    Hope this help have a nice day ! 👋

  • Chevalier Antoine•670
    @SeyBoo

    Hello you did a very good solution !

    You can improve your background-image by adding this in your body !

    background: url("./images/bg-pattern-top.svg"), url("./images/bg-pattern-bottom.svg" no-repeat);

    background-position: right calc(50vw + 15%) bottom calc(65vh - 15vw), left calc(41vw + 25%) top calc(72vh - 10vw);

    Have a nice day !

  • Chevalier Antoine•670
    @SeyBoo

    Hello congrats for posting your first solution !

    I suggest you somme change you can do :

    • The patern should be a background: not an img.

    • Make the website responsive because the scroll bar appear.

    Have a nice day and good luck !

  • Chevalier Antoine•670
    @SeyBoo

    Hello !

    • You should start the design Mobile or Desktop first and add media queries when it's not working.

    • One or two files is as you prefer but if you like cut your code in multiple files i will recomend you SCSS.

    I hope this help have a nice day !