Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/lucajahnen/bookmark-landing-page
Landing page challenge provided by frontendmentor.io
https://github.com/lucajahnen/bookmark-landing-page
landing-page vanilla-css vanilla-js
Last synced: 1 day ago
JSON representation
Landing page challenge provided by frontendmentor.io
- Host: GitHub
- URL: https://github.com/lucajahnen/bookmark-landing-page
- Owner: LucaJahnen
- Created: 2024-05-02T16:23:25.000Z (8 months ago)
- Default Branch: main
- Last Pushed: 2024-06-30T13:49:07.000Z (7 months ago)
- Last Synced: 2024-11-11T22:14:50.847Z (2 months ago)
- Topics: landing-page, vanilla-css, vanilla-js
- Language: CSS
- Homepage: https://bookmark-landing-page354.netlify.app
- Size: 119 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Frontend Mentor - Bookmark landing page solution
This is a solution to the [Bookmark landing page challenge on Frontend Mentor](https://www.frontendmentor.io/challenges/bookmark-landing-page-5d0b588a9edda32581d29158). Frontend Mentor challenges help you improve your coding skills by building realistic projects.
## Table of contents
- [Overview](#overview)
- [The challenge](#the-challenge)
- [Screenshot](#screenshot)
- [Links](#links)
- [My process](#my-process)
- [Built with](#built-with)
- [What I learned](#what-i-learned)
- [Continued development](#continued-development)
- [Useful resources](#useful-resources)
- [Author](#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: [https://www.frontendmentor.io/solutions/responsive-bookmark-landing-page-7ZiTV-xjjN](https://www.frontendmentor.io/solutions/responsive-bookmark-landing-page-7ZiTV-xjjN)
- Live URL: [https://bookmark-landing-page354.netlify.app](https://bookmark-landing-page354.netlify.app)
## My process
### Built with
- Semantic HTML5 markup
- vanilla css and vanilla js
- Mobile-first workflow
- Tested with Google Lighthouse
### What I learned
```html
What is Bookmark?
Lorem ipsum dolor sit amet.
```
This project required a faq-section which is built using the details and summary tag. I never built this kind of section before so it was my first time using these elements. I also decided to use data-attributes to store the state of each element because in my opinion data-attributes are quite easy to use.
### Continued development
In the future I want to continue building landing pages like this one using the challenges provided by frontendmentor. I would also like to improve my knowledge about react thus I want to complete one of frontendmentor's challenges using react or I might choose to complete one of the challenges provided by TheOdinProject.
### Useful resources
Concering this challenge I had to use RegEx to validate that the email input really is a valid email. I had never done form validation with RegEx and therefore looked it up on stackoverflow where I could find this useful solution: [https://stackoverflow.com/questions/46155/how-can-i-validate-an-email-address-in-javascript](https://stackoverflow.com/questions/46155/how-can-i-validate-an-email-address-in-javascript)
After further research I also found this article about RegEx by Samyak Jain on FreeCodeCamp: [https://www.freecodecamp.org/news/regex-in-javascript/](https://www.freecodecamp.org/news/regex-in-javascript/)
## Author
- Github - [@LucaJahnen](https://github.com/LucaJahnen)
- Frontend Mentor - [@LucaJahnen](https://www.frontendmentor.io/profile/LucaJahnen)