Rebecca Learns to Code!

Until a few months ago, I had zero coding experience. Like many of the not yet initiated, I was really intimidated and wasn't sure coding was something I would be able to learn. Then in my UX class at General Assembly, we did a short unit on HTML and CSS. It was a little overwhelming at first — I kept forgetting to close tags and stuff — but after a couple of days, I started getting the hang of it. I surprised myself by really getting into (and obsessing about) the project.

I’d gotten the hang of the basics, but I knew enough to know there was still a lot I didn’t know. I decided there was no reason I couldn’t try learning some more code on my own. I spent the next couple of months taking some online tutorials. I was energized by all my new skills, but I wanted to see if I could actually use them to build something.


My Design Process

The goal of my site was to be a portfolio piece that would demonstrate my coding skills and be something fun and memorable. I came up with the robot vs dinosaur concept, and that seemed pretty funny, but I still needed to flesh out the idea. I started off by making a list of all the techniques I wanted to include in my site, like animations and responsive design (so it looks good on different-sized devices). I was all excited about getting started with coding, but I knew I needed a solid design first. I went through a ton of different design ideas. At the beginning, I couldn’t decide on anything, so I started by creating some robot and dinosaur drawings in Sketch. Solidifying the look of the images helped me establish the visual tone of the site.

A bunch of iterations later (including a whole abandoned idea about famous pop culture robots and dinosaurs), I finally had the general outline of how my site would look. But I also knew that once I started coding, I might be limited by what I was able to build out. I really wanted to try parallax scrolling (where parts of the screen scroll at different speeds), even though that hadn’t been covered in any of my online videos. I looked it up online and found a few different implementation methods. At first, it did not go well, but I can be extremely stubborn. After several very frustrating days, I finally got it working. (Huzzah!)

Now that I had established the basic structure of the site, I could hammer out the details. It was an interesting experience doing both the design and the coding. Both sides ended up really informing the other because I had a very solid understanding of my abilities in both. For example, for the Western section, I wanted to make the heading look more authentic.

My first idea was to make a border around the sign, but I was pretty sure I couldn’t make anything too elaborate or customized. But, I do know how to make shapes in CSS and realized I could superimpose the corner cutouts on the sign. (Huzzah!) 

Western Heading styled in CSS

I also tried several techniques that were technically cool, but ultimately didn’t contribute to the site’s design. This included my ill-fated attempt to make the Dance Off scene flash different background colors. It worked flawlessly, but was nausea-inducing, which I think is the very definition of bad user experience.

So, a couple of weeks later, I had my finished product. Check it out! I’m really happy with the way it came out, and I feel so empowered with all my new front-end skills. (Next project: Get the hang of JavaScript?)