Rock, Paper, Scissors

The Odin Project Web Dev 101 has a coding project to build a rock, paper, scissors game.

At first you create the JavaScript logic and it works entirely in the browser console.

Next, after learning DOM manipulation, you build a UI for it.

My project is live here:

rockpaperscissors-pc.png

I enjoy UI design, and I tried to make it look cute but also similar to an old video game – especially the fonts.

I made the design responsive using media queries. This is how it would look on an iPhone 7.

rockpaperscissors-iphone6.png

rockpaperscissors-iphone-horizontal.png

It was my first time building anything with JavaScript so it was a challenge. But I started to feel like “yeah, I am really making progress!”

The JavaScript in freecodecamp is where I got stuck and gave up many years ago, so I’m glad to be breaking through that barrier.

Advertisements

Google Layout HTML/CSS Project

I am (still) working on the web development 101 section of the Odin Project curriculum.

The first project you are tasked with is using your basic HTML and CSS knowledge to copy the design and layout of the Google Homepage (easier task) and/or the Google Search Results page (difficult task).

Screen Shot 2018-11-22 at 18.24.37.png
You have to build this webpage as part of the Odin Project curriculum

I wrote about finishing the easier page just before Halloween. It’s taken me almost a month, but I finally finished the Hard challenge after a full day coding at home today.

The Process

I started from planning out the layout on paper and figuring out what I needed to do, how the page would be divided and what sections I would need to create.

IMG_2968.jpg
Image © Rebeccode

Then, I started coding and trying things out.

I also had a chance to practice my terminal and git skills to keep versions of the data as I added and changed things.

I had a hard time getting my head around layouts, so I tried to make the Homepage using floats. And then make the search page mostly using flexbox. It was tricky but I found using cheat sheets like this one helped a lot.

Quick Tip:
A lot of times I was confused about why something worked or didn’t work. I tried commenting out the CSS (by hitting Command and /) to see what effect taking out the code made.

The Result

I’m really happy with the result and it is the first time I really “built” something substantial using my coding skills since I was a kid, so it’s a really proud moment!

Screen Shot 2018-11-22 at 18.25.56.png

It’s live here.