DEV Community

Jennifer Tieu
Jennifer Tieu

Posted on

3

Self-Taught Developer Journal, Day 50: TOP Building Rock Paper Scissors UI cont.

#webdev #beginners #codenewbie #devjournal

Today I worked on the UI layout.

I started with using flexbox to center the main game UI, I created a flex-container class with my only flex item being the grid container for the grid. Next, I'm arranged the elements with CSS grid to fit the mockup I created.

Rock Paper Scissors UI

I ended up removing some container classes I created when I was using flexboxes because they are not longer applicable. I was having issues setting the flex-container to take up the whole screen and ended up Googling it. I found a good article that helped: https://softauthor.com/css-make-a-div-height-full-screen/.

After messing around with grid and its properties. I was able to set up a 3 by 3 grid. It's more or less coming together.

Layout Example

I think I have it at a good place to start working on the JavaScript and then come back to make it better.

Make it work, Make it right, Make it better

Resources

The Odin Project
Revisiting Rock Paper Scissors

profile
Sentry
 Promoted

Billboard image

If seeing this in NextJS makes you 🤮, get Sentry.

Try Sentry

Top comments (0)

profile
Coherence
 Promoted

Billboard image

The Next Generation Developer Platform

Coherence is the first Platform-as-a-Service you can control. Unlike "black-box" platforms that are opinionated about the infra you can deploy, Coherence is powered by CNC, the open-source IaC framework, which offers limitless customization.

Learn more

Read next

indrayyana profile image

How To Set Up and Configure Gmail SMTP Server for Email Sending

Indra Adnyana -

kocreative profile image

Scripting: Creating Windows For Your After Effects Scripts

Kat -

arbythecoder profile image

Day 40: Implementing Advanced Role-Based Access Control (RBAC) with OPA Gatekeeper

Arbythecoder -

zirkelc profile image

TypeScript CLI: Automate Build and Deploy Scripts

Chris Cook -