Frontend Mentor - Manage landing page solution

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

• 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
• See all testimonials in a horizontal slider
  • ✅ sequentially displaying a subset of one or more slides
  • ✅ know number of slides present as well as a current slide
  • ❌ navigate to a next and previous slides
• ✅ 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

Desktop	Mobile

Links

• Solution URL: Manage Landing Page
• Live Site URL: Manage Landing Page
• Clone this project

  $ git clone https://github.com/theomaro/manage-landing-page.git

My process

Built with

• Semantic HTML5 markup
• TypeScript language
• Flexbox & Grid
• Mobile first RWD
• Tailwindcss - CSS framework

Continued development

Some of the areas that I wish to continue focusing on in future projects are:-

• Animations
• Transitions and Transformation

Useful resources

• Tailwindcss Official Documentation - The Documentation is amazing, helps me a lot with example code and explanations.
• Tailwind Crash Course | Project From Scratch - This is an amazing project based tutorial which helped me finally understand tailwindcss framework to build a website. I'd recommend it to anyone still learning this concept.
• How To Create An Image Slider In HTML, CSS & Javascript - This is an amazing video which helped me finally understand how to create image slider to show different content. I'd recommend it to anyone still learning this concept.

Author

• Website - Mathew Maro Joseph
• Frontend Mentor - @theomaro
• Twitter - @theo_pombe

Acknowledgments

Special thanks to TraversyMedia and A gorgeous friends on the internet 👋