Design comparison
Solution retrospective
I managed to do the HTML but had a bit of a challenge styling the image. Apart from that it was a bit confusing for a first timer to add the solution link and the live link to the README file, I have tried though.
Is it possible to style the image with CSS only? What are some of they stylings used? The terminologies and values used How does someone attach the screenshot to the README file?
Community feedback
- @vanzasetiaPosted over 1 year ago
Hi! 👋
You should rename the
indexQR.html
toindex.html
. Otherwise, it will show the README instead of your project.If you want to keep the HTML file name as it is, you need to update the live site URL to https://stain-i.github.io/Newbie-QR-Code-attempt/indexQR.html.
You should also upload the QR code image to the repository. Otherwise,
<img src="images/image-qr-code.png" alt="QR-code">
will not show any image.I recommend using a more modern CSS reset. My recommendation — A Modern CSS Reset | Andy Bell
I hope this helps. Happy coding! 👍
1 - @Durban86Posted over 1 year ago
This is a simple project, you don’t need a full reset in your CSS..
You have some repeating code in the CSS, try refactoring it. For example all the same text styles (font family and line height) put in the body.
Learn flex box Complete Guide to Flexbox it’s going to help you layout elements easier.
Also you should use a main tag instead of a section tag in your HTML.
Probably don’t need the .index in your class names
As far as naming files, you don’t need the QR in the file names if you have your project organized.
To create a live version of the code, you need to go into setting of the repository on GitHub, then click pages and deploy it from the main branch
1
Please log in to post a comment
Log in with GitHubJoin 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