• Overview
• The challenge
• Screenshot
• Links
• Built with
• What I learned
• Continued development
• Author

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

• see live

• Flexbox
• Mobile-first workflow
• TypeScript
• Styled Components - For styles

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,

@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

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.

👤 Akite Donald

• GitHub: @Donald
• Twitter: @AkiteDonald
• LinkedIn: @AkiteDonald