Frontend Mentor - Manage landing page solution

This is my solution to the Manage landing page challenge on Frontend Mentor.

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: https://github.com/daHatta/fem-manage-landing-page
• Live Site URL: https://fem-manage-landing-page-tawny.vercel.app/

My process

Built with

• Semantic HTML5 markup
• CSS custom properties
• Flexbox
• CSS Grid
• Mobile-first workflow
• Tailwind CSS - CSS framework
• Next.js - React framework
• Styled Components - For styles

Packages:

// ...
"dependencies": {
  "@hookform/resolvers": "^3.3.4",
  "next": "14.1.3",
  "react": "^18",
  "react-dom": "^18",
  "react-hook-form": "^7.51.0",
  "swiper": "^11.0.7",
  "zod": "^3.22.4"
},
//...

What I learned

For now this was the biggest challenge for me, where I used next.js and tailwind css to solve it.

Beside tailwind css I also used plain CSS at several occasions.

In order to prevent doubling code, I used grid with named areas for the footer:

/* ... */
#footer > div {
  grid-template-areas:
    "newsletter"
    "navi"
    "social"
    "logo"
    "copyright";
  grid-template-rows: 5fr;
  grid-template-columns: 1fr;
}
/* ... */
#footer > div {
  grid-template-areas:
    "logo navi newsletter"
    "social navi copyright";
  grid-template-rows: 2fr;
  grid-template-columns: min-content auto min-content;
}
/* ... */

I also used the !important property in order to customize the appearance of the swiper carousel:

/* ... */
.swiper-horizontal > .swiper-pagination {
  bottom: 0 !important;
}

.swiper-pagination-bullet {
  background: var(--veryLightGray) !important;
  border: 1px solid var(--brightRed) !important;
  opacity: 1 !important;
}

.swiper-pagination-bullet-active {
  background-color: var(--brightRed) !important;
}
/* ... */

I received the biggest learning curve on the next.js side:

1. by implementing the form validation for the newsletter feature.
2. by implementing an overlay for the mobile menu.
3. swiper wasn't new to me, but new was the implementation in react.

Continued development

Was a great challenges with some advanced topics like form validation and responsive sliders which where a bit harder to solve for me in Nextjs than in plain JavaScript. To improve my nextjs skills I will definitivly look out for further challenges which I look forward to solve with the techniques used in this challenge.

Useful resources

• Tailwind Crash Course | Project From Scratch - Great tutorial by Brad Traversy from Traversy Media dealing with this challenge.
• Build a responsive website with HTML & CSS | Part one: Analyzing the project and setting the stage - Great video series by Kevin Powell dealing with this challenge.
• Tailwind CSS Cheat Sheet - Tailwind CSS cheat sheet by tailwindcomponents.
• React Hook Form (+ Zod & TypeScript & Server Errors) - COMPLETE Tutorial - Awesome tutorial by Wesley aka ByteGrad.
• Zod - TypeScript-first schema validation with static type inference.
• Swiper React Components - Swiper for carousels in React.
• SwiperJS. React swiper js. How to use react-swiperjs and create a carousel (with source code) 2023 - Nice tutorial for implementation of SwiperJS by Makysm Rudnyi of Travels Code.
• Image Gallery in NextJs Using SwiperJs - Another great tutorial by Hamed Bahram.
• Create a Modal/Overlay using React.js and CSS - Nice tutorial by The Opinionated Dev about the implementation of an overlay.

Author

• Frontend Mentor - @daHatta