/shopright

a homepage for an e-commerce website

Primary LanguageTypeScript

Room homepage

Table of contents

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

Screenshot 2024-06-07 at 12 46 33 AM Screenshot 2024-06-07 at 12 46 33 AM

Links

Built with

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,

@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. Screenshot 2024-06-07 at 12 46 52 AM

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