Skip to content
OverviewSolutions
10
Comments
8
Paweł Pohl
@Pawel1894

All comments

  • Paweł Pohl•390
    @Pawel1894

    Hey,

    I would suggest for you to start thinking about every project as it would be a big scalable project. This approach is going to improve your coding skills and make it more readable. s Css selectors like this:

    container p 
or
section .picture1 img

    are considered really bad practice in most cases and to maintain. Same with classes like .picture1 it does not really say much and isn't reusable. For start look up for some common css naming methodologies like BEM or Cube. Personally I find BEM really great for start and then moving to cube which is more focus on utility classes.

  • Paweł Pohl•390
    @Pawel1894

    Hey, your app is really good looking!

    Some issues i found:

    • filter by region is not working
    • never user react context for fetching data like this it makes your app super slow.
    • Take advantage of next.js features - countries data does not change frequently so you can use getStaticProps to prerender them on the build time and make your app loading smoothly.
    • search for a country works much better without sending api, filtering list of object with length of ~250 is much faster so I would recommend doing this on client side

    You can check out my solution i also made it in next.js and i got 30ms loading for a homepage.

  • Paweł Pohl•390
    @Pawel1894

    Hey! Nice job ;)

    I have an question about NextJS, I'm thinking about learning it but i don't get one thing is it front-end framework or fullstack framework?

    Thx!

  • Paweł Pohl•390
    @Pawel1894

    Hey ;)

    Here is some feedback from me

    • You are missing images
    • add shadow for button, there is a lot online tools that helps you create box-shadow
    • always wrap your html in main tag and frontend mentor attribution to footer tag it is good practice and makes your website easier to read for search engines
    • I would recommend you to avoid setting style using tags like this .container h1 it can provide issues with specificity in bigger projects and usually makes your classes not reusable. I would focus on creating utility classes for stuff like text color, bg color, flex, cursor pointer etc. Check out BEM methodology. With these approaches you can already make good habits to write your css and make your life easier in future bigger projects.

    Overall really good solution! With photos would be almost the same.

    Marked as helpful
  • Paweł Pohl•390
    @Pawel1894

    Great job! It is working really nice.

    I have one suggest, I would add overflow-x on screen element. I think it is better UX than screen growing up in height when result is long.

  • Paweł Pohl•390
    @Pawel1894

    Hey! Great job finishing this challenge.

    Here is some feedback from me

    • It is important for search engines to keep correct html syntax. You should put your section inside <main></main> tags and footer inside <footer></footer> tags

    • To get image looking simillar to frontend mentor design i would recommend you changing it to background-image instead of <picture>. Then instead of using flex just use grid and make it 2 columns od desktop resolutions, it will automatically adjust image size to height of content on the right side.

    • Give it lower max-width so it won't be that big, and work a bit on font-sizes and bigger spaces between elements.

    If you need some help you can always dm me on discord Paaaweł#7660 or lookup my solution for this project I think it is very close to design.

    Marked as helpful
  • Paweł Pohl•390
    @Pawel1894

    Hey, i have some small tips for you to get closer to finishing this project.

    • I would recommend you doing very easy first step validation. in your function

    function changeStep(step)

    You can check if step is equal to 1 if yes then check if all required inputs contains value. Check each of them separately and if validation isn't fulfilled then for example change color of this input border to red and after use setTimeout function to bring it back to original color after for example 1 second.

    If you want some more detailed help feel free to contact me on my discord Paaaweł#7660

  • Paweł Pohl•390
    @Pawel1894

    Hey, i have one little suggestion for first step validation. I think it's better UX to let user write and then inform later if their input is invalid. There if i just click to first input to start writing my name it is already yelling at me that this field is required. Maybe try to set some kind of flag to check if field was changed? onBlur event or something.

    Marked as helpful