Skip to content
OverviewSolutions
9
Comments
12

Remigiusz Czarnecki

@remmjiGdynia, Poland380 points

Hi there, I'm Remy, a self-taught front-end developer with a passion for creating beautiful and responsive web applications. I started my coding journey about six months ago, and since then, I've been fully immersed in learning everything I can about front-end development.

I’m currently learning...

After taking a good grasp on the basics of HTML, CSS, and JavaScript, I'm now focused on practicing React.

Latest solutions

View more solutions

Latest comments

  • Remigiusz Czarnecki•380
    @remmji

    Hello 👋

    As you may have noticed, your design is quite different from the one provided by the challenge. Here are some suggestions for improvement:

    💡 Consider using a proper font family to enhance the visual appeal of your design.

    💡 To create a design that's more similar to the challenge, try opening the design image in a browser and setting it up on dev tools at the same resolution as your project.

    💡 Don't forget to make your design responsive! Use relative units such as vw, vh, and % instead of hard coding everything. This will help ensure that your design looks great on different devices and screen sizes. I would strongly suggest to use vw for everything that has to have defined size.

    Hope that will be helpful 💪

    Marked as helpful
  • Remigiusz Czarnecki•380
    @remmji

    Hello 👋

    There are few simple ways to center a div:

    💡Flex:

    .container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

    💡Grid:

    .container {
  display: grid;
  place-items: center;
  height: 100vh;
}

    💡Positioning:

    div {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

    In regards to your second question. Flexible layouts like Flexbox and CSS Grid can make it easier to create responsive designs that work well on different screen sizes and devices. Using relative units like vw, vh, and % instead of absolute units like px or em can also help ensure that your designs remain responsive.

    Additionally, it's important to keep in mind that HTML is designed to be responsive by default. When building a website or application, it's our responsibility as developers to ensure that our code and styles support and enhance this responsiveness, rather than hindering it. By using the appropriate units and layouts, we can build designs that are flexible and adapt to different screen sizes, rather than being rigid and difficult to use on smaller screens.

    Hope those tips will help you :)

    Marked as helpful
  • Remigiusz Czarnecki•380
    @remmji

    Hello there 👋

    In this particular project, using media queries may not be necessary as the card width is only 320px, which can be hard coded (fonts too) and will fit on most mobile screens and match provided by challenge design.

    Other than that it is best practice to use media queries even for small screens. The reason for that is mobile-first approach so the project is optimized for smaller screens which we scale up later on.

    And yeah Google recommends using responsive design with media queries to make sure your website is mobile-friendly, which can improve your search engine rankings and visibility.

    Hope this will be helpful :)

    Marked as helpful
  • Remigiusz Czarnecki•380
    @remmji

    Hello kiyooteru 👋

    In regards to improving your code, I would suggest a few things:

    💡 Center your card using flex:

    .flex-container { display: flex; justify-content: center; align-items: center; height: 100vh; }

    💡 Hard code the width of the card to match the design, even on mobile as its width is only 320px.

    💡 Use your developer tools to compare your design with the design provided by the challenge on the same resolution.

    I hope those little tips will be helpful :)

    Marked as helpful
  • Remigiusz Czarnecki•380
    @remmji

    Hello there! 👋

    💡In regards to your question about styling screens, I would recommend avoiding hard coding font sizes. Instead, try to use one measurement for everything and stick with it. Personally, I prefer to use vw for everything to get the best results. Additionally, you can use proper media queries around 50em width to adjust the layout as needed. This will help ensure that your website looks good on screens of various sizes.

    💡One thing to note is that your project doesn't currently have a lightbox, which could be a nice addition to mimic an e-commerce site. It's not very hard to implement, and it would add a great deal of functionality to your project.

    💡Another suggestion I have is to position the cart window near the cart icon. To achieve this easily, you can give the parent element a position of relative and the cart window a position of absolute.

    I hope these tips will help you tune up your project ;)

    Marked as helpful
  • Remigiusz Czarnecki•380
    @remmji

    Hello there! 👋

    Your project looks really good, and I really like the animation on theme switcher 👌. The only thing I would suggest changing is the "center" div on the detailed page. While the countries are changing, the text appears to jump around a bit. To prevent that i personally used grid on those two text columns 💡.

    Marked as helpful
View more comments