After this exercise, you will be able to apply the Grid layout to achieve a customized, responsive design for cards and grid-based data.
What you will learn
- Know how to use the Grid layout
- know how to make the grid-based design responsive.
Please refer to the very first project in this series that explains in detail how to create and work on a project: https://www.codingwolves.io/project/a179f0e9/simple-personal-page
Before you start, get familiar with the basics of the Grid layout. Jonathan Suh created the whole website dedicated to the Grid layout, please check it out: https://learncssgrid.com/
You also may want to refresh your memory about some common principles of HTML and CSS:
- Elements https://www.tutorialspoint.com/html/html_elements.htm
- Attributes https://www.tutorialspoint.com/html/html_attributes.htm
- Images https://www.tutorialspoint.com/html/html_images.htm
- Styles Sheets: https://www.tutorialspoint.com/html/html_style_sheet.htm
- Media queries https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Media_queries (to make the page responsive)
This is also a good short introduction to HTML: https://www.geeksforgeeks.org/html-introduction/
For the brand icon styles (brand colors) please use this CSS file: https://github.com/CodingWolvesIO/assets/blob/main/HTML-CSS/brand-colors.css
- Decide on what you are going to create. It can be a fleet (as we did in our example), or team members, or list of available snickers, or even a pricing chart.
- Draw on the paper the basics of a future layout. Define the grid containers and cells inside.
- Create the empty page, add the header and grid to it. The first-level grid can help with centering the content.
- Divide the grid into blocks, assign the classes.
- Add the header, content, and footer to every block. Use tags
<div>for the central content.
- Add a grid to the footer or content.
- Fill up the data, add the images
- Specify the fonts, add some styling.
- Make sure the page looks responsive. For the best results, use the media queries.
- Test the page for different devices.
You can use our screenshot with marked grids for reference:
- Play with cards' design: border, font, shadow, etc.
- Play with the number of cards, their width and position.
- Add at least two grids to your page.
- Do not use any other alignments tools (like inline blocks or flex layout).
- The page should look well for every device. See the project's screenshots for reference.