This project was a great learning challenge. I learned how to set up the grid and make it responsive using media queries. In the media queries, we have to redo the grid. Also, I found that the container would be better if we used the max-width: 1440px
instead of the width of 80%. I will apply all this knowledge in future projects. I also learned how to use the opacity: 50%
to make the font look lighter with the same font-size.
The challenge was initially making the grid responsive. However, I learned that if we make the container's width as max-width: 1440px
as outlined in the system design document, it saves us from multiple troubles later when we are trying to make the page responsive.
Making the grid look suitable for mobile devices was challenging, so I took help researching and followed the guidelines from Brad Traversy.