Skip to content
OverviewSolutions
8
Comments
3

Bálint Balázsi

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

Latest solutions

View more solutions

Latest comments

  • Bálint Balázsi•260
    @oroszlanolo

    Hi, congratulations on completing your challenge. I have some suggestions for you: Even though you have implemented both the desktop and mobile version of the design, I would not say your page is responsive, since it works for these two specific widths only. To create a responsive layout, I have some basic tips:

    • Do not specify a fixed width to your outer container. Your outer most container should have a width of 100%
    • Even if you don't use 100%, you still can use percentage instead of fixed pixle sizes.
    • You can use dvh and dvw units for your sizes. https://dev.to/frehner/css-vh-dvh-lvh-svh-and-vw-units-27k4
    • In some cases you can specify a max-width to your container, so it won't grow too wide on large screens
    • on small screen sizes, Instead of giving an explicit width to your container (like you did with the input for example) give it a width of 100% and a padding to your outer container
    • use box-sizing: border-box on everithing, it will make your life easier
    • you could've used transform translate on the -50% Y axes as well for the address details container So basicly try to use fix sizes only for paddings, margins and font sizes.

    I hope I was useful, good luck for your following challenges :)

    Marked as helpful
  • Bálint Balázsi•260
    @oroszlanolo

    Hi, congratulations on completing your challenge!

    I have some suggestions for you: First of all, I recommend structuring your code to different files. Now the index.html contains everything, but ideally, you would want to have a separate css and a js file. I can see, that the layout could be improved still. I have some suggestions for you:

    • Add a max-width to your instead of using different margins at different screen sizes. You could simply set a margin of like 2rem, and add a max-width of like 800px. This is a simple solution, and will work even on some ultrawide monitors.
    • I can see, that you are using font-weights, but they seem to differ from the design (your result text is way too thin) I think you should look into that.
    • Use bigger btn on big screen sizes. I like how you have set up a grid for the main layout

    I hope some of this was helpful. Have a nice day! :)

    Marked as helpful
  • Opeoluwa•330
    @Opeoluwa-Ogunlaja

    RPSLS

    #sass/scss
    1
    Bálint Balázsi•260
    @oroszlanolo

    Hi! Even though it is a nice solution, I would recommend two things that are not much effort, but would still improve the user experience greatly:

    Add cursor: pointer; to your buttons, so the user knows it is clickable. Also, you can make it pop a bit just by adding the following to the game buttons:

    .your-btn:hover {
transform: scale(110%);
transition: transform 250ms;
}

    The other thing is the big circle shadows around the winner. You cannot use colors that match the backgrounds, since the background is a gradient. Just use translucent colors using rgba().

    I hope I did help :)

    Marked as helpful