The task in this exercise is to produce a website with a fairly complex layout. You should look at a website you visit often, and attempt to recreate that website layout using the HTML and CSS we have looked at to date.
While working on your website, you should make a note of the things that work, the things that don’t work, what is easy to accomplish, and what has been tricky to do.
Exercise
Decide on a webpage that you visit regularly. Your task for today is to try to recreate the layout of this webpage. Note: you do not have to recreate any functionality - this is just about getting a feel for grouping content together and positioning it on the page. You can use real content or fake content (see below) - but if you use real content, please remember to reference the source.
Remember that you can use the developer tools in the browser to view the source code of the website you are visiting. For many websites, this code will be very complicated, and it may not be easy to understand how this all fits together. A better approach might be to look at the layout of the website you are attempting to recreate and think about how it is structured in terms of boxes of content, and how those boxes can be grouped together into larger boxes. This will allow you to think about how you might structure your HTML so that elements are grouped together inside other elements that can be positioned as a single unit.
Resources
While working on your website you may find the following resources useful:
-
http://www.lipsum.com/ - allows you to generate filler ‘Lorem Ipsum’ text to use to pad out your website content while working on layout and design.
-
http://lorempixel.com/ - allows you to generate placeholder images to use on your website while working on layout and design.
… Just one more thing
Next: Responsive Web Design
Previous: CSS Layout