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.
- Solution URL: github link
- Live Site URL: live site link
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
- The
- 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
- Semantic HTML5 markup
- CSS custom properties
- Flex-box
- CSS Grid
- Position
- Mobile-first workflow
- Javascript
-
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);
}
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.
- 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.
- Website - Avijit Roy
- Frontend Mentor - @ankan-782
- Twitter - @AvijitAnkan