Bookmark is a simple landing page for an imaginary tool for browser bookmark managememt. It is based on a challenge from Frontend Mentor and the live site can be accessed here
This project mainly made me work on my CSS and JS skills and my abilit to replicatea design, as it features multiple sections that are slightly more advanced than what I had seen in previous projects. Aside from that, I enjoyed coding this page because it really does follow a design that makes sense for an actual company.
This project was built responsively with HTML, CSS, and JS in their purest form. The design attempts to replicate the template provided by the challenge as closely as possible. THe most challenging aspect of the project was defintely the slider between the three tabs, as it was my first time building one and the fact that the images came in slightly different proportions made me figure out how to get it to work with absolute positioning.
In order to deploy the project, I used the free hosting platform Vercel.
As previously mentioned, the project features a slider containing three content blocks, only one of which is displayed at a time. The section is animated with a subtle fade-in effect and is of course adapted for mobile devices.
This was my second time building an FAQ section similar to this, only this time I went the extra mile to animate it and make sure that only one question can be opened at a time to improve user experience. I do have to confess that I took the easy way out by using Lorem Ipsum placeholder text, but the functionality is all there ;)
At the very bottom of the page, you will an email signup simulation which is equipped with front end validation.
This project certainly has potential to be built out in the future, as it is a digital tool that I would enjoy developing once I become more comfortable with back end technology. For now, however, the landing page has been fully developed as it pertains to the front end.
- Frontend Mentor Challenge: https://www.frontendmentor.io/challenges/bookmark-landing-page-5d0b588a9edda32581d29158