ankan-782 / manage-landing-page-html-css-javascript

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

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
  • Links
  • The challenge
  • How to run
  • Screenshot
• My process
  • Built with
  • What I learned
  • Continued development
  • Useful resources
• Author

Overview

Links

• Solution URL: github link
• Live Site URL: live site link

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

How to run

• Clone the repository:

git clone https://github.com/ankan-782/manage-landing-page-html-css-javascript.git

• Navigate to the project directory:

cd manage-landing-page-html-css-javascript

• Install dependencies:

npm install

• run the project:

npm run dev

Screenshot

My process

Built with

• Semantic HTML5 markup
• CSS custom properties
• Flex-box
• CSS Grid
• Position
• Mobile-first workflow
• Javascript

What I learned

• First of all I have learned how to design a full web app not only for normal users but also for screen readers. Although I knew basic accessibility about every application should be designed a way that screen readers can also go through every page. But during the project, I have learned and applied more accessibility settings.

• I have learned and applied more css "base styles" and "reset styles" for any kind of web application. Without using any css framework. Just using vanilla css. One example is given below:

ul[role='list'],
ol[role='list'] {
    list-style: none;
}

• I knew little bit about css custom properties and the uses of those. But during doing the project, I have found many more uses of css custom properties and I used those maximum of creating utility classes. Like:

:root {
    --fs-40: 2.5rem;
    /* ---------------- */
    /* ---------------- */
    --fs-primary-heading: var(--fs-40);
}

.fs-primary-heading {
    font-size: var(--fs-primary-heading);
}

Continued development

These are the areas that I would like to focus more in future projects

• I found learning and applying more creating css custom properties and more utility classes and use those developing the site more effectively.

Useful resources

• Andy Bell modern css reset - This helped me for writing css "base style" and "reset style" reason. I really liked this pattern and will use it going forward.
• a11y js slider - This is a website called a11y slider which is basically applying different slider into websites. I brought a slider and applied in carousel section.

Author

• Website - Avijit Roy
• Frontend Mentor - @ankan-782
• Twitter - @AvijitAnkan