learn-co-curriculum / instructor-brochure-challenge

Flatiron Lead Instructor Project: The Brochure Site

Introduction

The "brochure site" is a rite of passage for all web developers. Back in the late-nineties, when some of us got started writing HTML, brochure sites were all there was. It was a lot of this: "Hi my name is Joe Flatiron and I'm a senior in high school. I love The Beatles and the Fugees. I'm on the web!" Needless to say, things have gotten a lot prettier and a lot more complicated since then!

Role-playing as a "brochure site consultant", make a site (or show us one of your projects) that fits the following requirements.

Requirements

Yours or your clients' needs will be expressed declaratively versus imperatively. People will tell you "Bring me a turkey sandwich" not "Go to the kitchen. Take out bread, two slices, cheese (preferably Irish Cheddar), etc." Similarly, we will present to you these requirements declaratively. You must meet these human-oriented targets, the techniques and code will be up to you to resolve.

1. Your site must use HTML5 semantic elements for collecting content e.g. <header> and <aside>
2. Your site must use one of these layouts: multicolumn with floats, flexbox, or CSS grid
3. Your site must be optimized for at least 2 viewports (a full-screen device as well as a mobile device of choice)
4. You must enable some type of dynamic interaction through Javascript. Perhaps this takes shape as a form with dynamic feedback, or an animation that responds to some event. Or, perhaps, a view that updates based on some user interaction. Be creative!

These are baseline requirements. As your creativity calls for expansion of these ideas, follow it.

Not Specified

1. The subject matter. While we'd love for you to post a page about how great programming is, the creativity of the Web's possibility is why so many of us have made it our vocation. Here are a few starter ideas:
   • a (résumé-like) or a hobby page ("Why Sachin Tendulkar is the Greatest Sportsman of 3 generations")
   • a music page ("My list of Phish Recordings with Audio Samples"). This can be something that will open a promotion discussion or which establishes your bona fides
2. The Number of pages. The goal of web design is to serve the content. If multiple pages does this best, great. Google has become a multi-billion dollar company with the most deceptively simple landing page in history. Serve your page with user experience in mind.

Inspiration

Graphic design encompasses a wide variety of visual aesthetics. You might choose one style over another. Try looking at the works of Jan Tschichold, Ettore Sottsass, Piet Zwart, László Moholy-Nagy, Josef Muller-Brockman, Henryk Berlewi, Khoi Vinh. While, a decade ago, it was inconceivable or incredibly time-intensive to print-styled pages on the web, we now have technology that makes this possible. See if you can find ideas to make your page come to life!