From zero to lead UI developer
Tags: beginners, codenewbie, webdev, career
Published: 2020-03-16 01:58:37

---
title: From zero to lead UI developer
published: true
description: How did I get here? What did I learn first?
tags: #beginners, #codenewbie, #webdev, #career
---

As I was sharing some dev advice today, I paused. "How did I get here?" "What did I learn first?" This is my journey:

TL;DR? Scroll down to the recap.

### High School 
Nothing. I never took so much as an Intro to Computers course. I didn't know that web development was a job. I didn't know that any of this was an option. 

### College
I didn't decide on a major until halfway through my Junior year. By then, I had taken so many slack-off classes like Comic Book Illustration, Creative Marketing, and African Weaving that the only ONLY way to graduate on time was to declare a Graphic Design major. I don't usually admit that, but yes. It was an accident. My senior year I needed 3 courses in computer "stuff" to fulfill my major. So this brings us to the very first time I coded anything in "Web Design 101" The class focused on the design part, but I did get a very basic intro to **HTML** and **CSS**. I thought it was pretty cool and wanted to learn more, but for whatever reason the Computer Science course in "Web Development" required a prerequisite of "Java I" and "Java II" which... I took. So then I knew basic **Java**. So at this point, I realized that I actually loved this and wished I had been a Computer Science major, but what could I do... I was in my last semester, so I took that "Web "Development" class and learned the basics of **JavaScript** and **PHP**

### Summer after College
I started hearing a lot about **JQuery** and I guess I sort of taught myself a few basics.

### First Few Jobs
I worked in marketing doing design stuff, but I kept wanted to learn more about programming things. I remember attempting to learn **Ruby on Rails** and starting to learn the basics of **using a terminal for the first time**. I found out about this thing called **HUGO** and made my first **markdown** static site. I also **used GitHub for the first time** even though I had no idea how to use git. I didn't have any foundation to my knowledge. It was all just bits and pieces --articles and YouTube.

### First Web Design Job
I think I should note that my graphic design job sometimes wanted me to design for web, and through that experience I got some exposure to the basics of **Agile** and **JIRA**. Also this was the first time that I found out about tools like Sketch and Zeplin and the **concept of modular design** and also the first time I had heard of React. I wanted IN. 

### Back to School
I went back to school and took an intro to web technologies class - this time at a graduate level... at Harvard. Everything I had ever learned was taught in the first 2 weeks. Let me repeat that. EVERYTHING I HAD EVER LEARNED ABOUT WEB WAS TAUGHT IN THE FIRST 2 WEEKS. I realized that I knew nothing, but I was excited to learn. So then I learned *again, but more in detail* **HTML**, **CSS**, **JavaScript**, **JQuery**, and **PHP**. But in addition, I learned about **JavaScript Libraries** --that such things as NPM and CDN exist--and about **JavaScript templates**, **Data Queries**, **JSON**, and **the basics of hosting**.

I was hooked. I had to take another class. I decided on a class that went even more into detail with JavaScript through a processing library called **p5.js**. This was my introduction to the concept of **Object-Oriented JavaScript**. 

My next two classes were intensely focused on advanced **HTML** and **CSS** where I learned about how to correctly use floats, flexbox, CSSGrids, and CSS Variables, and that there are many many more tags and selectors than I will ever remember and also I learned about **SASS** and **SVG as code** for the first time. 

### But what about React?
Yeah, so I did still want to learn React, so on my own I made an attempt. Two attempts. Three attempts. Four attempts to sit down and just LEARN it. I was about to give up, when I read that Vue was easier. So I took a deep breath and... learned all the basics of **Vue** in a single week. I was excited!

### New UI Job
So then I landed my first official UI design job. The second month that I was there, they wanted this interactive prototype thing and they said I could use whatever tools I wanted. So I thought it would be a fun opportunity to put my new Vue skills to the test. And that's when I learned **Vue** again at an intermediate level and became much more proficient with the **terminal**. I also got a chance to learn how to use the **anime.js** library. When I was finished, my team was like "lol, you're not a designer, you're a developer" and then I was a UI developer. And this was around the same time I just learned about how to actually use **git**  

### But this story has only just begun
My boss says, "so this software team is planning on using Angular, but we've got our other software team using React, they asked if you can provide UI as web components?" and I was like "Yes, Absolutely!" without any idea about what a web component was. After a bit of googling, I had [Open-WC](https://open-wc.org/) installed. So then I quickly learned about **web components** and how to use **lit-element** *previous versions known as Polymer* and **packages** and **Storybook** and **Karma / Mocha testing**. But then I needed a place to put all of this stuff, so my work told me to use **Azure DevOps** and soon I was writing automated test scripts in **YAML**, **package version control** scripts, and pipelines to an **Azure cloud service**. 

The team had some existing designs that needed to be converted into a web components, so then I did some investigation and wrote my first **Node.js** script. They also wanted a documentation site about their design system and I learned how to use **Vuepress** static site. Then I became the lead UI developer, and that's kind of where I'm at right now. It's hard to remember everything. I might be missing something. ¯\_(ツ)_/¯

### RECAP Order that I learned stuff...

1. Basic HTML
2. Basic CSS
3. Basic Java
4. Intermediate Java
5. Basic JavaScript
6. Basic PHP
7. Attempt at JQuery
8. Attempt at Ruby on Rails
8. Using a Terminal for the first time
9. Basic HUGO (markdown static site)
10. Basic GitHub use
11. Basic Agile Method
12. Basic JIRA use
13. Concept of Modular Design and Development
14. Intermediate HTML
15. Intermediate CSS
16. Intermediate JavaScript
17. Intermediate JQuery
18. JavaScript Libraries (NPM / CDN)
19. JavaScript Templates
20. Data Queries
21. JSON
22. Basics of Hosting
23. p5.js
24. Object-Oriented JavaScript 
25. Advanced HTML
26. Advanced CSS
27. SASS
28. SVG as code
29. Attempt at React
30. Basic Vue
31. Intermediate Vue
32. Anime.js
33. Comfortable with the terminal
34. git
35. lit-element (previous versions known as Polymer)
36. setting up package.json files
37. Storybook
38. Karma/Mocha unit testing
39. Azure DevOps
40. YAML scripting
41. package version control systems
42. basics of Azure cloud service
43. Basic Node.js
44. Vuepress (markdown static site)

### Conclusion

Everyone learns at their own pace and in a different order. Don't compare yourself with me or anyone else. As long as you know more than you did yesterday, you're doing fine. Never stop learning. 

P.S. I think the Java from college helped me a lot actually. It set up a lot of concepts for me like variables, types, parameters, encapsulation, abstraction, inheritance, polymorphism, private and public classes and variables, shared network of code, development environments, etc...