maker-pre-launch-landing-page

Maker pre-launch landing page

Solution : Live Site URL

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

The challenge

Your challenge is to build out this pre-launch landing page and get it looking as close to the design as possible.

You can use any tools you like to help you complete the challenge. So if you've got something you'd like to practice, feel free to give it a go.

Your 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 address field is empty should show "Oops! Please add your email"
  • The email is not formatted correctly should show "Oops! That doesn’t look like an email address"

Built with

• HTML
• CSS
• CSS Grid
• CSS Flexbox
• JavaScript

Experience, Challenges and Learning

The layout was a little challenging for me. I spent more time than I should have with the layout structure for each element. After almost finishing the challenge I have had bright ideas how I could do this differently, and if I had to do it again I think I've some better structural ideas for the layout. The background images/pattern are not very well positioned mostly because the way I did my markup based on the layout I had in mind. But I think I know how I could do it better. I like how customised each element of this layout is, very different flow than usual challenges. I was able to use some very specific CSS selectors for this challenge which I am very happy about as I don't usually find instances where I could use them but I am always looking for where I can use them.

---

Pending tasks

• Fix : Background images
• Fix : Email validation.
• Live solution screenshot(s)
• Submit to frontendmentor and add Solution submitted at Frontend Mentor - Submission link