https://github.com/quavo19/shopright
a homepage for an e-commerce website
https://github.com/quavo19/shopright
reactjs typescript
Last synced: 2 months ago
JSON representation
a homepage for an e-commerce website
- Host: GitHub
- URL: https://github.com/quavo19/shopright
- Owner: quavo19
- Created: 2024-06-04T00:18:46.000Z (about 1 year ago)
- Default Branch: main
- Last Pushed: 2024-06-07T10:30:32.000Z (12 months ago)
- Last Synced: 2025-02-04T04:14:46.068Z (4 months ago)
- Topics: reactjs, typescript
- Language: TypeScript
- Homepage:
- Size: 559 KB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Room homepage
## Table of contents
- [Overview](#overview)
- [The challenge](#the-challenge)
- [Screenshot](#screenshot)
- [Links](#links)
- [Built with](#built-with)
- [What I learned](#what-i-learned)
- [Continued development](#continued-development)
- [Author](#author)
## Overview
### The challenge
A user can:
- View the optimal layout for the site depending on their device's screen size
- See hover states for all interactive elements on the page
- Navigate the slider using either their mouse/trackpad or keyboard
### Screenshot
### Links
- [see live](https://reliable-cocada-08475f.netlify.app/)
### Built with
- Flexbox
- Mobile-first workflow
- [TypeScript](https://www.typescriptlang.org/docs/)
- [Styled Components](https://styled-components.com/) - For styles
### What I learned
I learned to leverage styled components in React for dynamic styling based on screen width, enabling responsive design. Additionally, I gained proficiency in utilizing TypeScript to add type safety and enhance the development experience, ensuring robust code. This combination empowered me to create more adaptable and maintainable web applications.
below is some code I'm proud of,
```css
@media (min-width: 781px) and (max-width: 850px) {
li:nth-last-child(2) {
color: black;
}
li:last-child {
color: black;
}
}
@media (min-width: 851px) and (max-width: 1030px) {
li:last-child {
color: black;
}
}
```
the above code allows me to change the color of the navigation list items based on the size of the screen.
as seen above
### Continued development
I aspire to enhance my proficiency in utilizing CSS-in-JS libraries like styled-components to create visually appealing and responsive user interfaces. also, I plan to explore backend technologies such as Ruby and databases like PostgreSQL to broaden my skill set and develop full-stack applications.
## author
👤 **Akite Donald**
- GitHub: [@Donald](https://github.com/quavo19)
- Twitter: [@AkiteDonald](https://twitter.com/DonaldAkite)
- LinkedIn: [@AkiteDonald](https://www.linkedin.com/in/donald-akite-299a31222/)