https://github.com/birushandegeya/community
Real life project provided by Frontendmentor.io
https://github.com/birushandegeya/community
educational-project front-end-development frontendmentor-challenge
Last synced: 2 months ago
JSON representation
Real life project provided by Frontendmentor.io
- Host: GitHub
- URL: https://github.com/birushandegeya/community
- Owner: BirushaNdegeya
- Created: 2023-09-12T11:04:12.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2024-03-01T07:28:39.000Z (about 1 year ago)
- Last Synced: 2024-03-01T18:37:41.307Z (about 1 year ago)
- Topics: educational-project, front-end-development, frontendmentor-challenge
- Language: CSS
- Homepage: https://single-price-grid-component-dusky-three.vercel.app/
- Size: 158 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Frontend Mentor - Single price grid component solution
### Screenshot
### Links
- Solution URL: [MySolutionURL](https://www.frontendmentor.io/solutions/responsive-single-price-grid-component-ZT_wK4tebQ)
- Live Site URL: [LiveSiteURL](https://single-price-grid-component-dusky-three.vercel.app/)
## My process
### Built with
- Semantic HTML5 markup
- CSS custom properties
- Flexbox
- CSS Grid
- Mobile-first workflow
- For styles
### What I learned
Completing the Single Price Grid Component challenge from Frontendmentor.io was a pivotal learning experience for me. It enabled me to delve into the intricacies of responsive design and effectively translate a Figma design into HTML & CSS code. This challenge not only honed my technical skills but also taught me how to think responsively while crafting designs. I'm grateful for the opportunity to grow through this project.
```html
Join Our Community
```
```css
@media (min-width: 576px){
#card {
height: 400px;
}
#bottom-section{
flex-direction: row;
}
#bottom-left-section, #bottom-right-section {
flex-grow: 1;
}
}
```
### Continued development
I am transitioning towards building all of my websites using the React JavaScript Library, while adhering to the Google Material Design principles. This shift enables me to leverage the powerful capabilities of React for efficient development, while also ensuring that my designs align with the established usability and aesthetic standards advocated by Google's Material Design principles.
## Author
- Website - [birushandegeya](https://myportfolio-chi-mocha.vercel.app/)
- Frontend Mentor - [@BirushaNdegeya](https://www.frontendmentor.io/profile/yourusername)
- Twitter - [@BirushaNdegeya](https://twitter.com/BNdegeya62741)
## Acknowledgments
I am deeply grateful to Zack from Free Code Camp for his invaluable guidance throughout this project. His expertise not only helped me navigate through the challenges but also taught me the intricacies of creating responsive designs. Zack's mentorship was instrumental in organizing this project effectively, and I am truly thankful for the knowledge and skills he imparted.