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

As a .fig file

You can find the .fig file in the source folder of this repo.

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)

Creating running node-sass

- To install npm npm i

- npm run css:watch