Like @Tolufolorunso pointed out on slack maintaining a good styling practice from the start is key.
Like baby steps, make them intentional to maintain good styling practice even if it's a small project.
I suggest you move your style out to a separate CSS file style.css then link it to your HTML document
Avoid using styling with IDs and tag names, try to maintaining class names for your styling: please refer to the article @Tolufolorunso suggested: https://css-tricks.com/bem-101/
You could use grid-template-columns: repeat(4, 1fr); instead of grid-template-columns: auto auto auto auto;
Again be intentional about what you want on each breakpoints grid-template-columns: auto; if its two columns you want, use grid-template-columns: 1fr 1fr;
Base on your current curriculum, it's recommended you use the mobile-first-approach in developing your websites. Meaning you have to design for mobile devices first. so instead of @media (max-width: 1000px) you should be having @media (min-width: 1000px)
Lastly, please try to use meaningful names when naming your classes or IDs. This helps other developers and you from the future to quickly identify what it does or which section of the page it styles.
This is really really helpful. Thank you very much sir.
I definitely will note them and work better as I move on.
Thanks again for taking the time to review. @acushlakoncept
Great work @Farhan001 👏 💪
Like @Tolufolorunso pointed out on slack maintaining a good styling practice from the start is key. Like baby steps, make them intentional to maintain good styling practice even if it's a small project.
I suggest you move your style out to a separate CSS file
style.css
then link it to your HTML documentAvoid using styling with IDs and tag names, try to maintaining class names for your styling: please refer to the article @Tolufolorunso suggested: https://css-tricks.com/bem-101/
You could use
grid-template-columns: repeat(4, 1fr);
instead ofgrid-template-columns: auto auto auto auto;
Again be intentional about what you want on each breakpoints
grid-template-columns: auto;
if its two columns you want, usegrid-template-columns: 1fr 1fr;
Base on your current curriculum, it's recommended you use the mobile-first-approach in developing your websites. Meaning you have to design for mobile devices first. so instead of
@media (max-width: 1000px)
you should be having@media (min-width: 1000px)
Lastly, please try to use meaningful names when naming your classes or IDs. This helps other developers and you from the future to quickly identify what it does or which section of the page it styles.