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
• Acknowledgments

Overview

The challenge

Users will be able to:

• View website on all display
• See hover state on all interactive element
• See all testimonials in a horizontal slider
• user will 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://your-solution-url.com)
• Live Site URL: (https://manage-landing-page-y.netfix.app)

My process

Built with

• Semantic HTML5 markup
• CSS custom properties
• Flexbox
• CSS Grid
• Mobile-first workflow
• vite - A development tool
• [vanilla.js] plain javascript

What I learned

• I learned how to improve accesibility for those thar uses screen reader

• I learned how to use count

.numbered-items {
  counter-reset: count;
}

.numbered-items li {
  counter-increment: count;
}

.numbered-items div::before {
  content: "0" counter(count);
  display: flex;
  align-items: center;
  background-color: var(--clr-accent-400);
  color: var(--clr-neutral-100);
  font-weight: var(--fw-bold);
  padding: 0 var(--size-500);
  border-radius: 100vw;
  grid-row: 1 / 2;
  grid-column: 1 / 2;
}

Useful resources

• Swiper - This is what i used for the slider. I really liked the simplicity and the easy usage
• kevin powell - This is an amazing youtube channel and i have learned alot from the channel and i coded along with him on this project.

Author

• Frontend Mentor - @yourusername
• Twitter - @y_ysf_a

Acknowledgments

@kevinjpowell did this project in his series on his youtube channel and I coded along with him. Through this series i have improve in my css.