This project is part of Hiring Coders bootcamp.
The user should be able to subscribe to receive e-mails of the campaign, the data is saved in local storage.
The challenge was to create a landing page of an e-commerce to promote a campaign.
- The user should be able to subscribe in the campaign
- The data should saved in local storage
- Show error messages when user doesn't input a valid e-mail
- The page should be responsive
 |
 |
 |
|
First, I created the page's design, I started this process creating a wireframe.
Then I got some inspirations for color scheme in Dribbble and I got fonts for the logo and page content in Google Fonts.
I prototyped the page in Figma, I began with the mobile version. The result is in this link.
After, I started working in the code, I focused first in the desktop version and then use media queries to adapt the layout to mobile devices.
- Semantic HTML5 markup
- CSS custom properties
- CSS Grid and Flexbox
- ReactJS
I could practice my design skills and I learn about browser support. During the development, I tested the page in some devices and different browsers.
Some issues I encontered was related to CSS properties that behave different in browsers that are webkit based and not webkit based, e.g: Chrome and Firefox.
This problems also was related to desktop version and mobile version of the browsers, I looked into Can I use It website to check what could break depending on the browser and it's version.
Download this repository and run one of the commands below to install all dependencies:
yarn or npm install
Use one of the commands below to run the project:
yarn start or npm run start
Open your browser and go to http://localhost:3000/