Project 2: Dynamic Poster

In Brief

Use your current knowledge of HTML and CSS layout to reinterpret an existing poster design as a responsive web page.

Goals

• Adapt and interpret an existing print design into responsive code
• Practice and stretch your current CSS skills

Research

1. Search for posters to emulate in code and make responsive.
   • Focus on posters that are predominantly text and shapes
   • Some imagery is fine, but less or none is better
   • While you are free to use examples from any source, I have also provides some example poster sources here
2. Identify four possibilities:
   • three possibilities of interesting designs to recreate
   • plus one “stretch” example
3. Document your ideas using this template
   • Due date: 9/30 by 9am EDT
   • Format: Google Doc
   • File name: Please use your first initial and last name (for example: cswinehart)
   • How to submit: Add your file to the poster-ideas folder inside our shared GD431 Activities folder in Google Drive
4. I will review all ideas and discuss them, providing guidance on your final selection of a design to recreate.

Process

1. Follow the setup instructions
2. In your index.html write markup to semantically represent the poster content.
3. Crop or recreate elements of imagery as needed.
   • To add images to your project, you must use the ‘assets’ directory in the Glitch file browser. See these instructions and give a shout if you have any issues.
4. Design a mobile-first layout using Less.
5. Add media queries to achieve desktop design.
6. Present project to colleagues.

Submission

1. Create a pull request for code review and final submission.
   • Include PR template questions and your responses.
2. Send me a link to the pull request via Slack DM by 11:59 PM EDT on 10/15.

Requirements

• Your final design should be closely inspired by the original poster, including color, type, etc.
• The design should be responsive, working on mobile devices as small as 480px wide and other devices up to 1280px wide.
• You should use Less, not CSS, for writing your styles.

Setup

1. Remix this Glitch project.
2. Create a new GitHub repo named “project2”.
3. Follow the instructions to connect Glitch and GitHub.
   • You’ll be connecting the Glitch project you just remixed and your new “project2” repo.

Schedule

• Sept 23 · Project introduction; Begin research
• Sept 30 · Ideas template due; Review and select design
• Oct 7 · Process steps 1–3 complete
• Oct 14 · Project due date; Process steps 4–6 complete

Rubric

Google Sheet example