Flexbox and responsive layout css using min-height and max-width
Design comparison
Solution retrospective
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.
Community feedback
- @IzykGitPosted 3 months ago
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-alignis 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.
0 - @basan17Posted 3 months ago
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/
0
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