https://github.com/onja-org/front-end-assessment

A mockup-to-website example to be used as an assessment of our student's capabilities
https://github.com/onja-org/front-end-assessment

Last synced: 15 days ago
JSON representation

A mockup-to-website example to be used as an assessment of our student's capabilities

• Host: GitHub
• URL: https://github.com/onja-org/front-end-assessment
• Owner: onja-org
• Created: 2020-07-02T07:53:55.000Z (over 4 years ago)
• Default Branch: main
• Last Pushed: 2022-02-07T05:05:32.000Z (about 3 years ago)
• Last Synced: 2024-11-28T22:13:45.199Z (2 months ago)
• Language: HTML
• Size: 3.66 MB
• Stars: 0
• Watchers: 3
• Forks: 20
• Open Issues: 1
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# Front-end assessment

A mockup-to-website example to be used as an assessment

## Getting started

- Fork this repo to your own github account

- Clone your github account version of the repo (e.g. `STUDENT_NAME/front-end-assessment` ) to your computer.

- Work in your `main` branch

## The design

I'd recommend downloading the Figma App if you haven't already.

### On Figma.com

You can [find the mockup on Figma](https://www.figma.com/file/SC3HqLUP9hGBfn93mIwxkS/Sports-App-homepage-Responsive-Revised)

### As a `.fig` file

You can [find the `.fig` file in the source folder of this repo](source-materials/sports-app.fig).

Open the `.fig` in the Figma App, or import it/drag it into the Figma.com workspace in your browser.

## Resources

I've extracted all the images in multiple formats, and placed them in the `source-material/imagery` folder.

So too with downloading the fonts. Have a look in the `source-material/fonts` folder.

## Development

The `webroot` folder is where all your work should go. You'll notice there's already an `index.html` and the supporting folders inside the `webroot`.

## Requirements

Your work on the site header, and masthead will be the primary focus of this assessment.

i.e. you must first deliver these two elements, so that they can be marked.

The rest of the components of the site, we'll do later as an exercise.

### Marking

Your work will be marked on the following criteria:

- Git

  - Commits, commit messages, and their frequency (how often you commit)

- Code

  - All code should be:

    - well-formatted and clean

    - easy to understand

    - self-documenting

    - using comments when needed

    - named well (e.g. class names should be relevant)

  - HTML

    - Use of HTML elements

    - Accessible

  - CSS

    - Well-structured and easy to find relevant files

    - Good / consistent naming conventions (methodologies)

    - Reliable and simple techniques used (e.g. Flex vs. Grid vs. Normal flow, etc)

- Results

  - Should work in both Firefox and Chrome

  - Responsive, supporting mobile and desktop devices

  - Be accessible (You should use accessibility techniques we've covered in our courses)

  - Accurate as possible (Your end product should look as similar to the designs as possible

### Bonus marks

Bonus points will be awarded for code that uses:

- a new technique you had to research while doing this assessment

- elegant (thoughtful) solutions to complex problems

- going the extra mile (putting in more effort to push for high quality or delight)