Design comparison
Solution retrospective
Dear All,
Here is my very first project EVER, I'm an BASOLUTE newbie, I am insanely glad I could get this far with my very first project. Looking forward to getting better and better, step by step. I am so new I don't even know what questions to ask. :D Unfortunately the QR-code image doesn't show on the GitHub URL, I am trying very hard to fix it, but also try to add a print screen version.... I am open to any suggestions, feedback, criticism (though I know it is highlighted to be more specific than this, but maybe in my later projects. :) )
Wishing us all great practice,
Dalma
Community feedback
- @bccpadgePosted about 1 year ago
Hello @bdal90. Congratulations on completing this challenge!!!π
I have a few tips you might be interested in to improve your solution.
HTML π:
- Every website should have at least one landmark like a
main
HEADING TAGS
- Heading tags must be used in chronological order. Its not best practice to skip heading tags due to SEO and accessibility reasons.
More infoπ:
Example:
<body> <main class="container"> <img> <div class="content__group"> <h1>Improve your front-end skills by building projects</h1> <p>Scan the QR code to visit Frontend Mentor and take your coding skills to the next level</p> </div> </main> <footer> /* attribution info goes here*/ </footer> </body>
CSS π¨:
- Font size shouldn't be in pixels because they are absolute unit and doesn't scale when users want to change their font size in their web browser setting.
- To write better CSS you can implement the DRY principle (Don't Repeat Yourself)
- I would look at using CSS shorthand properties when using
padding
andmargin
You can use CSS Grid on the
body
and saves you few lines in CSS-
Add
font-family
on thebody
instead of thecontainer
-
All the commented code below is unnecessary and add
max-width
to make the component responsive without media queries and addingpadding
for spacing.
.container { /* font-family: Outfit, sans-serif; */ /* font-size: 15px; */ background-color: hsl(0, 0%, 100%); /* display: flex; */ /* flex-direction: column; */ /* align-items: center; */ /* justify-content: space-between; */ /* height: 430px; */ /* width: 270px; */ border-radius: 20px; box-shadow: 0 0 10px 10px hsl(210, 30%, 83%); padding-top: 10px; padding-bottom: 30px; max-width: 380px; padding: 1rem; } /*Max-width: 100%; makes image responsive and display: block removes white space*/ .container__qr-code{ max-width: 100%; display: block; }
Example:
- Wrap your
h1
andp
using adiv
and put a class on thatdiv
and applytext-align:center;
More infoπ:
Here is my solution to this challenge: QR Code component
Hope you find this useful and don't hesitate to reach out to me if you have any questions
Marked as helpful1@bdal90Posted about 1 year agoThank you very much for your insightful comment @bccpadge! I will keep these in mind.
1 - Every website should have at least one landmark like a
- @NathanRayMPosted about 1 year ago
Hello! Great job on your first challenge. It looks like the QR code may not be showing due to the way you have it in your html. In your github you don't have an images folder but have your html pointing to an images folder.
Here is what you currently have.
<img class="container__qr-code" src="images/image-qr-code.png" alt="QR-code">
You can change it to this and it should resolve the issue.
<img class="container__qr-code" src="image-qr-code.png" alt="QR-code">
Another option would be to add an images folder to the main root in github and place the QR code picture in the folder.
I hope this helps.
2 - @bdal90Posted about 1 year ago
@NathanRayM and @SaeedAlsayed Thank you guys for your help, I truly appreciate it! I'm trying, God knows I'm trying, but I'm having the hardest time figuring out what I'm doing wrong on GitHub (it just seems a whole new universe for me). I've tried both suggestions, but it throws some kind of error saying "pages build and deployment / build (dynamic)". What am I doing?
0@SaeedAlsayedPosted about 1 year agoat first you need to know how to upload your files to github in correct way second how to appear your page but in the image path you need to put / before the pass only like this way:<img src="/image-qr-code.png" alt="title"> @bdal90
1@SaeedAlsayedPosted about 1 year agoif you have any question you can ask and i will answer you @bdal90
1 - @SaeedAlsayedPosted about 1 year ago
just do the image source like this: /image-qr-code.png
0
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