Static Website Challenge

[maxxcrawford]

Hey there! Thank you for applying to the Privacy & Security Student Worker position. Based on your application, you have been moved into the next stage of the hiring process.

The goal of this exercise is to verify your front-end capabilities with HTML, CSS and JavaScript by building a static web page. Pixel precision is not required or expected. Your submission doesn’t have to be perfect, but should best illustrate your front-end web development proficiency.

If you have any questions, please contact mcrawford+studentproject@mozilla.com

---

We're asking you to do the following:

• Create a new repository, using this one as a template
• Set up the project locally (See the README for more info on how to get started)
• Create a new branch and submit a PR (to your own repo) that does the following:
  • Creates a responsive layout with semantic HTML markup based on the provided images
    • It should not have any display differences/issues across Firefox, Chrome or Safari desktop and mobile browsers
  • Using JavaScript:
    • Toggle a class name to show/hide the menu when on the mobile break point
    • Toggle a class name to expand/hide the details over the temporary email component
    • No other functionality is required.
  • In the PR, please include a link to your deployed PR branch review URL
    • Deploy your branch either via Github Pages, Netlify or other similar service.
    • What design tools you used to complete this task (if any).

When you're ready for me to review, please send an email to mcrawford+studentproject@mozilla.com with a link to the PR in your repo.

Considerations

• This is a time-sensitive task. We will only accept submissions until Wednesday, May 19th at 11:59PM Pacific Standard Time (GMT-8)
• This position is only available to enrolled full-time students at an educational institution. By submitting, you are confirming this is true
• Rather than include editable design files (Figma, Sketch, Adobe XD), please use the static images below and build from reference. All logos/assets have been added in assets/img directory. Hover states and other interactions have not been selected, so please use your best judgement. We also have included all text strings in this design in the _project-assets/strings.txt file
• Please use Font Awesome (already installed) for any iconography needs
• No additional scripts allowed. Keep it simple!
• Do not submit a PR to this repository. Please isolate all your code/communications to your own repository

Reference Screenshots

Use the following images as reference to build your static page. Pixel precision is not required or expected. Just keep it close!

All screenshots are included in this project under _project-assets/images/

Desktop

Temporary email component closed:

Temporary email component expanded:

Mobile

Navigation closed:

Navigation expanded:

Detailed views

Mobile Menu (Expanded)

Temporary email component