Skip to content
Submitted 11 months ago

Flexbox and responsive layout css using min-height and max-width

Lee Chen Wei•10
@lollwhat
A solution to the QR code component challenge
Preview (opens in new tab)Code (opens in new tab)

Solution retrospective

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

I believe I am most proud of utilizing the fundamentals of HTML & CSS to build this website, as mostly for styling I will use copilot or chatgpt to help me, but I have did this on my own with research using google alone. I would try to style this better the next time, maybe this time with the help of AI. :D

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

Some challenges I encountered were basic problems such as aligning the QR Code in the middle of the page without using specific margin numbers. I have utilized some responsive CSS such as min-height, max-width and so on so that when the website shrinks, the whole div will shrink as well.

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

Some things that I want help with would the how to use flexbox lesser, I believe there might be more efficient code to style the page without the use of flexbox.

Code
Couldn’t fetch repository

Please log in to post a comment

Log in

Community feedback

  • Lance•1,580
    @LanceOS

    Good work!

    When you write HTML you want to make sure that your code is clean and semantic. Writing clean and semantic code won't only improve SEO and structure but in my opinion is makes styling far easier. This comes with using elements like <main>, <section>, and avoiding using divs.

    Now using divs is okay but they do not have any semantic value and will hurt SEO if you use them incorrectly. So avoid wrapping important content, like the main content of the page, in a div container.

    For CSS you are applying the styles straight in the HTML, this is okay here and there but you want to avoid doing this (unless you are using tailwind). You want to move your CSS into an external CSS page. This will make it far easier for you to write and keep track of the CSS you write.

    Flex is a very powerful tool and is basically a must know. However in your code you have a lot of containers and have used flexbox to center everything. A lot of people do this and the overuse of flexbox with divs can lead to cluttered code. So the key to using it lesser is to just do less!

    Most of the time a simple text-align is all you need to center all your text on the page.

    I just gave this project another shot and you can do this whole thing without using a single div.

  • Basang Basangov•40
    @basan17

    Hello! I noticed that you didn't use the specified font Outfit. You can go to https://fonts.google.com/specimen/Outfit and follow directions there.

    Also, you can read this small tutorial on how to use Google fonts on your website https://www.geeksforgeeks.org/css-google-fonts/

    On your comments on flexbox, imho flexbox is the most powerful tool in modern css layout right now, check this online game that can help you get a little practice https://flexboxfroggy.com/

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