Project 2: Dynamic Poster
Use your current knowledge of HTML and CSS layout to reinterpret an existing poster design as a responsive web page.
- Adapt and interpret an existing print design into responsive code
- Practice and stretch your current CSS skills
- 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
- Identify four possibilities:
- three possibilities of interesting designs to recreate
- plus one “stretch” example
- 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:
- How to submit: Add your file to the poster-ideas folder inside our shared GD431 Activities folder in Google Drive
- I will review all ideas and discuss them, providing guidance on your final selection of a design to recreate.
- Follow the setup instructions
- In your
index.html write markup to semantically represent the poster content.
- 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.
- Design a mobile-first layout using Less.
- Add media queries to achieve desktop design.
- Present project to colleagues.
- Create a pull request for code review and final submission.
- Send me a link to the pull request via Slack DM by 11:59 PM EDT on 10/15.
- 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.
- Remix this Glitch project.
- Create a new GitHub repo named “project2”.
- Follow the instructions to connect Glitch and GitHub.
- You’ll be connecting the Glitch project you just remixed and your new “project2” repo.
- 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
Google Sheet example