Skip to content
Submitted about 2 months ago

Flexbox layout and Node.js Live server | QR-Code

DevWesley8•10
@DevWesley8
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...QR code component
  • HTML
  • CSS
1newbie

Design comparison

SolutionDesign

Solution retrospective

What are you most proud of, and what would you do differently next time?

I am mostly proud of actually finishing a project on my own and setting up a server as well locally

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

The challenge I had was figuring out how to see a local view of my application. I am using WSL(Sub-system for Linux) and wanted to keep my Dics inside of their. So i read the docs to figure out how.

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

I made it for mobile. Then I realize that on desktop it looks a little off. the picture is a little bigger than I like over 800px. also the padding is off at larger screens.

Community feedback

  • Huy Phan•2,020
    @huyphan2210Posted about 2 months ago

    Hi, DevWesley8

    I checked out your solution and have a few suggestions:

    • No need for a Node.js project: Since you're not using JavaScript or npm packages, there’s no need to set up a Node.js project. A simple HTML and CSS setup will work just fine. Node.js is typically used when you need JavaScript runtime or package management, which you don’t require here.
    • Avoid unnecessary containers: You don't need to create a card-container for the card element. The <body> tag can act as the container itself, simplifying the structure.
    • Card container width and height: The card-container doesn’t need width: 100vw. vw (viewport width) is a unit relative to the full width of the viewport, and since the container is a block-level element, it already takes up the full width by default. As for the height, using height: 100vh isn't necessary either. 100vh means the container will take up 100% of the viewport height, but in most cases, it's better to use min-height: 100vh on the body to ensure the layout expands as needed while still covering the full screen when there's less content.
    • Card width issue on desktop: The card looks misaligned on larger screens because you're setting its width to 50%, which makes it take up half the width of its parent (in this case, card-container, which is 100vw, or the full viewport width). If you want to keep width: 50%, consider adding a max-width to the card to prevent it from becoming too large on wider screens. This will ensure the card maintains a reasonable size regardless of the viewport's width.

    Hope this helps!

    Marked as helpful
    0
    DevWesley8•10
    @DevWesley8Posted about 2 months ago

    Thankyou so much I will rework the project. I am using Node js just for live refresh. I will have another screenshot in a bit!@huyphan2210

    1
    DevWesley8•10
    @DevWesley8Posted about 2 months ago

    I refactored my html and css it looks alot better. In the future I am probably gonna add a little javascript so everytime you scan the qr code it takes you to a site with something interesting @huyphan2210

    1
    Huy Phan•2,020
    @huyphan2210Posted about 2 months ago

    @DevWesley8 Scanning the QR code to take you somewhere is a cool idea!

    I checked out your refactored version, and it's definitely an improvement from the previous one. I have a few suggestions you might find helpful:

    • You don't need to apply min-width: 100vw to the body because websites rarely need horizontal scrolling. Setting min-width: 100vw can cause unnecessary horizontal overflow.
    • I noticed you set the width of the card (the main tag) to 320px, which works fine. However, a more flexible approach would be to use width: 100% combined with max-width: 20rem (1rem = 16px, so that's about 320px) or even slightly larger, like 30rem. This makes your card responsive, adapting better to different screen sizes, while still capping the maximum width. However, since the main tag is a block-level element by default, it automatically takes up the full width of its parent, so width: 100% is unnecessary. You can keep width: 100% if it's an inline-level element.

    Great job overall! Keep it up!

    Marked as helpful
    1
    DevWesley8•10
    @DevWesley8Posted about 2 months ago

    That makes total sense! taking courses and getting feedback is alot of learning that is good I appreciate you commenting back! @huyphan2210

    1

Please log in to post a comment

Log in with GitHub

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord