Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

QR Code Component

@mrobbins0422

Desktop design screenshot for the QR code component coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


Had trouble scaling the entire component. Since I knew the text was fixed at 15px and a font-weight of 400, I boxed it in and scaled everything else to fit. Is there a better way? I am still having trouble geting my repository to show up as a github pages. Does anyone have any cheat sheets on the topic? Any feedback would be appreciated. I'm gonna go look and see how everyone else did it. :-)

Community feedback

Ollie 580

@ohermans1

Posted

Hey Mark - Great work on this one!

One suggestion - I would take a look at using rem instead of px for all measurements. The rem unit means everything is linked to the root font size in your document (which is 16px), therefore 1rem = 16px.

Its a little tricky to explain, but if you set your root font-size to 62.5% - this will mean that every REM is 10px, so its easy to convert. A plus of this, is that if you use REM for every measurement, when you go to do your media queries, you can change the root font-size to a different % for different screen sizes to scale the entire project.

Sorry if my explanation is a little rough, but take a look into it :) https://www.aleksandrhovhannisyan.com/blog/respecting-font-size-preferences-rems-62-5-percent/ This blog might help!

Marked as helpful

0

@mrobbins0422

Posted

@ohermans1 Hi Ollie, Thank you for taking the time to respond. I found your reference link very informative.

1
Ollie 580

@ohermans1

Posted

@mrobbins0422 I'm glad you found it useful. Good luck with your next project! :)

0

Account Deleted

Hi @mrobbins0422 The simplest way to solve the use of gh-pages is from your repository settings and in the pages section, select in the source option (Your GitHub Pages site is currently being built from the main branch.) your branch of main and then on save. with that a gh-action will be displayed to deploy your project in the url (https://mrobbins0422.github.io/qr-code-component/). I am sorry that images cannot be added so that the steps are clearer, be clearer. to shorten the first step I think you can access from this link with your session started https://github.com/mrobbins0422/qr-code-component/settings/pages

0

@mrobbins0422

Posted

@munozrc Thank you for the information. I'm still wondering, do I have a GitHub page for every repository? I still can't get it to display my project, though the links are correct. I cannot display an image like I can in my README.md file but my understanding is the github page is built from my README.md file.

1

Account Deleted

@mrobbins0422 Exactly every public repository on github can have a static page. the README.md file only provides repository information.

0

@mrobbins0422

Posted

@munozrc Thank you. Now I just need to figure out how to set up what is displayed on the static page. I've got one page displaying the Cayman theme with related links but no image. I've got a second page displaying an image and nothing else. I'll keep tinkering...

0

Please log in to post a comment

Log in with GitHub
Discord logo

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