I’m not going to get into the details of my story – in short, I liked making websites as a kid, but I went to culinary school and worked in the restaurant industry for nearly a decade. Eventually I needed out, and I decided on making a career out of web development. Despite only knowing some basic outdated HTML and CSS, I wanted a new life and I wanted it without going back to school and getting a degree, or paying for a bootcamp.
I see people ask all the time what they need to know to become a web developer, how long it takes, what they’ll make, and so on. It’s hard to have all the answers to those questions, but I can share my own experience.
So I present to you a list of all the concepts, libraries, frameworks, and technology I’ve learned over the years, in the order I learned it, with links to the side quests and articles I’ve written about them. Although I’m trying to write it in order, there is some overlap.
I’ll try not to make too many assumptions, but this list is not meant to be a deep dive on any topic – although many of the links are!
Note: Some of the earlier articles may be amateur and have information that I wouldn’t necessarily put into an article on the subject if I wrote it today.
Pre-Knowledge (1998 – 2014)
I made my first websites in the late nineties by viewing the source of sites I landed on in Netscape Navigator (a browser), copying the HTML into Notepad (a text editor), and uploading the pages to Geocities (a web host). HTML, text editors, and hosting most likely seem like second nature to many of us, but like everything else related to computers, it’s not inherent knowledge, and it’s a hurdle to get through as a beginner. I just happened to do it early enough that I wasn’t even aware I was learning.
Here’s what I learned in that period, although since I learned by doing, I didn’t know the proper terms for many things:
- An idea of what HTML (Hypertext Markup Language) is – the very first step to doing anything related to web development.
- How to view the HTML source of a web browser (Netscape Navigator, and later Internet Explorer).
- How to create and edit an HTML file with a text editor (Nodepad) and save it locally on my file system (Windows as my OS).
- Basic HTML tags/elements – text, headings, lists, tables, links, images, formatting (also blinking text).
- How to make colors with hex codes.
- How to use FTP (File Transfer Protocol) to upload files from my computer to a web host on the internet to make my website publicly accessible.
A few years later, CSS became popular, and I spent the next several years copying the CSS of sites I liked to make designs. CSS was revolutionary because you could do things like change all the colors of your links in one spot instead of all over your pages, having different sets of link colors, and so on.
- How to use CSS (Cascading Style Sheets) to design the layout, font, spacing, and colors of a website.
- How to bring CSS (Cascading Style Sheets) files into an HTML file.
- How to create layouts with floats instead of tables.
Although I had been making websites for years, I’d never read a tutorial, article, or watched a video about web design/development. So although I was oddly competent at making a website intuitively from all the sites I downloaded and played around with, I didn’t actually know many basic concepts like how CSS selector specificity worked, or ids vs. classes, how to use pseudo selectors, and I would often end up brute forcing solutions for things like positioning and the box model.
This is generally the extent of everything I knew about web development before I decided to make a career out of it: basic HTML, basic CSS, basic managed hosting, and transferring files via FTP – everything I knew was static development, and I had absolutely no concept of programming. For anything that might be more advanced or dynamic – counters, guestbooks, blogs, forums – I used a third-party resource.
Getting Started and Internship (2014-2015)
Somehow, it still didn’t occur to me to really do much studying before diving into this new career. I bought HTML, XHTML & CSS for Dummies from a used book store – which was honestly only a few years out of date at this point – and looked over it all. I was pretty overjoyed to discover that I knew basically everything in the book from my heuristic approach, but now I knew more of the technical terms.
I was lucky enough that a bartender at the restaurant I was working at was starting his own business and offered me an unpaid internship for a few months. So by day I did the internship and by night I cooked at the Pac-Man restaurant. At the same time, I was scouring Craigslist for some small jobs, and I created a few static Bootstrap sites as a freelancer. A lot changed since my early days, and here’s what I learned during this time.
- Upgrading Notepad to Notepad++ was a first step, which I quickly traded for Adobe Brackets.
- How to use Bootstrap, a responsive CSS/JS framework – I found out responsive design was a new thing I would have to know, and I learned how to integrate Bootstrap, a third party framework, into my sites. I made a site about accordions at this point, and spent a long time trying to use PHP to set up a contact form on my Bootstrap site.
- The fundamentals of responsive design without a framework – I didn’t like how dependent I was on Bootstrap to create a responsive design, so I learned how to make a responsive site without it.
- How to create several types of navigation styles without relying on Bootstrap – dropdown navigation bar, off-canvas navigation, full-screen navigation. I really wanted to be independent of relying on Bootstrap.
- How to use flexbox – I can’t say I understood flexbox to the full extend at this time, but I was beginning to figure out how to use it in many situations that I had previously used floats.
- How to use and and set up a Mac – I started using a Mac for the first time, after 20 years of only using Windows.
I have to make a pause here, because the next thing I learned blew my mind and is what really enabled me to start moving to the next level beyond making simple brochure-type websites: the command line.
- How to use the command line (*nix) – understanding that I could navigate and command my computer through the command line seems obvious to me now, but was revolutionary for me. I learned about moving, copying, deleting, changing permissions, installing programs, using command line text editors,
sudo, and more.
- How to use SSH (Secure Shell) to login to another computer through the command line. This blew my mind as well.
- How to use Sass, a CSS preprocessor – this enabled me to install and learn Sass, which was my initial reason for learning the command line. I learned how to structure a project, use variables and nesting, and watch changes to a file to compile Sass to CSS.
- How to install and use Node.js and npm – in learning how to install Grunt to compile my Sass, I had to learn how to install Node, and importantly, the concept of local installations. This opened up a whole new world to me.
- How to use basic Git commands and make a repository – I didn’t quite understand Git yet, but I knew how to use four or five commands to use Git as a glorified FTP, and that was a start to learning about version control. I knew Git was important, but without a team to work with I wasn’t exposed to many of the concepts I’d learn later.
Job 1: Junior Web Developer – WordPress (2015-2017)
11% salary increase from experienced chef to entry level junior WordPress developer
It’s great that I learned all that, because for my first real job in the industry, I was going to use practically none of it. No Git, no Node, no Sass, no Grunt nor Gulp, no command line, no Bootstrap. Just cold, hard WordPress. Nonetheless, this was going to present a whole new group of challenges to overcome and things to learn.
A few months into my internship, I applied for a job at a different company as a junior web developer/designer. I’d spend the next two years (exactly two years, to the day!) making websites with Teo.
- How to set up a LAMP environment – I had hosting, but I never used PHP and it never occurred to me that a host was any different than my local HTML setup. I learned how to set up a local environment for Linux (or Mac, or Windows), Apache (the server), MySQL (the database), and PHP – a full “stack”.
- How to set up Apache and virtual hosts – I learned how to configure the Apache server to be able to run many virtual hosts at the same time.
- How to set up cron jobs in Linux.
- The basics of PHP and PHP tags – “PHP: HTML Preprocessor”, as is what PHP stands for, is the most popular programming language on the web and the lanugage most web developers start off with. I learned that if I started some code with
<?phpand ended it with
?>, everything inside would be PHP, and everything outside of that would be rendered as regular HTML.
For the longest time, I wanted to know how to make my OWN blog – not rely on Blogger, or WordPress(.com) hosting, but something I hosted myself with my own design – not someone else’s theme. But how? I didn’t know how and it was immensely frustrating. I struggled a lot, and when I finally figured out how to use WordPress(.org)’s platform to create my own unique blog, I wrote an article to share with the world what I learned.
- How to develop a WordPress theme from scratch – this is the article that enabled me to begin this blog, and to start my first job in web development. I began by learning how to make posts, pages, a front page, header, footer, and navigation and put it into a unique, custom layout.
- WordPress pagination, comments, functions, & custom posts – I began taking my WordPress development to an intermediate level.
- WordPress custom fields – The final step to learning how to turn WordPress into a true CMS (Content Management System).
- How to use Google Maps API – my first foray into learning what an API (Application Program Interface) key is and how to use one.
- How to set up a website with TLS (Transport Layer Security)/SSL (Secure Sockets Layer) – to get a HTTP secure (https) URL.
At some point, I was given the responsibility of learning how to use AWS (Amazon Web Services) to set up Linux servers and migrate our websites over.
- How to use AWS and the AWS ecosystem – I learned so much about DevOps and AWS in this period – setting up a VPC (virtual private cloud), an EC2 instance (a virtual server in the cloud), S3 (object storage buckets for static files), setting up a LAMP server from scratch, migrating websites and configuring DNS (Domain Name Service), generating public/private keys, and much more.
- How to set up virtual machines, using Vagrant and VirtualBox
- How to set up an SSG (Static Site Generator) using Jekyll – I started exploring other methods of setting up things like a blog, and learned how to make a Jekyll blog and host it on GitHub.
- How to use PDO to connect to MySQL and create a CRUD app: Creating, reading, updating and deleting – Soon, I got tired of relying on WordPress to do anything dynamic with a website. Since I already knew some PHP from WordPress, I looked into learning how to build my own dynamic site that could connect to a database.
- Accessibility – I learned much about making a website accessible for people with disabilities, from having appropriate contrast, to making websites accessible only by keyboard, to captioning audio, and much more, following WCAG 2.0 standards.
Side project: Primitive CSS Framework
While working as a WordPress developer, I also made all my own custom designs for the sites I created. To speed up this process, I created Primitive (source), a minimal CSS framework and website boilerplate that made it quick and easy for me to make unique, custom designs. The framework is built in Sass. With Primitive, I could create the majority of a site’s CSS in a few hours.
Side project: New Moon
I created New Moon, the best code theme for web development, and distrubuted it to Visual Studio Code, Brackets, Sublime Text, Chrome DevTools, learning how to create extensions for each of those environments.
Side quest: Technical Writer for DigitalOcean
I learned about syntax and code structure, comments, strings, variables, scope, and hoisting, math, arrays, mutator, accessor, and iteration methods. I also learned about objects, object methods, conditionals, functions, prototypes and inheritance, and classes.
From the DOM side, I learned what the DOM is and how it’s different than HTML source code, about nodes and node types, how to access, traverse, and change the DOM. I also learned how to modify styles, classes, and attributes, and gain a better understanding of events, event handlers, and event listeners.
Job 2: Back End PHP Developer (2018)
28% salary increase from previous starting salary
After I got back from traveling, I started looking for another job. I knew I never wanted to work in WordPress again, and I didn’t necessarily want to learn another programming language and its environment to find a job right away. I also thought PHP was fun, so I wanted to find a job where I could use PHP, but not WordPress.
- How to write unit tests and set up automated testing – I had never had a job that knew the concept of testing, and my next job would be no exception, but I did learn some concepts of testing, what unit, integration, and end-to-end tests mean and how to set them up.
- How to work with SVGs, polygons and paths – I worked a lot with maps of concert halls and arenas at this job, and learned how to create and work with SVGs, polygons and paths.
- How to use SQL (Structured Query Language) commands – my job involved a lot of raw SQL queries, and I learned all about creating, inserting, updating, deleting, altering, constraining, and joining tables with SQL. I also learned all sorts of conditionals that can be applied to queries, grouping, ordering, limiting, and offsetting.
- How to create and use Bash scripts
- CSS shapes
Side project: Laconia MVC Framework
During this time, I wrote Laconia (source), a modern MVC (Model View Controller) application written in plain PHP without libraries or frameworks. I wanted to learn how to create something with MVC architecture, and I didn’t want to rely on a framework to do it. I wanted it to be secure, and I wanted it to have users. I aimed to and succeeded in learning the basics of:
- Authentication – logging in, logging out, resetting a password, having private content/dashboard hidden from anonymous users
- Security and validation – encrypted passwords and hashing, parameter binding with SQL, making sure users cannot be overridden, making sure no spam or empty content can go through, making sure passwords and usernames have the proper characters
- Routing – Redirecting to URLs based on incoming request method and URI path, creating public user profiles in the root directory, creating dynamic pages based on GET requests
- Object oriented programming – I had never used a class in a working application before writing this app, so I learned a lot about constructors, inheritance, and abstract classes
- Composer – I had no prior experience using Composer, so I wanted to find out why it was the standard in modern PHP development. I used it for autoloading classes and configuration.
- Database schema – how to structure a database to relate information easily between the tables, i.e. linking lists and list items, users and user comments, etc.
- Sessions and Users – how to easily deal with sessions, users, and authentication.
Job 3: Front End Software Engineer (2018-2019)
17% salary increase
- How to use React Hooks, and other React components, and React Router.
- How to use the Semantic UI React library to quickly and efficiently make prototype applications.
- A deeper understanding of REST and REST APIs – I really began to understand how resources should be structured.
- How to make a server in Node.js, using the HTTP module or Express.
- How to connect to a MySQL database from Node.js and make API calls.
- How to use PostgreSQL.
- The concept of asynchronous programming, and how to use callbacks, promises, and async/await.
- How to write scripts in Node.js – I wrote a script that would generate JSON from a Google Sheets/Excel CSV that could be utilized throughout an application.
- How to set up a project with Webpack with hot reloading
- How to use Git to work with a team – merging, rebasing, fixing merge conflicts, stashing, and working with feature branches.
- Error handling.
Side project: Chip-8 Emulator
My project of 2019 has been creating a Chip-8 emulator in Node.js from scratch, thanks to Vanya Sergeev. I’ve learned many lower-level programming concepts, such as:
- The concept of binary, decimal, and hexadecimal base systems how they interact with each other and the concept of abstract numbers in programming.
- Bits, nibbles, bytes, ASCII encoding, and big and little endian values.
- Bitwise operators – AND (
&), OR (
|), XOR (
^), left shift (
<<), right shift (
>>) and how to use them for masking, setting, and testing values.
- Using the Node built-in file system(
- The concept of a raw data buffer and how to work with it, how to convert an 8-bit buffer to a 16-bit big endian array.
- How to write and understand an 8-bit and 16-bit hex dump.
- How to disassemble and decode an opcode into instructions a CPU can use.
- How a CPU can utilize memory, stack, program counters, stack pointers, memory addresses, and registers.
- How a CPU implements* fetch, decode, and execute*.
- The importance of unit testing.
Things I Don’t Know, Abridged
In true Dan Abramov fashion, I’m happy to admit the plethora of concepts, technologies, libraries, frameworks, etc. that I don’t know. What I don’t know I don’t know is much more extensive, however. This is things I don’t know that I think I probably should.
- React Native
- Data structures
- Calculating time complexity
- Algebra, honestly
A small subset of the jargon acronyms that are familiar to me now.
- API – Application Program Interface
- Back end/server-side – the data access layer
- CMS – Content Management System
- CRUD – Create, Read, Update, Delete
- CSS – Cascading Style Sheets
- DNS – Domain Name Service
- DOM – Document Object Model
- ES(6) – ECMAScript
- (S)FTP – (Secure) File Transfer Protocol
- Front end/client-side – the presentation layer
- HTML – Hypertext Markup Language
- HTTP(S) – HyperText Transfer Protocol (Secure)
- MVC – Model View Controller
- REST – Representational State Transfer
- SPA – Single Page Application
- SQL – Structured Query Language
- SSG – Static Site Generator
- SSH – Secure Shell
- SSL – Secure Sockets Layer
- TLS – Transport Layer Security
- VCS – Version Control Systems (Git)
- VM – Virtual Machine
Carl Sagan once said, “if you wish to make an apple pie from scratch, you must first invent the universe”. That is how I felt writing this article. I tried to compile everything I know, but each new thing involved some previous knowledge, and that required previous knowledge, and at what point do I stop?
I’m missing plenty, I glossed over more, but in the past five years or so, I’ve tried to compile and write about everything that has tripped me up along the way. I hope something I’ve written has helped you in your own journey, and will continue to do so in the future.
I’ve written 123 articles about web development between my own website, DigitalOcean, SitePoint, Codrops, Envato Tuts+, and Progress.
Get updated when I create new content.
Unsubscribe whenever. Never any spam.