Frontend Mentor - Bookmark landing page solution

This is a solution to the Bookmark landing page challenge on Frontend Mentor. Frontend Mentor challenges help you improve your coding skills by building realistic projects.

Table of contents

• Overview
  • The challenge
  • Screenshot
  • Links
• My process
  • Built with
  • What I learned
  • Continued development
  • Useful resources
• Author
• Acknowledgments

Overview

The challenge

Users should be able to:

• View the optimal layout for the site depending on their device's screen size
• See hover states for all interactive elements on the page
• Receive an error message when the newsletter form is submitted if:
  • The input field is empty
  • The email address is not formatted correctly

Screenshot

Links

• Live Site URL: Bookmark Landing Page - Netlify

Built with

• Semantic HTML5 markup
• CSS custom properties
• Flexbox
• CSS Grid
• Mobile-first workflow
• TailwindCss - Css library

What I learned

While working on the project using TailwindCss, I learnt how to write reusuable Css codes.

.btn {
    @apply shadow-md py-3 px-6 rounded-md transition duration-300;
}

.btn-purple {
    @apply bg-bookmark-purple text-white;
}

.btn-white {
    @apply bg-bookmark-white
}

Continued development

I will be focusing more on how to make the web page more interactive using Javascript.

Author

• Frontend Mentor - @adefaze
• Twitter - @adefaze