<p>In the February month, I decided to build the utopia.</p>
<p><img src="https://cdn.hashnode.com/res/hashnode/image/upload/v1645615678531/CCQk0Vg31.png" alt="image.png" /></p>
<h2 id="heading-inspiration">Inspiration</h2>
<p>The name utopia came from a world where knowledge is free and everyone can learn everything. With great learning, comes great testing skills hence, a quizzing app.</p>
<h2 id="heading-what-it-does">What it does</h2>
<p>The basic idea was a quiz app with different themes of quizzes, but the theme of the product made me redecide the idea, currently, the app holds quizzes of different fandoms which exist on this utopian planet. </p>
<h2 id="heading-design">Design</h2>
<p>I wanted the theme of the app to be dark in color and to give it depth, I've used a 3d icon on the homepage. </p>
<h2 id="heading-how-i-built-it">How I built it</h2>
<p>I have used HTML5 and CSS3 for the front-end part.</p>
<h2 id="heading-challenges-i-ran-into">Challenges I ran into</h2>
<ul>
<li>Layout issues because first time using CSS grid.</li>
<li>Modal was not covering the whole screen, had to fix the height of the web app.</li>
<li>At one place, CSS property was getting overridden by others, Learned about CSS specificity to solve the issue.</li>
</ul>
<h2 id="heading-what-i-learned">What I learned</h2>
<ul>
<li>Writing media queries for a mobile responsive site.</li>
<li>Working with CSS grid</li>
<li>Color Contrast </li>
<li>Creating Modal</li>
<li>CSS specificity</li>
</ul>
<h2 id="heading-whats-next-for-utopia">What's next for Utopia</h2>
<ul>
<li>Adding functionality using React</li>
<li>Leaderboard</li>
<li>User Profile</li>
<li>Show profile badge on Github</li>
</ul>
<h2 id="heading-try-it-out">Try it out</h2>
<ul>
<li><a target="_blank" href="https://utopia-quiz.netlify.app/">Website</a></li>
<li><a target="_blank" href="https://github.com/Logan1x/utopia">GitHub Repo</a></li>
</ul>


In the February month, I decided to build the utopia.


![image.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1645615678531/CCQk0Vg31.png)
 

## Inspiration
The name utopia came from a world where knowledge is free and everyone can learn everything. With great learning, comes great testing skills hence, a quizzing app.

## What it does
The basic idea was a quiz app with different themes of quizzes, but the theme of the product made me redecide the idea, currently, the app holds quizzes of different fandoms which exist on this utopian planet. 

## Design
I wanted the theme of the app to be dark in color and to give it depth, I've used a 3d icon on the homepage. 

## How I built it
I have used HTML5 and CSS3 for the front-end part.

## Challenges I ran into
- Layout issues because first time using CSS grid.
- Modal was not covering the whole screen, had to fix the height of the web app.
- At one place, CSS property was getting overridden by others, Learned about CSS specificity to solve the issue.

## What I learned
- Writing media queries for a mobile responsive site.
- Working with CSS grid
- Color Contrast 
- Creating Modal
- CSS specificity

## What's next for Utopia
- Adding functionality using React
- Leaderboard
- User Profile
- Show profile badge on Github

## Try it out
- [Website](https://utopia-quiz.netlify.app/)
- [GitHub Repo](https://github.com/Logan1x/utopia)

Building Utopia 💡

Inspiration

What it does

Design

How I built it

Challenges I ran into

What I learned

What's next for Utopia

Try it out