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/ 

We use the Fontawesome version 5.1 for icons and Google Fonts for the font.

For the brand icon styles (brand colors) please use this CSS file: https://github.com/CodingWolvesIO/assets/blob/main/HTML-CSS/brand-colors.css 

1. 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.
2. Draw on the paper the basics of a future layout. Define the grid containers and cells inside.
3. Create the empty page, add the header and grid to it. The first-level grid can help with centering the content.
4. Divide the grid into blocks, assign the classes.
5. Add the header, content, and footer to every block. Use tags <header> and <footer> and <div> for the central content.
6. Add a grid to the footer or content.
7. Fill up the data, add the images
8. Specify the fonts, add some styling.
9. Make sure the page looks responsive. For the best results, use the media queries.
10. Test the page for different devices.

You can use our screenshot with marked grids for reference: