Skip to content
OverviewSolutions
3
Comments
10
Refer59
@Refer59

All comments

  • Refer59•190
    @Refer59Posted over 1 year ago

    Hi 🖐, Good work, I'm glad that you are happy with the result you could archieve, maybe from the start things can be hard, but once you get experience through challenges and figuring out how to solve them, you learn by yourself that some methods are easier and faster or how to solve a problem that before you thought you couldn't, is that what the experience by doing things by your own gives to you, and stays with you for the rest of your life.

    Marked as helpful
    0
  • Refer59•190
    @Refer59Posted over 1 year ago

    Good work! Excellent Responsive behavior and good using of that single media query

    0
  • Elisabeth Erkekoglou•180
    @elic4vetSubmitted over 1 year ago

    Hello hackers, here is my solution to the project. What do you think ? Is the page full responsive to you ? Any other tips / suggestions ? Thanks in advance for your help, Kind regards, Elisabeth

    Results summary component

    2
    Refer59•190
    @Refer59Posted over 1 year ago

    Hi 🖐, seems that you have a responsive design issue, the current solution only fits to the desktop requirement, there are many things to improve. I recommend you to:

    • I recommend you to start making the layout from Mobile to Desktop

    • Do a css reset and set body and html 100% height:

    *{
margin: 0;
padding: 0;
}

body,html {
height: 100%
}
    • Set to your div .container.
    .container {
display: flex;
justify-content: center;
align-items: center;
height: inherit; /* equivalent to 100% */
}

    this container will acts like your "page" container, and will automatically center your component to any screen sizes.

    • Avoid using absolute units like px in the children elements of the .container element, instead use %, vw or rem, em, % will let you have a fluid responsive layout. this relaive units reduce the amout of work you have to do saving you from using media queries

    • You can add a different background-color to each element container like div, ul, form, ... see how each element fits to the layout, this will let you see what is going

    • Use browser developer tools to change individual element styles in real time, once you get a result you like, you can copy and paste the applied styles to your actual css file.

    Marked as helpful
    0
  • Diego Fonseca•60
    @Feeshy2Submitted over 1 year ago

    Given my current skill level and work on this project, what should my next steps be? What other technologies or concepts should I explore to continue improving? I have yet to find my specific stack to make my web development journey smooth.

    Age Caculator Made With Haxe, React, and Vite

    2
    Refer59•190
    @Refer59Posted over 1 year ago

    You can try harder challenges, or build a Fullstack project

    1
  • Refer59•190
    @Refer59Posted over 1 year ago

    You posted a Wrong solution 😓

    0
  • Refer59•190
    @Refer59Posted over 1 year ago

    Seems that you are trying to load a no-static image during the runtime, you can put the images in the public folder and change the urls of each image in the json to the public folder to do the approach you are looking, for something like this:

    [
{
"category": "Reaction",
"score": 80,
"icon": "../../public/icon-reaction.svg"
},

//...
]
    0
  • Refer59•190
    @Refer59Posted over 1 year ago

    As @hitmorecode said, is recommendable to do a CSS reset to your global css, after that you can try to wrap the solution inside a container which has the following css code:

    #main-container{
display: flex;
height: inherit;
align-items: center;
justify-content: center;
}

    Also you must add to the global css the following code:

    html, body{
height: 100%
}

    Remove the margin-top and margin-left properties from your .first-card container, and the #main-container will center vertically and horizontally your .first-card automatically to any screen sizes.

    After that you can add a media query for mobile screens to fit the .first-card & #main-container width and height to 100%.

    Marked as helpful
    0
  • Refer59•190
    @Refer59Posted over 1 year ago

    Hi! 🖐 Congratulations on finishing your first challenge.

    As feedback I would recommend you that:

    • If you going to use absolute units(px), only use them in your main container, and then using relative units(%, rem, em) in the elements whose are inside your main container, that will make the layout design way easier and faster for building responsive design

    • Seems that you didn't import the Font set, you can go to google fonts, find the Font name that the Readme file is asking you to use, select the weights and then copy the 2 html tags and paste them inside the <head> tag of your index.html. you will able to use the font family in your css code.

    <link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Hanken+Grotesk:wght@500&display=swap" rel="stylesheet">```
    Marked as helpful
    0
  • Agus Siswanto•70
    @siswantodevSubmitted over 1 year ago

    Hello everyone! 👋

    Finally, I have completed my first challenge submission on this platform.

    Certainly, there were parts that made me a bit uncomfortable when I first started working on it. I had to use Figma to sketch roughly and estimate the sizes of UI elements. Fortunately, the result turned out to be quite close to the provided reference image. Maybe someday I will upgrade to PRO to obtain the Figma file.

    The most challenging part was replicating the gradient effect. I haven't found the exact color settings yet.

    I'm also unsure about the usage of Semantic HTML5 in this project. In the "score" section, should I use an unordered list (ul) or is it sufficient to use just 'div'?

    If you have any suggestions regarding the above points, I would be very happy to hear them!

    Results summary component using SASS/SCSS

    2
    Refer59•190
    @Refer59Posted over 1 year ago

    You usually use UL when you gonna put inside a list of uknown number of elements that are similar, each one shares the same structure but different information.

    <ul>
<li>
<span class='left-side'><img src="user-456.png" alt="user-image" /></span>
<span class='right-side'>Username-1234</span>
</li>
<li>
<span class='left-side'><img src="user-456.png" alt="user-image" /></span>
<span class='right-side'>Username-456</span>
</li>
<li>
<span class='left-side'><img src="user-789.png" alt="user-image" /></span>
<span class='right-side'>Username-789</span>
</li>
</ul>

    As you see, the all follows the same content format, but the information content is diferent. You can actually use Div or UL, but as good practice you follow the this criteria.

    Marked as helpful
    1
  • Refer59•190
    @Refer59Posted over 1 year ago

    You just posted a Solution from other Challenge

    Marked as helpful
    0