Skip to content
OverviewSolutions
8
Comments
6

Guilherme Costa

@cdGuilhermeBrazil100 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

  • Guilherme Costa•100
    @cdGuilherme

    Great job on your solution! It looks just like the desired design and you did a good job with semantic html too. Just a small pointer:

    Hope this helps. Good luck!

  • Bartosz Dudziak•720
    @bartoszdudziak-dev
    What are you most proud of, and what would you do differently next time?

    I'm proud of my solution with grid-template-areas. Code looks clean and maintainable for me. I feel control over the grid layout in this way.

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

    The biggest challenge was creating responsive grid layout.

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

    I'm still not much confident using semantic HTML. I need to catch up.

    Four Card Feature (SCSS)

    #sass/scss
    1
    Guilherme Costa•100
    @cdGuilherme

    Solution looks really close to the design, well done!

  • Eric•70
    @esurreal
    What are you most proud of, and what would you do differently next time?

    I'm proud of the fact that I'm learning this stuff.

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

    Media queries took a little time to understand. Making the page responsive was the biggest learning curve.

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

    I think I need help with image sizing and keeping everything within the container, but It'll probably come with practice.

    Responsive Product Page Using CSS, HTML, and Media Queries

    1
    Guilherme Costa•100
    @cdGuilherme

    Hi Eric, great job on submitting your solution!

    Here are my suggestions:

    Does the solution include semantic HTML?

    • Good job using the <main> element. This is good for accessibility as it helps screen readers identify a page's "main" section.

    Is it accessible, and what improvements could be made?

    • <grid> and <p3> are not valid HTML elements, instead use a div with a class for the price container and use h2 and h3 elements for the prices.
    • Font sizes must never be inpx as it prevents the font size from scaling with the user's default setting.

    Does the layout look good on a range of screen sizes?

    • The layout breaks on some screen sizes. I suggest removing fixed widths and heights, this is something you should rarely do because components should be able to adapt for different screen sizes.
    • Other than that you did a good job with flexbox for the container, it adapts well when changing from column to row on different screen sizes.

    Is the code well-structured, readable, and reusable?

    Does the solution differ considerably from the design?

    Hope this can be useful! Good luck! 🙏

  • zlatan-cic•90
    @zlatan-cic
    What are you most proud of, and what would you do differently next time?

    I'm most proud of successfully implementing a responsive design that looks great on both mobile and desktop devices 📱💻. However, next time, I would spend more time planning the layout to avoid any last-minute adjustments and ensure a smoother development process 🚀.

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

    One of the main challenges was handling the image display for mobile devices. Initially, I had to place the first image in the body and then use CSS to set it to display: none for desktop and display: block for mobile 📱. I overcame this by leveraging media queries to conditionally show and hide images, ensuring a seamless and responsive design experience 🎨.

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

    I would appreciate help with optimizing the layout for different screen sizes to ensure a more consistent look across devices. Additionally, advice on improving the overall code structure and efficiency would be highly valuable. Any tips on enhancing the user experience and accessibility would also be greatly appreciated. 😊

    HTML and CSS

    1
    Guilherme Costa•100
    @cdGuilherme

    Hi, great job! Regarding accessibility, you can use <section> tags instead of divs to separate different sections of the page and <footer> for the attribution. The use of semantic HTML elements helps to clearly describe its meaning to both the browser and the developer. Hope this helps! 😊

  • Guilherme Costa•100
    @cdGuilherme

    Hey! Nice work on your solution. I like how you make the use of different CSS files to make the code more organized, and I also like the use of semantic HTML.

    Here are my suggestions:

    HTML:

    CSS:

    • Import fonts locally using:
    @font-face {
    font-family: "Inter";
    src: url(../../assets/fonts/Inter-VariableFont_slnt\,wght.ttf);
}
    • The website breaks when trying to zoom too much and you can't see all of the content. This can be fixed by centering the card container using:
    body {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    min-height: 100svh;
}

    And removing the following line from .main__container: height: 100vh;

    But other than that, congratulations on completing this project! Hope this helps 🙏

    Marked as helpful
  • Guilherme Costa•100
    @cdGuilherme

    Hello there!

    Congrats on completing the challenge!

    I've noticed the layout works well on mobile, however the card gets too big on desktop (landscape orientation) because the image grows so much. For this challenge I'd like to suggest using an absolute length width for the QR code container.

    I hope it helps!