Project 3: One-page Event Site

In Brief

You will design a one-page web site advertising an upcoming design conference.

Purpose

Use your current knowledge of HTML and CSS, respectively, to:

  • Structure and organize an entire web page
  • Create a layout that adapts to a variety of device/browser sizes

Process

  1. Create a document outlining the content for your conference website.
  2. Follow the instructions for the design phase of the project.
  3. Follow the setup instructions.
  4. Create your pull request.
  5. In the HTML file and on the branch you created in the previous step, write the markup your event content.
    • Do not add class names or extra div or span elements at this point. The simplest markup is the best markup at this point.
    • Your markup should not try to predict the future needs of your layout; it should describe your content semantically.
  6. When you are ready for your markup to be reviewed, send me a link to to your pull request via Slack DM.
  7. Create mobile-first styles for your design.
  8. Write media queries to make your site responsive.
  9. Present project to colleagues.

Submission

  1. Create a pull request for code review and final submission.
  2. Send me a link to the pull request via Slack DM by midnight EST on 12/18 (see in your timezone).

Requirements

  • The design should be responsive, working on mobile devices as small as 375px wide and other devices up to 1280px wide.
  • The site must be a one-page site. Do not create individual pages for any required or additional content.
  • The design must include:
    • Event name
    • In-page navigation
    • Event schedule
    • Details for at least three talks (including talk name and description)
    • Three speaker bios (including a photo)
    • Call to action and link to buy tickets
  • Your code must include:
    • The following HTML elements: header, main, footer, h1, img, a
    • At least two media queries
    • At least two CSS variables
  • Your CSS must be written mobile first.
  • The content for your speaker bios and talk descriptions does not need to be original. You may use content from an existing event, but you must document the source(s) in your PR description.
  • As always, you must document all the resources used in your final design, including text/copy, images, fonts, patterns, etc; you can provide a detailed list as part of your PR description.
  • 💡As this is your final project for the semester, this should be a summary of what you have learned to date about designing for the web, including: writing HTML and CSS according to best practices, your knowledge of CSS layout, incorporating animation/interactivity in your designs, utilizing CSS variables, etc.