Front-end Friday: How I got started in web dev

February 26, 2018

dev

personal

front-end friday

When I was 12 years old (7th grade), I discovered Tripod/Geocities (think Squarespace) and started making websites for my hobbies like playing bass, skateboarding, and fan sites for bands like Blink-182. I was using prebuilt themes that they had and mostly using html tags for formatting like <b>, <i>, and <marquee> because of course that was cool.

it's still cool, right?

It was fun to be able to present my content digitally and I did not think much of it aside from just being able to organize stuff I liked.

Then, the summer before high school, I started learning how to build a webpage from scratch. I was reading about table-related tags and learning about custom styling. My older brother had just taken a course in web design so he had me install Dreamweaver onto my computer since Notepad wasn’t really ideal for starting out.

I had a lot of fun bringing over the content from my Geocities sites over to these webpages I was building. I was using the map tag a lot to be able to replicate similar designs. Definitely not something I’d recommend these days but hey, it’s still supported so...

Anyway, I was one of those kids that was fortunate enough to attend a high school that offered web design and computer science courses. I took the web design course to both get a better understanding on the basics of digital design and also to be able to reinforce what I had learned through self-teaching.

of course: myspace

At the time, MySpace was ridiculously popular among people my age as was applying different premade MySpace layouts to present our individuality as most teens desire.

I had just copy/pasted the code for my new MySpace layout and one of my friends told me it looked weird. I was confused because it was pretty simple… it was just supposed to have this thick pink border around the content boxes with some extra spacing between them. However, she was seeing a couple border lines around the boxes with odd spacing. Knowing that it could look different on a different browser, I opened up Internet Explorer to see if it was a Firefox vs IE issue. Yup.

I defeatedly removed it thinking about how browser rendering issues had been common enough with these prebuilt layouts.

The next day, I grabbed the code again and modified the styling to render across those two browsers as I desired it to.

However, it got me thinking about how simple it should have been to accomplish what I wanted. I went to the website where I had initially found the layout and clicked on their “Make your own” link. It provided instructions on how to get started - awesome.

Within a few months, I was making/selling custom MySpace layouts to friends. So, yeah, at 15 years old, that was my first paying job. What a time to be a teen.

I enjoyed both designing and using CSS to create those layouts so I continued taking graphic design courses at school. One friend that was also tinkering with code at the time suggested I take the Computer Science course because his PreCal teacher had recommended it to him to get more in-depth with programming fundamentals.

computer science? but why?

To be honest, learning programming fundamentals didn’t really sell me on it. I enjoyed building with just HTML/CSS so why did I have to learn programming? However, what nudged me into the right direction was that I learned it was considered an AP class at the time. I figured it couldn’t hurt to take “another computer class” that would help my GPA.

I kept acing all of my design courses and enjoyed building better designed layouts.

Unfortunately, at the time, I was convinced that learning Java (in the CS class) was going to be completely useless for me. I wasn’t going to be a programmer. Actually, I probably wasn’t going to be able to get a job writing HTML/CSS either because my stuff was unimpressive. It was always going to be just a hobby. So, I did enough to get by in the CS class.

One fond memory I have of that course is getting introduced to rendering shapes and using animation in Java. After the lesson, the assignment was to build a car at a traffic light. We had to make the car respond accordingly to the traffic light.

I couldn’t get it to work. And it was no real surprise to me. During the lesson, I had stopped paying attention once I had a decent handle on building shapes and making them move around.

I wasn’t sure how to get the conditions right for the assignment, though.

So, I did what I considered the next best thing. I made the road have construction signs on it and it said the light was out of order.

Yeah, I managed to pass the course, by the way.

During my senior year, I noticed they were providing a Web Design II course — meant for students that were familiar with the fundamentals of building webpages and wanted to get into more advanced topics. Neat!

The class was just myself and 7 other students that were walked through maintaining the school website. Throughout the semester, we created animations for the banner on the home page, updated content/templates, built new pages, and overall learned how to manage a large, public website.

While I didn’t feel I was learning more about HTML/CSS or tooling necessarily, I was so excited to build up my skills and try to pitch them to the teacher so I’d spend my nights reading through HTML/CSS and Flash animation articles/docs.

Overall, the class was pretty instrumental in building up my confidence for at least considering doing web work on the side after graduation. I became more curious and wanted to streamline my development process - this might sound familiar to some of my previous employers. I just wanted to continue having fun and that included getting better.

From there, I gradually learned how to make that hobby into a career by taking college courses, staying up super late at night reading front-end articles online, doing online tutorials, and essentially just sticking to it.