Skip to content
OverviewSolutions
3
Comments
5
NguyenTaiAnh
@NguyenTaiAnh

All comments

  • NguyenTaiAnh•30
    @NguyenTaiAnhPosted 24 days ago

    yeah, i know

    0
  • NguyenTaiAnh•30
    @NguyenTaiAnhPosted 24 days ago

    carefully review the size of each element to ensure it matches the Figma design more accurately.

    0
  • NguyenTaiAnh•30
    @NguyenTaiAnhPosted 24 days ago

    First, you should separate the CSS into an external file to make the code cleaner and easier to manage.

    Second, carefully review the size of each element to ensure it matches the Figma design more accurately.

    Third, consider applying the "Landmark One Main" rule for better optimization.

    Fourth, make sure to add meaningful alt text for images, and include a fallback font in your font-family declaration to improve your website's performance and accessibility.

    0
  • NguyenTaiAnh•30
    @NguyenTaiAnhPosted 25 days ago

    Hey Marcos Travaglini,

    Thank you so much for your kind words and valuable feedback!

    I really appreciate you pointing out the accessibility and semantics improvements, especially the suggestion to use <footer> instead of a <div>. That makes total sense!

    Also, your recommendation to use Flexbox for centering instead of relying on margins is super helpful—I'll definitely apply that technique in future projects. And thanks for the reminder about display: block for images to avoid unnecessary white space!

    I forgot to include reset CSS and box-sizing: border-box—my mistake! Thanks for pointing it out and reminding me. I'll make sure to apply them properly in the future.

    Regarding the method for centering content, I noticed that using display: flex in the body is a great approach, but I also know that display: grid with place-items: center or other techniques can achieve similar results. I’m curious—what makes Flexbox the best choice in this case? Would love to hear your thoughts on this! 😊

    Your feedback really helps me grow as a developer

    Thanks again! 😊

    1
  • P
    Marvin•50
    @str320Submitted 25 days ago
    What are you most proud of, and what would you do differently next time?

    Styling & Layout CSS Reset: Applied a basic reset to remove default browser styles. Design System: Defined CSS variables (:root {}) for colors, font sizes, and spacing for maintainability. Container Styling: Styled the .container with padding, background color, and border radius. Typography: Used system fonts and adjusted font size, weight, and line height for readability.

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

    Centering the Card Set height: 100vh; on <main> to take up the full viewport. Used Flexbox (display: flex; justify-content: center; align-items: center;) to align .container in the center.

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

    Hard time to make it work in different screen sizes.

    QR code component built using HTML & CSS

    2
    NguyenTaiAnh•30
    @NguyenTaiAnhPosted 25 days ago
    • Does the solution include semantic HTML? - Yes
    • Is it accessible, and what improvements could be made? - Use different tag (ex: picture)
    • Is the code well-structured, readable, and reusable? - Normal
    • Does the solution differ considerably from the design? - No
    0