https://github.com/subhajitroycode/base-apparel-landing-page
https://github.com/subhajitroycode/base-apparel-landing-page
frontend frontend-mentor frontendmentor-challenge frontendmentor-challenges frontendmentor-solution html-css-javascript
Last synced: 2 months ago
JSON representation
- Host: GitHub
- URL: https://github.com/subhajitroycode/base-apparel-landing-page
- Owner: subhajitroycode
- Created: 2024-07-27T14:49:20.000Z (almost 2 years ago)
- Default Branch: master
- Last Pushed: 2024-08-01T05:04:15.000Z (almost 2 years ago)
- Last Synced: 2024-08-01T07:01:05.142Z (almost 2 years ago)
- Topics: frontend, frontend-mentor, frontendmentor-challenge, frontendmentor-challenges, frontendmentor-solution, html-css-javascript
- Language: CSS
- Homepage: https://subhajitroycode.github.io/base-apparel-landing-page/
- Size: 2.74 MB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Frontend Mentor - Base Apparel coming soon page solution
This is a solution to the [Base Apparel coming soon page challenge on Frontend Mentor](https://www.frontendmentor.io/challenges/base-apparel-coming-soon-page-5d46b47f8db8a7063f9331a0). Frontend Mentor challenges help you improve your coding skills by building realistic projects.
## Table of contents
- [Frontend Mentor - Base Apparel coming soon page solution](#frontend-mentor---base-apparel-coming-soon-page-solution)
- [Table of contents](#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)
- [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 `form` is submitted if:
- The `input` field is empty
- The email address is not formatted correctly
### Screenshot
### Links
- Live Site URL: [Click Here](https://subhajitroycode.github.io/base-apparel-landing-page/)
## My process
### Built with
- Semantic HTML5 markup
- CSS custom properties
- Flexbox
### What I learned
I learned how to use flexbox to position elements on the page. I also learned how to use CSS custom properties and how to use regex in JavaScript to validate the email address.
```js
const regex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
```
### Useful resources
- [MDN Web Docs](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Regular_expressions) - This helped me understand how to use regex in JavaScript.
## Author
- Frontend Mentor - [@subhajitroycode](https://www.frontendmentor.io/profile/subhajitroycode)
- LinkedIn - [@subhajitroycode](https://www.linkedin.com/in/subhajitroycode/)
- Twitter - [@subhajitroycode](https://www.twitter.com/subhajitroycode)