This is a solution to the Single price grid component 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 component depending on their device's screen size
- Solution URL: https://github.com/chaitanya71998/Single-price-grid-component/tree/responsive-card-version-v1
- Live Site URL: https://chaitanya71998.github.io/Single-price-grid-component/
- First looked up complete layout for dividing component
- divided them to subtasks
- planned css and html structure
- created react app
- added typescript
- Development of layout responsively
- integrating with git
- deployed using github pages
- CSS custom properties
- Flexbox
- Mobile-first workflow
- React - JS library
- Styled Components - For styles
I have revised building components and simple sectional responsive layouts.
also from this challenge I started to create my first github page site.
Faced challenges:
- creating of react repo with typescript
- Integrating local repo with remote github(fixed with newly generated access token from github developer settings)
- deploy using github pages
This will be helpful to guide us in building and deploy our project
- Frontend Mentor - @chaitanya71998
- Twitter - @ChaitanyaTerli
Thanks to mattstuddert for his article on 16 front-end projects (with designs) to help improve your coding skills from where I came to know about this challenge. Also big thanks to frontendmentor