A good landing page capture's the user's attention and directs them where they need to go.
A header can have site name and logo, menus, and other items like language switches or a search box. Footers are often a list of links and a copyright notice. Make it simple for this exercise to focus on the page layout.
Add components in a single column, allowing each one to take up the space of the container. Components can include a call to action, recent content, featured items, or whatever you think of. Components themselves can have complex layouts, just make sure they don't break the main page layout.
A common design pattern is to set different background colors on each component that take up the full width of the page. Your layout may need wrappers around components to achieve this.
In putting this together, you can learn about flexbox, grid, and other css layout properties. Practice checking in your browser at different widths, and add breakpoints to make it responsive.
Instructions
- Start with a mockup, screenshot, or sketch of a site landing page.
- Create page regions for the layout, containing a header, footer, and components.
- Add components to the main section, make them responsive.