Frontend Mentor - Bookmark landing page solution

This is a solution to the Bookmark 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

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
• Receive an error message when the newsletter form is submitted if:
  • The input field is empty
  • The email address is not formatted correctly

Screenshot

![]()

Links

• Solution URL: Check out my solution on Front end mentor
• Live Site URL: Check out the live site

My process

Built with

• Semantic HTML5 markup
• JSX syntax
• CSS custom properties
• Flexbox
• CSS Grid
• Javascript(ES14)
• Mobile-first workflow
• React - JS library
• Vite - Build tool

Insights Gained

Embarking on this project marked the initial step in applying my newly acquired React skills. The experience was both enlightening and enjoyable, largely owing to React's efficiency and ease of use. Unlike traditional approaches where code tends to accumulate in a single file, causing confusion, React empowered me to break down my code into manageable components. Leveraging reusable components not only streamlined the development process but also minimized redundancy. Through this project, I consolidated my understanding and utilization of essential React concepts such as useState for managing component state, props for passing data between components e.t.c.

Moreover, the adoption of Vite as the build tool greatly enhanced my development workflow. Vite's fast, modern build system enabled rapid iteration and hot module replacement, allowing me to see immediate updates in the browser without the need for manual refreshing. By eliminating the overhead of bundling during development, Vite provided a seamless development experience, boosting productivity and enabling faster feedback cycles.

Continued development

I am excited about furthering my journey with React and delving into more advanced concepts. Building more projects with React will not only reinforce my existing skills but also provide opportunities to explore and implement advanced techniques. I am particularly eager to deepen my understanding of advanced React concepts and frameworks, leveraging them to create even more sophisticated and impactful applications.

Useful resources

• React Doc - An invaluable resource offering comprehensive insights and guidance on mastering React development.

Author

• Linkedin - Martins Ogundipe
• Frontend Mentor - Martinsgundi
• Twitter - Martinsgundi1