Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Log in with GitHub
OverviewSolutions17Comments21

All comments

  • Simon• 100

    @Oldault

    Submitted

    -I couldn't find a way to make the desktop sized webpage responsive, so I improvized and made the mobile version expand; instead of making large webpage shrink. -I had a hard time figuring out how to change the picture based on the size, so i just used the desktop version of the picture on the mobile style. -I still don't know how to change that grey picture to a different colour using code. So i went ahead and modified it using PhotoShop (+Added bonus to the girls laptop) -The webpage isn't responsive when you higly alter the height of the webpage. It can support the width changes but when you start converting the heigh, it doesn't adjust. -I find that the margin is way too big between ~500-350px width, and i dont know how to change it. -It isn't responsive past 250px width for some reason.

    Neon Pink responsive stat preview card

    2

    Chevalier Antoine• 670

    @SeyBoo

    Posted

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

    @SeyBoo

    Posted

    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

    0
  • Chevalier Antoine• 670

    @SeyBoo

    Posted

    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

    1
  • Chevalier Antoine• 670

    @SeyBoo

    Posted

    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

    1
  • Chevalier Antoine• 670

    @SeyBoo

    Posted

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

    0
  • Chevalier Antoine• 670

    @SeyBoo

    Posted

    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 !

    1
  • Chevalier Antoine• 670

    @SeyBoo

    Posted

    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

    0
  • Michael• 35

    @Mekes1670

    Submitted

    If there are any cleaner ways to do this or if I have made any silly mistakes I am new and would love to learn better ways!

    Three Card Column solution

    1

    Chevalier Antoine• 670

    @SeyBoo

    Posted

    Hey 👋!

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

    Have a nice day!

    1
  • Chevalier Antoine• 670

    @SeyBoo

    Posted

    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 !

    1
  • Chevalier Antoine• 670

    @SeyBoo

    Posted

    Hello 👋 great solution !

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

    0
  • Chevalier Antoine• 670

    @SeyBoo

    Posted

    Hey 👋 great solution !

    I will just suggest you one amelioration

    • Add h and p tags on your html.

    Have a nice day 👋 !

    1
  • Chevalier Antoine• 670

    @SeyBoo

    Posted

    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 !

    0
  • Chevalier Antoine• 670

    @SeyBoo

    Posted

    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 !

    0
  • Chevalier Antoine• 670

    @SeyBoo

    Posted

    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 👋 !

    0
  • Chevalier Antoine• 670

    @SeyBoo

    Posted

    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 ! 👋

    0
  • Chevalier Antoine• 670

    @SeyBoo

    Posted

    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 !

    0
  • Chevalier Antoine• 670

    @SeyBoo

    Posted

    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 !

    0
  • Clint Maxwell• 80

    @AntonioHouTX

    Submitted

    I have two related questions:

    -Was it better for me to have created two separate stylesheets for both the mobile and desktop versions of this site, or would it have been better to have one stylesheet with two media queries in it? -Since I did the former option and not the latter, did I get the HTML stylesheet reference right in the "min-width" and "max-width" part?

    HTML and CSS file using CSS Grid and separate stylesheets

    2

    Chevalier Antoine• 670

    @SeyBoo

    Posted

    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 !

    1
  • Chevalier Antoine• 670

    @SeyBoo

    Posted

    Hello !

    • You should use anchor tag so your solution is okay :).

    Have a nice day !

    1
  • Chevalier Antoine• 670

    @SeyBoo

    Posted

    Hello, you did a amazing first solution !

    • Your code is globaly well organized

    • I see that you done several css files i suggest you to check out SCSS i thinks you would like it.

    Have a nice day and keep posting amazing solution !

    Marked as helpful

    1
  • Chevalier Antoine• 670

    @SeyBoo

    Posted

    Hello 👋 great solutions!

    I will suggest you some little improvements you can do.

    • Center the content in center for mobile version
    • These button should be anchor tag

    I hope this help 🙏, Nice Work !

    1