DEV Community

Jennifer Tieu
Jennifer Tieu

Posted on

2

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

Today I set up the HTML elements for the Rock Paper Scissors UI based on my mockup from the previous post.

Mockup

I added each component in the mockup as its own block following the BEM methodology naming (I wanted to try and work on naming).

"Block which holds everything (elements) inside and acts as a scope."

Then I included the elements for each part of the block. No modifiers yet. I also chose to use div elements. I was not sure what semantic elements to use in this case.

Rock Paper Scissors HTML

Resources

The Odin Project
Revisiting Rock Paper Scissors
http://getbem.com/naming/
https://www.devbridge.com/articles/implementing-clean-css-bem-method/

Hostinger image

Get n8n VPS hosting 3x cheaper than a cloud solution

Get fast, easy, secure n8n VPS hosting from $4.99/mo at Hostinger. Automate any workflow using a pre-installed n8n application and no-code customization.

Start now

Top comments (0)

Qodo Takeover

Introducing Qodo Gen 1.0: Transform Your Workflow with Agentic AI

Rather than just generating snippets, our agents understand your entire project context, can make decisions, use tools, and carry out tasks autonomously.

Read full post