Skip to content
Submitted 6 months ago

qr-code-component.github.io

hermuti•10
@hermuti
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?

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.

Code

Please log in to post a comment

Log in

Community feedback

  • hermuti•10
    @hermuti

    Hi Thanks so much for your detailed feedback and helpful tips—it was really insightful! 😊

    I noticed that the index.html file should be at the root level, but I didn’t realize it could also be accessed from within a folder. Your explanation about navigating to specific folder paths to display the webpage was clear and clarified a lot for me.

    I also appreciate the pointers on my HTML and CSS:

    • Wrapping the main content in a <main> tag, I’ll definitely incorporate that moving forward. -You’re right about the tect class! That was a typo on my part. I’ll rename it and review my classes more carefully.
    • Changing the <p> to an <h1> also makes a lot of sense.

    As for using px for text sizes, thanks for pointing out the accessibility implications i wasn't aware of it. I’ll start using em or rem units to ensure scalability for all users.

    Thanks again for taking the time to help me improve your feedback makes a big difference. I’ll check out your repository as well for some inspiration!

  • Matt Wheeler•40
    @wheelerMT

    Hey, 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 the index.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, replacing username and repository_name with your own. This then displays the index.html file within the qr-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 and tect class is confusing (I'm not sure what tect 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 a px font-size will not scale up, and so will remain hard to read for that user.

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