Frontend Mentor - Rock, Paper, Scissors solution

This is a solution to the Rock, Paper, Scissors challenge on Frontend Mentor.

Table of contents

• Overview
  • The challenge
  • Screenshots
  • Links
• My process
  • Built with
  • What I learned
  • Continued Development
• Author

Overview

The challenge

Users should be able to:

• View the optimal layout for the game depending on their device's screen size
• Play Rock, Paper, Scissors against the computer
• Maintain the state of the score after refreshing the browser

Screenshots

Desktop View	Mobile View
Home
Rules
After selecting input
House Picked
Win
Lose

Links

• Solution
• Live Page

My process

Built with

• Semantic HTML5 markup
• CSS custom properties
• Flexbox
• CSS Grid
• Desktop-first workflow

What I learned

I have gained a better understanding of developing websites that are responsive and adapt effectively to various screen sizes. This knowledge has allowed me to optimize my development process and create designs that work seamlessly on different devices. Additionally, I have expanded my proficiency in CSS properties such as flex and grid, which have enabled me to implement more sophisticated and dynamic visual effects on my web pages.

Continued development

I am enthusiastic about expanding my knowledge in designing websites that effectively cater to different screen sizes. Specifically, I am determined to become proficient in utilizing the power of CSS flexbox and grid layouts to create responsive and visually appealing designs. Additionally, I am eager to explore the possibilities of enhancing interactivity and responsiveness by leveraging JavaScript. My goal is to master these techniques to deliver seamless and engaging user experiences across a wide range of devices and platforms.

Author

• Email - [email protected]
• Frontend Mentor - @hemanth110702

⬆️ Back to Top