Maker pre-launch landing page

This is a pre-launch landing page for a digital product called Maker. The design included 3 versions for mobile, tablet, and desktop views.

Users should be able to:

• View the optimal layout depending on their device's screen size
• See hover states for interactive elements
• Receive an error message when the form is submitted if the email is not formatted correctly: should show "Oops! That doesn’t look like an email address"

This is a solution to the Maker pre-launch landing page challenge on Frontend Mentor.

Table of contents

• Overview
  • The challenge
  • Screenshots
  • Links
• My process
  • Built with
  • What I learned
  • Useful resources
• Author

Overview

The challenge

• Build out the project to the provided wireframe designs

Screenshots

Links

• Solution URL: GitHub repo
• Live Site URL: Maker - Netlify

My process

Built with

• Semantic HTML5 markup
• JavaScript
• Flexbox
• CSS Grid
• Mobile-first workflow
• Tailwind CSS - CSS framework

What I learned

With this project, I continued to grow more comfortable using Tailwind, especially while implementing a responsive design with three different versions. I also enjoyed implementing the custom email validation message using JavaScript. I used the Tailwind forms plugin for the first time on this project and found that it made the form styling quite a bit more streamlined.

Useful resources

• Tailwind Forms plugin - This plugin is really useful when styling forms with Tailwind and activates styling for state changes such as focus and valid/invalid.

Author

• Website - Kristen Monnik
• Frontend Mentor - @k-monnik
• Twitter - @kmonnik_dev
• GitHub - @k-monnik