Tad Atkinson• 160
@palmettophoto
Submitted
Thanks for any advice in advance!
Kerby
@KeremBakan
All comments
- Kerby• 200
@KeremBakan
Posted
You can use transition on button hovers.
You can use
mix-blend-mode: screenin button class to make same color with background even you change background color it will be same color.The alt attribute should not contain the words "image", "photo", or "picture", because the image tag already conveys that information.
The alt attribute should explain the purpose of the image.
If you want to learn more about the alt attribute, you can read this article. 📘.
Happy Coding 😁
0 - Eneyee• 60
@Eneyee
Submitted
- How much of the code is usless or repeats what was already stated earlier?
- How to aproach positioning of the elements better?
- Please recomend some resourses for learning front-end for an abslute beginner and maybe provide a general roadmap of front-end developer
Kerby• 200@KeremBakan
Posted
Your
<img>tags should have alt attribute.The alt attribute should explain the purpose of the image. Uppon scanning the QR code, the user will be redirected to the frontendmentor.io website, so a better alt attribute would be QR code to frontendmentor.io.
If you want to learn more about the alt attribute, you can read this article 📘.
Every page should have <h1> tag because it is important for screen readers. If you want to add <h1> tag but making it only visible for screen readers, you can use something like this.
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); border: 0; }Your page should have
<footer>tag.You can use reset.css or normalize.css to reset default styling.
Happy Coding 😁
Marked as helpful
1 - Mateo Rinland• 210
@mateorinland
Submitted
The background isn't exactly the same as the design. I'm not sure if the best way to get it exact is to tinker with the background-position or if there's a better method like maybe using translate.
Kerby• 200@KeremBakan
Posted
You don't have to reset default styling manually just use reset.css or normalize.css to reset default styling.
Your background is fine you don't have to worry about it.
Your font is not same with design I assume default styling causing it.Just reset styling and try again.
Sorry for bad english.
Other than that God Job.
Happy Coding 😁
Marked as helpful
1 - melisguclu• 120
@melisguclu
Submitted
Kerby• 200@KeremBakan
Posted
Your page should have
<footer>tag. Every page should have<h1>tag because it is important for screen readers. If you want to add<h1>tag but making it only visible for screen readers you can use something like this..sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); border: 0; }0 - mbongoelvis• 540
@mbongoelvis
Submitted
what i found challenging in this task was to use the media query for responsivness
Kerby• 200@KeremBakan
Posted
You should use
<main>tag it is semanticly important. Every page should have<h1>tag because it is important for screen readers. If you want to add<h1>tag but making it only visible for screen readers you can use something like this..sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); border: 0; }Happy Coding 😊
Marked as helpful
0 - brspkts• 470
@brspkts
Submitted
Kerby• 200@KeremBakan
Posted
You have to use header tags in order <h1> <h2> <h3> go on like this. You should use reset.css or normalize.css to reset browsers default styling. To center .container on the page you can also use this code snippet.
.container { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }Other than that good job.
Happy Coding
0
