DEV Community

Jennifer Tieu
Jennifer Tieu

Posted on

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

Today I continued working on the styling of my Rock Paper Scissors UI.

While I trying to add some finishing touched to my CSS layout, I realized I didn't really like how to set it up the first time. I think I might've been too focused on grouping the elements and not really understanding grid well. Now, I want to rearrange my layout.

CSS Games: Flexbox Froggy and Grid Garden.

I decided to do practice some CSS through games I found posted by Sajal Sharma on Twtter. Specifically, Flexbox Froggy and Grid Garden. It was fun practicing in a game format and I feel a lot more comfortably using flex and grid now. I'm hoping to apply flex and grid better when I rearrange my HTML and CSS layout.

Mike Chen and Allyse Arucan Twitch Stream

I really enjoy watching developer streams. It's so helpful to me to watch an experience developer talk through their thought process, tips, and visually seeing what their doing. I'm still looking for more streamers to follow, specifically frontend developers.

I've been watching streams by Mike Chen and recently he did a live code review with Allyse Arucan which I thought was very helpful. I'm still going through it, but I took a few notes on things that jumped out to me.

  • When creating CSS classes, think about where else you can use it in your code base (reusability)
    • For example, reusing text styling and creating a class for it so it can be used for other elements
  • In the Developer Tools, you drag HTML elements to move them in a block of code
    • use the "H" key to hide elements and determine hierarchy

There are a few more tips I forgot to note, but planning to watch it through again.

Resources

The Odin Project
Revisiting Rock Paper Scissors

Discussion (0)