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.



  1. Search for posters to emulate in code and make responsive.
  2. Identify four possibilities:
  3. Document your ideas using this template
  4. I will review all ideas and discuss them, providing guidance on your final selection of a design to recreate.


  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.
  4. Design a mobile-first layout using Less.
  5. Add media queries to achieve desktop design.
  6. Present project to colleagues.


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



  1. Remix this Glitch project.
  2. Create a new GitHub repo named “project2”.
  3. Follow the instructions to connect Glitch and GitHub.



Google Sheet example