This is an exercise to hone your layout skills 🗡

Take a look at the following projects, attempt the primary mockup for both exercises, and then if you have time, go back and complete the bonus mockup.

Note: Nothing is linked yet. You have all the files you need, but none of them are connected. Make sure you <link> your CSS file, and use the right path in the href of your <img>'s.

Using the mockup below, attempt to recreate the Google Homepage. https://www.google.com/

google-mockup.png

See if you can add the extra elements included in the following mockup.

google-mockup-bonus.png

Develop a layout that mimic's the following blog post, which is a centered website with a header.

blog-mockup.png

Attempt to add a code block section (marked A), a quote block section (marked B) and the inline code section (marked C). These can be inserted anywhere on the page, just make sure they follow the same layout as the rest of the blog post (i.e. width, font-size, etc).

blog-mockup-bonus.png