🎁 plan

Explore the brief and plan your approach

Developing a pixel-finished UI πŸ”—


Why are we doing this?

Each module you should produce something substantial that takes multiple weeks for your professional portfolio. This project starts fairly simply and gets more complicated as you iterate, which is how websites are built in real life too.

Unlike the wireframe projects, this project uses mockups. Mockups are pixel-finished pictures of how websites should look, and getting the look exactly right is the goal here, as well as maintaining correctness in your underlying code.

Maximum time in hours


How to get help

Share your blockers in your class channel. Use the opportunity to refine your skill in Asking Questions like a developer. Bring your work to class and use study time to work on problems with other developers.

How to submit

  1. Fork to your Github account.
  2. Make regular small commits with clear messages.
  3. When you are ready, open a PR to the CYF repo, following the instructions in the PR template.

How to review

  1. Complete your PR template
  2. Ask for review from a classmate or mentor
  3. Make changes based on their feedback
  4. Review and refactor again once the coursework solutions are released.

Anything else?

Mockups only ever show a few snapshots of pages, but websites must work at all the sizes in between. It’s a challenge, but it’s one everyone else faces too. How do they solve it? Research will help you, as will collaboration.

  • 🎯 Topic Code Review
  • 🎯 Topic Delivery
  • 🎯 Topic Iteration
  • 🎯 Topic Problem-Solving
  • 🎯 Topic Requirements
  • 🎯 Topic Testing
  • 🎯 Topic Time Management
  • πŸ”‘ Priority Key
  • πŸ¦‘ Size Large
  • πŸ“… HTML-CSS
  • πŸ“… Week 2