Front End Developer Challenge

Desktop Preview

Welcome! 👋

Thanks for taking the time to check out this code challenge.

To complete this challenge, you need a basic understanding of HTML, CSS, and JavaScript.

The Challenge

Your goal is to create a landing page that looks as close as possible to the designs included in the design folder.

Please do not use any third-party libraries, frameworks, or components for this challenge. All markup and code should be written from scratch in plain HTML, CSS, and JavaScript.

General Notes

  • Links don't need to point anywhere (# works fine)
  • The form doesn't need to lead anywhere but it does need to be styled
  • Menu(s) should be implemented but it's up to you how you'd like them to function
  • The mobile layout is only available in .png format - it is not included in the Sketch or Figma files
  • If you're unable to open the .sketch or .fig file, please refer to the .pdf or .png files~ instead
  • If you're unsure about something, please use your best judgment to determine a solution

High Priority Items

Below are things you should pay particular attention to when completing this challenge.

  • Responsive design and development
  • Page performance (e.g. loading speed)
  • Interactive element states (e.g. hover, focus, etc.)

Low Priority Items

Below are things you should not worry about when completing this challenge.

  • Exactly matching the fonts and icons
  • Exactly matching the text content from the design (placeholder text is fine)

Extra Credit

  • If you notice a flaw or potential improvement in the page design, point it out and explain it at the bottom of this file.

Getting Started

  1. Set up this project with version control (e.g. Git)
  2. Read this README.md file and familiarize yourself with the project structure
  3. Start coding!

Submitting Your Solution

  1. Upload your completed work to a public GitHub repository
  2. Share the link to this repository with your interviewer

Flaws/Improvements

  • Anything that needs improvement?

Have fun building! 🚀

My Additions/Edits

Removing the hamburger menu on desktop because it's not needed.

Added a log in button since this site has account functionality.

I also made the default password eye icon to be non slashed because buttons should describe what they should do not the current state.