Web Design & Development Contest

Planning and Process

Some things the judges be looking for:

• Demonstrate an understanding of:
  • Users
  • User Goals, vs Business Goals
  • Wireframming as a planning tool
  • User Journeys
• Soft skills and client interaction

Coding Environment

Familiarize yourself with the coding environment: https://www.screencast.com/t/bX1fZBcWvs

HTML & CSS

All teams are provided with the same layout to ensure consistency for the judges to evaluate. You must implement the basic layout structure as defined in the wireframes but you will have freedom over the aesthetics (see next section)

Some things the judges be looking for:

• HTML is well structured and uses appropriate semantics
• CSS is separate from the HTML
• CSS is structured for scalability, and reusability
• Considering using a system such as B.E.M.
• Folder and file structure demonstrates, filenames, and linking assets demonstrates a basic understanding of servers

Design & Aesthetics

All teams are provided with the same layout to ensure consistency for the judges to evaluate. You must implement the basic layout structure as defined in the wireframes (see previous section) but you will have freedom over the aesthetics.

Some things the judges be looking for:

• Colors, fonts and other aesthetic choices are pleasing and appropriate for the client.
• Use of spacing, border, and font sizing easily separates or joins sections appropriately
• Spacing is consistent, not necessarily exactly matching across sections, but creates a ‘vertical rhythm’

The client has provided some photos to use. You must use them, however you are free to modify them to match the aesthetic direction you wish to achieve. For instance, if the client has provided a crisp clean photo, but your aesthetic direction calls for a grungy look, you are free to modify the provided photos with an overlay, distortion, border, or other treatments.

You are free to use additional resources from the internet beyond what the client has provided to achieve your aesthetic direction.

You are not allowed to simply search Google images and download whatever you like.

You must use resources with appropriate open licenses.

https://github.com/reinaldosimoes/design-resources is an excellent list of resources with various open licenses. The list is long. Here is a more curated list of recommendations:

• https://fonts.google.com/
• https://unsplash.com/
• https://pixabay.com/
• https://getwaves.io/
• https://www.toptal.com/designers/subtlepatterns

JavaScript Challenge

Some things the judges be looking for:

• Javascript is in a separate file
• Method and variable names are reasonably self-descriptive or code comments to add clarity
• Well structured with future maintainability in mind.
• DOM manipulation
• Working with APIs
  • Fetch is not explicitly required but recommended: https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch