Frontend Mentor - Manage landing page solution

This is a solution to the Manage 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

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
• See all testimonials in a horizontal slider
• Receive an error message when the newsletter sign up form is submitted if:
  • The input field is empty
  • The email address is not formatted correctly

Screenshot

Links

• Solution URL: Add solution URL here
• Live Site URL: Add live site URL here

My process

Built with

• Semantic HTML5 markup
• CSS
• Flexbox
• CSS Grid
• Mobile-first workflow
• JS
• Tailwindcss - CSS framework

What I learned

First I did this project with tailwind because I want to know how it works, therefore I learned a lot about tailwind. What I can highlight the most is the use of areas that I had never used before and I think it is a great function of the tailwind components.

<form
  id="subscription-form"
  class="flex gap-4 w-full min-w-[100px] [grid-area:form]"
></form>
<div
  lass="flex flex-wrap gap-4 justify-between w-full [grid-area:social-media]"
></div>
<a href="#" class="[grid-area:logo]"></a>
<p
  class="text-dark-grayish-blue text-center [grid-area:copy] md:text-right"
></p>

.footer-area {
  grid-template-areas:
    "form"
    "navigation"
    "social-media"
    "logo"
    "copy";
}
.footer-area-md {
  grid-template-areas:
    "logo           navigation   form"
    "social-media   navigation   copy";
}

Continued development

As I mentioned previously, it is one of my first projects with tailwind, therefore I consider myself a novice with it, I will continue to focus on learning its functionality in new projects, since I am looking to apply it together with the [Astro] (https://astro.build) framework.

Useful resources

• SwiperJS - This helped me generate the testimonials slider faster. I really liked this library and will use it in the future.

Author

• Website - Diego Aguilar Zeledón
• Frontend Mentor - @slinky97