Hello Aishaakin👋
For resources on CSS media queries, you can checkout w3schools and/or MDN
For grid layout, you can take this free course by freeCodeCamp.
For screenshots, you can use this chrome extension
Additional tips
The <html> tag should have a language attribute. It should look like this <html lang="en">. This lets the browser know that your site's is in english and it also helps screen readers to pronounce words correctly.
You can take a free responsive web design course on freeCodeCamp
Another thing you can do is to use sematic HTML elements like the <main> tag, <footer> tag, <section> tag, and so on. You can read about them here
Keep on building, You are doing great👏👏
I completed this challenge with the help of a tutorial. However, I did have issues making the dice image responsive using media queries. All constructive feedback would be greatly appreciated.
Hello Mirm,
You did some fine work.👏👏
However, I have a couple of suggestions to make your code even better.
1) To improve the site's accessibility, try using the <main> tag on the <div> with the class of container. That is, instead of:
<div class="container">
you can have a <main> tag with the div inside of it. Like this...
<main>
<div class="container"></div>
</main>
and for the <div class="creator"> try using the <footer> tag instead, like this <footer class = "creator">
2) You can add
main{
display: flex;
align-items: center;
justify-content: center;
min-height: 100vh
}
to your CSS code to center the container div perfectly, in a way that it won't stick to the top of the viewport.
3) In future projects, try adding a <title> in the <head> tag of your HTML code as this sets a title for your page and therefore, helps with the site's SEO.
Once again, you did great on this project
I can't wait to see what you build next.🙂
Could not round some of the corners, is it because the image is actually a background image that has no repeat and only covers 50% of the card?
Any other feedback is welcome!!!
Hello Edoardo
You did some great work on this project
However, to make your site more accessible, try using the <main> tag for the <div> that has the class of "card".
Also, you can use the <footer> tag on the <div> with a class of "attribution".
If you do not want to do that, you can as well add a role attribute to the respective <div> tags For example:
For the main content, do this:
<div role="main" class="card">
And for the footer, do this:
<div role="contentinfo" class="attribution">
To read more about the use and importance of semantic HTML and the role attribute, check these sites:-
Once again, You did well on your project.
Keep it up
When I was trying to center the div, with (display: flex, align-items: center, & justify-content: center) . It wasn't moving center of screen but was centering on top of the screen. Any ideas on why it was doing this? I had to use position which I don't think was the "proper" way of doing this.
Thanks! :)
Hello Tyler
You have done well in your code
However, to address the complaint you made, rather that use the position property, try this...
body{
display: flex;
align-items: center;
justify-content: center;
min-height: 100vh;
}
The above code snippet makes the minimum body-height exactly the height of the screen viewport min-height:100vh. Therefore, centering the container in the middle of the page.
For more explanation on the vh unit, check