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.
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
- Solution URL: ttps://www.frontendmentor.io/solutions/bookmark-page-built-with-bootstrap-parcel-sass-and-validatorjs-OH9JOy6BY
- Live Site URL: https://bookmark-landing-page-dimolf345.netlify.app/
- Semantic HTML5 markup
- Bootstrap customized
- Sass
- Parcel
- Flexbox
- CSS Grid
- Desktop-first workflow
With this project I tryed to customized Bootstrap Library, including the framework inside my Parcel bundler and then applying custom styles. I learned also the basics of form validation, which in this project is done with the help of the Validator.js library. To built the HTML & CSS Markup, I tried to follow the steps detailed in the article A step by step guide to turn design into code
This project Is almost competed with all the requirement of the challenges but It's far to be perfect. So maybe next month I will try to reopen again the code and see if the code is readable and understandable again.
I hope you will find my resources helpful for your projects too. ;)
- Frontend Mentor - @dimolf345