Tic Tac Toe

Tech Stack

HTML | JavaScript | React | Tailwind.css

Code & Live Demo

project overview

This project is a dynamic web application built with foundational web technologies: HTML, CSS, and JavaScript. The application features a clean and intuitive user interface, ensuring that even users with minimal technical expertise can navigate it effortlessly.

JavaScript allowed me to provide real-time interactivity, enabling users to play the game with dynamic updates, winning scores, and a reset button.

 

 

tic tac toe hero

what I did

I structured the HTML to create a semantic and ensured that the content is easily readable by browsers and also considered accessibility with strong colour contrast.

For the styling, I used classic CSS with a focus on creating reusable and maintainable design elements. I implemented a system of utility classes for global colours. This approach not only streamlined the development process but also ensured that any future updates to the colour scheme could be implemented efficiently by simply adjusting the global colour variables.

JavaScript was integrated to add interactivity in the application to add interactivity. I structured the JavaScript code in a modular fashion, enabling easy maintenance and future scalability.

 

tic tc toe code

summary

The result of this project is a fully functional, responsive web application that effectively combines the strengths of HTML, CSS, and JavaScript. The use of utility classes for global colours in CSS proved to be a powerful technique, ensuring consistency across the site while allowing for easy adjustments.

The application not only meets the initial project requirements but also provides a smooth and engaging user experience, demonstrating the effectiveness of careful planning and execution in web development.

tic tc toe gif

Developed with ♥ by Ray Brown

0.18g of CO2/viewWebsite Carbon
 Cleaner than 82% of pages tested