Skip to content
OverviewSolutions
9
Comments
3
P
Kevin
@zs-kev

All comments

  • Dimitrios Dristellas•590
    @dimitrisdrSubmitted about 1 month ago
    What are you most proud of, and what would you do differently next time?

    I am proud for using react and vite for completing this project. I think that this challenge helped me to understand how the react framework works.

    What challenges did you encounter, and how did you overcome them?

    The project structure that Vite provided me with is something that I wasn't able to fully understand. It took me a lot of time to understand why I could display the images to the production environment.

    What specific areas of your project would you like help with?

    I would like to understand better the folder structure that vite provided me with. I wasn't sure where should i actually put the images that in order for vite to find the correct paths. I did it manually be replacing the urls with absolute paths.

    results-summary-component-main-react

    2
    Kevin•250
    @zs-kevPosted about 1 month ago

    Nicely done Dimitrios.

    When images are placed in the public folder, you will need to access them like you did, via absolute paths. This is useful for static assets that won't change or need to be referenced globally.

    If you want Vite to process the images and use imports, then you need to put the images under your src folder. So you could put them in src/assets/images. In this case, you can then import the images and use them where you want them, like so:

    import RandomImage from './assets/images/image.png';

const RandomComponent = () => {
  return <img src={RandomImage} alt="This is just a random image" />;
};
    Marked as helpful
    0
  • Kevin•250
    @zs-kevPosted over 1 year ago

    Hey Samyak317

    Great attempt at this challenge, you did a great job.

    There a few things though that I would suggest taking a look at:

    1)I would look at wrapping your div_1 and div_2 into one container, and apply the border radius to that, and then apply that same border radius to your div_1 to give it a closer look to the design. The reason I would suggest doing it this way is because if you look at the box shadow on the design, the shadow comes from the whole component, and not just the right side.

    2)With regards to the shadow, I would play around with the spread and some of the other variables to give it a bit more of a softer look. As well look at playing around with the color, as if you look at the design, the shadow does have a slight blue tinge to it. If you need some help with it, there are some fantastic tools out there which will visualise and generate the css for you: https://www.cssmatic.com/box-shadow

    3)This is just something to be aware of for future, though you could change it here as well. I would avoid using class names like div_1 and div_2, as when looking at the HTML it can be obvious as to what is what, but when you look at the CSS, it can become confusing as to what div_1 is referring to. With a little project like this its not the end of the world, but as you start to get to bigger and bigger projects, this could become very confusing. So I would recommend looking at what that div holds, and then naming it accordingly...so like div_1 could be result-container, and div_2 could be summary-container...hope this makes sense.

    4)You have aligned items in each container to be centered horizontally, but I would investigate aligning them vertically as well. I see you are using flexbox, so I would investigate how you could possibly align everything vertically with that.....or how you could spread the content out with space-between - just a little flexbox hint there ;)

    5)With the 76 of 100, you should be able to get that looking like the design without using absolute positioning. Without giving the answer outright, look at how you achieved the summary results, and play around with your markup and styling to see if you can't get it without position: absolute.

    If you can get those few things just right, you'll be pretty close to the design. Well done though, you have done great job thus far.

    Marked as helpful
    1
  • Kevin•250
    @zs-kevPosted over 4 years ago

    To make this project, I would recommend you look into CSS-grid or flexbox to make this project responsive.

    To make your current project responsive, you will need to use media queries to make adjustments as the browser gets smaller.

    If you are referring to the background border that has all the little colorful graphics, that's not part of the challenge.

    1