Latest solutions
QR Code using CSS Flexbox
Submitted 7 months agoI am interested in feedback in how I have handled the flexbox side of the challenge. Is what I am doing correct to get an item centered? I don't like the fact that I am relying on
margin-top
to centrally align the card.
Latest comments
- P@Koxone@wheelerMT
Awesome work :)
- @hermutiWhat are you most proud of, and what would you do differently next time?
Well when initially uploading my finished project to GitHub, I mistakenly uploaded the entire folder containing my work instead of the individual files. This caused the live link to my site to fail. To resolve the issue, I explored various solutions and eventually decided to delete the original upload and re-upload the files correctly. Moving forward, I will ensure that I upload only the necessary files rather than the entire folder to avoid similar issues.
What challenges did you encounter, and how did you overcome them?One major challenge I faced was correctly configuring my project on GitHub to generate a working live site URL. Initially, I uploaded the entire project folder instead of just the necessary files, which caused the live site link to fail. To address this, I researched solutions, sought guidance, and ultimately deleted the incorrect upload. I then re-uploaded the project correctly, ensuring that only the required files were included. This process taught me the importance of understanding file structure and version control for deployment.
What specific areas of your project would you like help with?I would appreciate feedback on how I can further optimize my workflow when managing and deploying projects to GitHub. Additionally, I’d like guidance on best practices for structuring files and repositories for clear organization and efficient collaboration. Any tips on improving the styling and responsiveness of my project would also be valuable.
@wheelerMTHey, awesome job! :)
I see you mentioned wanting some help when it comes to deploying your final webpage, so here are some tips:
When using GitHub Pages within a repository, it defaults to a URL path of:
https://<username>.github.io/<repository_name>
. Therefore, when you go to that URL, it will attempt to display theindex.html
at the root level of the repository.The reason your webpage won't have displayed is because your
index.html
file was inside another folder, i.e., it wasn't at the root level of the repo.However, GitHub Pages can work with any number of folders within a repository. Let's say your uploaded folder was called
qr-code
. Then, to access that webpage, you need to visit the following URL:https://<username>.github.io/<repository_name>/qr-code
, replacingusername
andrepository_name
with your own. This then displays theindex.html
file within theqr-code
folder :)In my set up, I have one repository for all my front-end mentor challenges. To access the webpage of a given challenge, I simply navigate to
https://wheelermt.github.io/frontend-mentor/challenges/<challenge_name>
. You can see my repository here!Hope this helps :)
To help you improve, I have a few comments on the HTML and CSS below, too.
HTML:
- The main content of a webpage should be wrapped in a
<main>
tag. This is for accessibility reasons (i.e., it helps screen readers perform their task). - Having both a
text
andtect
class is confusing (I'm not sure whattect
actually is?). I would change the first<p>
element to a<h1>
.
CSS:
- Do not use
px
as units for text. This is a big accessibility issue. If a user scales up their text size in the browser, any text element that uses apx
font-size will not scale up, and so will remain hard to read for that user.
- The main content of a webpage should be wrapped in a
- @iBotayoWhat are you most proud of, and what would you do differently next time?
Completing another challenge without having to consult any resource is a win for me. In the future, I would like to use a framework like react and tailwind.
What challenges did you encounter, and how did you overcome them?It was quite a smooth ride
What specific areas of your project would you like help with?If the CSS can be optimize, I'd love see how to do it.
@wheelerMTAwesome job :)
Here are a few things to make it even better:
HTML:
- Every HTML document should include a
main
element. This is an accessibility issue, as it helps screen readers identify the main content on the screen. - Headers should always be in order, so never start with a
<h3>
, change it to a<h1>
. - All
<img>
tags should have analt
text describing what the image is for accessibility reasons.
CSS:
- Include a CSS Reset for best practice.
- Never use
px
to specify thefont-size
. This is an accessibility issue as it prevents the users text from scaling properly in browsers. Userem
instead to set thefont-size
. - Similarly, when setting the
width
andheight
of an element do so using arem
. - You should specify
min-height: 100svh
in thebody
tag to ensure the body takes up the full height of the screen. This will then center the card in exactly the center of a given screen.
A lot of these tips I got from Oystein's comment on my own work, see here.
- Every HTML document should include a
- @Phantuan2004@wheelerMT
Awesome work!
To get the card to be centered exactly in the middle of the screen, you could have a
body
styling of the following:body { background-color: #F4D04E; margin: 0; /* Remove default margin */ height: 100vh; /* Set height to 100% of the viewport */ display: flex; /* Use flexbox for centering */ justify-content: center; /* Center horizontally */ align-items: center; /* Center vertically */ }
- @andriiyakymiv@wheelerMT
Amazing job!!