Just the thought of learning to code can feel overwhelming. The term code itself sounds mysterious, like a technical language only computers are meant to understand, not humans.
Many aspiring programmers begin their journey by choosing a popular programming language and diving in headfirst without a clear direction. This might involve taking an online coding course, working through a tutorial project, or buying a random book on a specific topic.
However, beginners often miss a crucial first step: creating a roadmap. A roadmap provides a bird’s-eye view of the programming world, outlining essential programming concepts, languages, and tools that are used by virtually all developers every day.
In this article, I present such a roadmap. It consists of 14 steps, each exploring a fundamental concept, language, or tool that professional developers use to write code, collaborate, and build professional projects.
These 14 steps are carefully selected based on my own almost 20-year journey in learning to code.
One of the reasons it took me a while to feel confident as a developer was that I often learned about specific topics in isolation, without understanding the broader context of the coding world.
Each step in this article focuses on a “coding essential” – something I believe is critical to at least be aware of when you start your coding adventure.
Before we dive into the 14-step roadmap, remember that reading this article alone won’t make you an expert programmer. That’s not the goal. The purpose is to introduce you to these essential topics and give you a basic understanding of each, so you can intelligently build upon this foundation as you progress.
14 Step Roadmap for Beginner Developers
Let’s begin at the beginning!
1) Familiarize Yourself with Computer Architecture and Data Basics
One of the great aspects of modern programming languages is that they allow us to build sophisticated applications without needing to delve into the intricate details of the underlying hardware.
This is known as abstraction – the ability to use high-level tools (like programming languages) that simplify and narrow the scope of knowledge and skills required.
However, understanding the basics of the hardware that runs your code is still valuable. Even a basic awareness can help you understand technical discussions about CPU and memory usage in a professional setting.
Here’s a minimal set of computer architecture basics to get you started:
Your computer’s core components reside on microchips (also known as integrated circuits).
Microchips rely on an electrical component called a transistor to function. Transistors are tiny electrical switches that are either off (0) or on (1) at any given moment. A single microchip can contain millions or billions of these tiny transistors.
Most modern computers contain a microchip called the Central Processing Unit (CPU). Think of it as the computer’s brain. It handles the majority of the calculations and logical operations the computer performs.
Each CPU has an instruction set, which is a collection of binary commands (zeros and ones) that the CPU understands. Fortunately, as software developers, we rarely need to interact directly with these instructions! This is the beauty of abstraction.
If the CPU is the brain’s logical center, memory is essential for storing information, both temporarily and long-term.
Computers use Random Access Memory (RAM) as “working memory” (or short-term memory) to store information actively used by running programs.
RAM consists of memory addresses, which are used to store bits of data. In older languages like C, programmers could directly manipulate memory addresses using pointers, but this is less common in modern languages.
Finally, let’s touch on a component you’re definitely familiar with – the hard drive. In our brain analogy, this represents long-term memory. A hard drive is an internal or external device that stores data persistently, even when the computer is turned off.
Before we delve deeper into programming languages, let’s briefly discuss data. What exactly is data?
At a high level, we think of data as text documents, images, videos, emails, files, and folders. These are all high-level data structures that we create and save daily.
However, at a fundamental level, a computer chip (like a CPU or RAM chip) doesn’t understand “images” or “videos.”
From a chip’s perspective, all these structures are stored as sequences of ones and zeros. These ones and zeros are called bits.
Bits are often grouped in sets of eight, known as a byte. A byte is simply an eight-bit sequence, such as 00000001, 01100110, or 00001111. Representing information this way is called binary representation.
Alt text: Detailed view of a computer microchip showcasing transistors, essential components in computer architecture.
2) Learn How Programming Languages Work
In the previous section, we discussed that computers rely on a CPU, which understands specific instructions in the form of ones and zeros.
Theoretically, we could write code to instruct the CPU by stringing together long sequences of ones and zeros in a CPU-understandable format. Instructions written in this binary form are called machine code.
This sounds incredibly difficult to work with, and it is! Thankfully, we primarily use higher-level programming languages like JavaScript, Python, and Java.
A higher-level programming language offers a set of human-readable keywords, statements, and syntax rules that are much easier for people to learn, debug, and use.
Programming languages bridge the gap between how our human minds understand problems and how computer brains (CPUs) process information.
Ultimately, the code we write must be translated into machine code (binary instructions) that the CPU can execute.
Depending on the programming language, your code is either compiled or interpreted into machine code. Most programming languages include a program called a compiler or an interpreter to perform this translation.
For example, JavaScript and Python are interpreted languages, while Java is a compiled language. Whether a language is compiled or interpreted (or a combination of both) affects developer convenience, error handling, performance, and other aspects, but we won’t delve into those details here.
Alt text: Visual representation of code compilation and interpretation, key processes in software development.
3) Understand How the Internet Works
Regardless of your programming aspirations, you’ll encounter situations where understanding how computers communicate with each other is beneficial, especially over the Internet.
The Internet is simply a global network of interconnected computers. Each computer in this network follows a set of agreed-upon rules that enable communication. For a computer, “talking” means transferring data.
As we discussed, all types of data – web pages, images, videos, emails, etc. – can be represented as ones and zeros.
Therefore, you can think of the Internet as a vast network of computers capable of transferring ones and zeros in a way that preserves the meaning of the data. The Internet is essentially a digital communication medium.
If the Internet is a large communication arena, let’s define the participants.
Consider this analogy: most human conversations require at least two participants. Typically, one person initiates the conversation, and the other responds, assuming both are present and available.
In Internet terminology, the computer initiating the conversation is called the client. The computer responding is called the server.
For example, when you open a web browser and go to “www.google.com”, your web browser is the client. You can also think of your computer as the client in this scenario.
More abstractly, YOU are the client because you initiate the conversation. By typing “www.google.com” and pressing Enter, your browser requests to start a conversation with one of Google’s computers.
Google’s computer is the server. It responds by sending the data needed to display Google’s web page in your browser. And there you have it! Google’s web page appears. All Internet data transfers rely on this client/server relationship.
Alt text: Client-server model diagram showing data flow, fundamental to internet communication and network architecture.
4) Practice Some Command-Line Basics
The Command Line can seem intimidating at first. It’s often portrayed in movies as a cryptic black screen filled with scrolling incomprehensible text and symbols, associated with hackers or tech geniuses.
The reality is, using the command line doesn’t require genius. In fact, it allows us to perform many tasks we’re comfortable doing with a mouse and point-and-click interface.
The main difference is that it primarily uses keyboard input, which can significantly speed up tasks once you become proficient.
You can use the Command Line to browse folders, list folder contents, create new folders, copy and move files, delete files, execute programs, and much more. The window where you type commands is called a terminal.
Let’s go through a quick tutorial of basic navigation commands to get a feel for working with the command line.
When you open your terminal, the first question is often, “Where am I?” We use the pwd command (Print Working Directory) to find out. It outputs your current location in the file system, indicating your current folder.
Try it yourself:
How to Use the Command Line
If you’re on a Mac, open the Terminal app, which is a Unix Command Line terminal.
If you’re using an operating system without a GUI (Graphical User Interface), like Linux or Unix, you’ll likely be at the Command Line by default. If your Linux or Unix version has a GUI, you’ll need to open the terminal manually.
At the prompt, type pwd and press Enter. The Command Line will print the path to your current folder.
By default, the active folder when you open the Command Line is your user’s home directory. This can be customized if you prefer starting in a different location.
The home directory is conveniently represented by the tilde ~ character. We’ll use this in examples later.
Now that you know your current folder, use the ls command to list its contents. ls stands for “List”.
Type ls and press Enter. The files and subfolders in the current directory will be printed to the screen.
Rerun the command like this: ls -al and press Enter. This gives you more details about the directory contents, including file sizes, modification dates, and file permissions.
The hyphen in the command allows setting flags that modify the command’s behavior. Here, -a lists all contents (including hidden files), and -l displays extra file details.
Next, create a new folder using the mkdir command, which stands for “Make Directory.” Let’s create a folder named “testdir.”
Type mkdir testdir and press Enter. Then type ls and press Enter. You should see your new directory in the list.
To create nested directories at once, use the -p flag to create a directory chain: mkdir -p directory1/directory2/directory3
The Command Line isn’t very useful if you can only stay in one location, so let’s learn to navigate directories using the cd command, which stands for “Change Directory.”
First, type cd testdir and press Enter. Then type pwd and press Enter. The output now shows you’re inside the “testdir” directory. You’ve navigated into it!
Type cd .. and press Enter. .. tells the Command Line to move back to the parent directory.
Then type pwd and press Enter. The output shows you’re back in the original directory. You’ve navigated back!
Next, learn to create an empty file in the current directory.
Type touch newfile1.txt and press Enter. Use ls to see the new file in the directory.
Now, copy that file to another folder using the cp command.
Type cp newfile1.txt testdir and press Enter. Use ls and ls testdir to confirm the file still exists in the current directory and was copied to “testdir.”
You can also move files instead of copying using the mv command.
Type touch newfile2.txt and press Enter to create a new file. Then type mv newfile2.txt testdir and press Enter to move it to “testdir.”
Use ls and ls testdir to confirm the file moved to “testdir” and is no longer in the original location (it was moved, not copied).
The mv command can also rename files.
Type touch newfile3.txt and press Enter. Then type mv newfile3.txt cheese.txt and press Enter to rename the file. Use ls to confirm the rename.
Finally, delete files and folders using the rm command.
Type rm cheese.txt and press Enter to remove the file. Use ls to confirm removal.
Type rm -rf testdir and press Enter to remove the “testdir” directory and its contents. Use ls to confirm directory removal.
Note the -rf flags are needed to remove directories, forcing removal of the folder and its contents.
Alt text: Command line example showing pwd, ls, and cd commands, essential for navigating file systems.
5) Build Up Your Text Editor Skills with Vim
So far, we’ve covered Command Line basics and seen how to work with files without a mouse.
Although we can create, copy, move, rename, and delete files from the Command Line, we haven’t edited text file content in the terminal yet.
Working with text files in the terminal is important because computer code is essentially text saved in organized files.
While you could use a graphical text editor like Microsoft Word (or specialized code editors like Sublime or Atom), it’s not necessary. The terminal is often the most convenient place to write and edit code since you usually have it open already for running commands!
Several excellent text editors are designed for this purpose, and I recommend learning the basics of Vim.
Vim is one of the oldest and most respected text editors. Vim stands for “VI i**M**proved” as it’s the successor to a tool called Vi.
Vim is a text editor built to run directly in the terminal, so you don’t need a separate window or a mouse. Vim has commands and modes to create and edit text content using only the keyboard.
Vim has a learning curve, but with practice, the skills you learn will be invaluable throughout your coding career.
Vim is often pre-installed on many operating systems. To check if it’s installed, open the Command Line and type vim -v.
If Vim opens in your terminal and shows the version, you’re set! If not, you’ll need to install it. (To quit Vim, type :q! and press Enter). For installation info, see https://www.vim.org.
In my opinion, the quickest way to learn Vim is using its built-in tutorial, VimTutor. To run it, ensure Vim is installed, open the Command Line, type vimtutor, and press Enter.
It’s such a good tutorial that there’s no need for me to re-explain it here. Go do the VimTutor now! See you in the next section.
If you have energy left after VimTutor, check out these 7 Vim commands to boost your productivity as you start using Vim.
Alt text: Vim editor interface in terminal, a powerful tool for coding and text manipulation in development environments.
6) Take-up Some HTML
Think of HTML – HyperText Markup Language – as the skeleton of a web page. It defines the page structure by specifying elements and their display order.
Every web page you’ve visited uses HTML. When you visit a page, the web server sends HTML to your browser. Your browser reads it and displays the page.
Most web pages have common content like titles, text, images, navigation, headers, footers, etc. All this is structured using HTML.
Remember, HTML isn’t technically a programming language, though often called “HTML code.”
As we’ll see, programming languages enable actions, like executing instructions. HTML doesn’t do anything. We don’t run HTML. HTML is data defining a web page’s look, nothing more.
So, how do you write HTML? HTML uses tags (labels) to identify web page elements. Tags are enclosed in angle brackets.
For example, the title tag is <title>My Page Title</title> and the paragraph tag is <p>Some text content.</p>.
Each HTML element has a start and end tag. The start tag is the tag label in angle brackets: <tag>. The end tag is similar but with a forward slash: </tag>.
Text between tags is the displayed page content.
Let’s look at common tags. <html> starts an HTML page. </html> ends it. Content between these tags is part of the page.
<head> defines additional browser information, mostly not displayed to users. </head> ends the HEAD section.
<title> defines the web page title, displayed in the browser tab. It’s placed inside <head>...</head>.
<body> contains the main web page content.
Putting these together looks like this:
<html>
<head>
<title>My Page Title</title>
</head>
<body>
<p>Some random text content.</p>
</body>
</html>This simple HTML represents a page with a title and a paragraph.
HTML tags can be nested, meaning tags can be placed inside other tags.
HTML offers many tags for rich web content. Here’s a brief list:
<p>: Paragraph, starts on a new line.<h1>: Main page heading, usually for page titles.<h2>: Section heading, usually for section titles.<h3>to<h6>: Smaller headings.<img>: Image.<a>: Link.<form>: Form with user input fields.<input>: Input field for user information within a form.<div>: Content division, groups elements for spacing.<span>: Another grouping element, wraps text phrases, often for specific text formatting.
Alt text: HTML code snippet example showing tags and structure, foundational for web page layout.
7) Tackle Some CSS
A web page without CSS – Cascading Style Sheets – is like a cake without frosting. It works, but it’s not appealing!
CSS lets us style HTML elements with properties like background color, font size, width, height, and more.
CSS properties tell the browser how to render elements visually. Like HTML, CSS isn’t a programming language. It adds styles to HTML, but doesn’t perform actions.
Styling HTML with CSS involves three parts:
CSS selector: Identifies the HTML element(s) to style.
CSS property name: The specific style property to apply.
CSS property value: The value of the style property.
Example of setting paragraph color and font size:
p {
color: red;
font-size: 12px;
}Before the curly braces is the CSS selector, p for paragraph tags. Styles inside braces apply to all <p> tags on the page.
Inside the braces are style property-value pairs, separated by colons. Properties (e.g., “color”, “font-size”) are on the left. Values (e.g., “red”, “12px”) are on the right. Semicolons end each pair.
This CSS code tells the browser to use red, 12px letters for text inside <p> tags.
How does HTML know to use these CSS styles? Enter the <link> HTML tag. CSS styles are usually in separate files (.css files). We import them into HTML files using <link> tags in the <head> section:
<head>
<title>My Page Title</title>
<link rel="stylesheet" type="text/css" href="/path/to/style.css">
</head>This example imports CSS styles from the file style.css specified by the href attribute.
In the next 3 sections, we’ll (finally) get into more technical programming languages!
We’ll overview JavaScript, Python, and Java, and cover essential coding concepts common to all three. We’ll compare language features and code examples to give you a solid understanding of the basics of each.
Alt text: CSS code example showing styling rules, essential for web design and visual presentation of content.
8) Start Programming with JavaScript
Let’s answer: if HTML structures web pages and CSS styles them, why do we need JavaScript?
Technically, we don’t. For static, pretty websites, HTML and CSS suffice.
The key word is “static.” To add dynamic features, like changing content and complex user interactions, we need JavaScript.
What is JavaScript?
JavaScript is a programming language created specifically for websites and the Internet. Unlike many languages that are compiled or interpreted and run standalone, JavaScript was designed to execute directly in web browsers. It enables writing code for actions on web pages, making sites dynamic.
JavaScript code can be in .js text files or directly in <script> tags within HTML.
For years, JavaScript ran primarily in browsers (client-side). But Node.js changed this by creating a standalone JavaScript environment that runs anywhere.
Node.js can be installed locally or on web servers, allowing JavaScript for backend code, not just browser frontend code.
Now, let’s cover some JavaScript basics.
Variables and Assignment in JavaScript
Variables are a fundamental programming concept. A variable is a name or placeholder for a specific value.
The term “variable” means the stored value can change during program execution.
Variables store numbers, text strings, lists, and other data structures.
All programming languages use variables, but syntax varies.
Variables are useful for referencing values throughout code, enabling checks and actions based on value changes.
In JavaScript, declare variables with let, like: let x;.
This declares x as a variable. Semicolons (;) in JavaScript (and many languages) mark the end of code statements.
After declaring x, assign a value using the equals sign, the assignment operator: x = 10;.
This assigns the number 10 to x. Now, x in code represents the value 10.
Declaration and assignment can be combined:
let x = 10;Data Types in JavaScript
In the last section, we stored an integer (whole number) in x. You can also store decimals, or floating-point numbers, like: let x = 6.6;.
Data types are the types of values variables can hold. We’ve seen numeric types (integers and floats), but there’s more. We can also store text data.
Text in coding is called a string. Store strings in variables by enclosing them in single or double quotes:
let x = 'Hello there!';
let y = "Hey bud!";Another data type is boolean. Booleans hold only true or false (lowercase). In JavaScript, true and false are keywords for boolean values:
let x = true;
let y = false;true and false without quotes are booleans. With quotes, they become strings.
Booleans often control program flow in conditional (if/else) statements, which we’ll learn next.
Program Flow Control Statements in JavaScript
With variables and basic data types understood, let’s see what we can do with them.
Variables are more useful when we can instruct our code to perform actions with them using statements.
Statements are special keywords for actions in code, often based on variable values. Statements define program logic and enable actions that dictate program behavior.
If / Else Statement
The first statement is the if statement. It performs an action only if a condition is true:
let x = 10;
if ( x > 5 ) {
console.log('X is GREATER than 5!');
} else {
console.log('X is NOT GREATER than 5!');
}We set x to 10. The if statement checks the condition in parentheses: x > 5. Since x is 10, the condition is true.
Because the condition is true, the code in the first curly braces executes, printing “X is GREATER than 5!” to the screen. ( console.log() prints values to the screen).
The else statement provides code to execute if the if condition is false.
While Loops
The next statement is the while loop. Loops repeat a code block as many times as needed, without code duplication.
For example, to print a message 5 times, you could write:
console.log('This is a very important message!');
console.log('This is a very important message!');
console.log('This is a very important message!');
console.log('This is a very important message!');
console.log('This is a very important message!');This works for 5 messages, but not for 100 or 1000. Loops are better for repetition, called iteration in coding.
This while loop repeats code as long as the condition is true:
let x = 1;
while ( x <= 100 ) {
console.log('This is a very important message!');
x = x + 1;
}We initialize x to 1. The while loop has a condition in parentheses: x <= 100. This is true as long as x is less than or equal to 100.
The code block in curly braces executes. First, it prints the message. Then, it increments x by 1.
The loop then re-evaluates the condition. x is now 2, so the condition is still true (2 <= 100).
The loop repeats until x becomes 101. At this point, x is greater than 100, the condition becomes false, and the loop stops.
Alt text: JavaScript code sample showcasing variables, if/else control flow, and while loops, core programming concepts.
