1. Download a text editor
We write code using a “text editor.” A text editor is an application that lets you edit “plain text” files. Plain text files don’t store formatting information, like font or color. Instead, they just store the text itself. Code is written and edited as plain text, with the file extension indicating the programming language: “.html” for HTML files, “.css” for CSS files, and “.js” for JavaScript files.
I recommend using the text editor Visual Studio (VS) Code.
Click here to download VS Code!Make sure to download the “Stable” build. The “Insiders” builds let users try out new features before they’re ready for the general public, even if these features still have glitches.
If you’re on a Mac, Visual Studio Code will appear in your Downloads folder. You don’t want to run it from there! Instead, move the file to your Applications folder and then run it.
1.a. What is a text editor?
Code is just text. When we code websites, we primarily code in three programming languages: HTML, CSS, and JavaScript.
In HTML, your code might look like this:
In CSS, your code might look like this:
And in JavaScript, your code might look like this:
Even though we use a different structure, or syntax, for these three languages, we are still working with text.
When we write text, we might use Microsoft Word, Google Docs, or a note-taking app. These types of applications are great because they make it easy to format information in a way that humans can understand. You can pick your font, the size of your text, the way it’s aligned on the page, and more.
When we write code, we have different priorities. This is because we’re not necessarily writing code for humans to understand, but instead for computers to understand. Computers don’t care about the aesthetics of your text. Instead, computers just want the information from your text — the text itself.
To accomplish this, we’ll need to use a different kind of application called a “text editor.” Unlike our usual word processors, text editors don’t store visual information like font or color. Text editors are designed to deal exclusively with “plain text” — files of text that don’t contain formatting.
You might have noticed in the previous examples of code that the text is multiple colors, though. This is an automatic process called “syntax highlighting.” Programming languages like HTML, CSS, and JavaScript follow very precise rules for how to structure code. Otherwise, computers won’t be able to understand it! To make your life easier, modern text editors will dynamically color your code to let you know if you’re following the correct syntax.
How does a text editor know which language your code is in? That’s easy — you indicate the language when you save a file of code! An HTML file will have the extension “.html”, a CSS will have “.css”, and a JavaScript file will have “.js”. For example, we commonly see files using the name index.html, style.css, and script.js. On the inside, these files are all just plain text, but your text editor and computer will understand what language to look for by checking out the file extension.
1.b. How do I pick a text editor?
Just like word processors, there are multiple text editors to pick from. While there is no wrong choice for a text editor, you might want to pick one that is commonly used and actively maintained. Text editors also come with other features to make writing and editing code easier and faster, so that should play into your decision.
Right now, a very popular text editor is Visual Studio (VS) Code. VS Code is owned and maintained by Microsoft, who also owns the popular code distribution platform GitHub. Because of Microsoft’s ownership of both platforms, VS Code works well with GitHub and is regularly updated, meaning that coders can rely on it to stay up-to-date on emerging technologies and new trends. Because of VS Code’s popularity, there is also a thriving community of free extensions that make the text editor more useful for things like web development.
Sidenote: while you can edit any language of code in any text editor, some languages work best in specific text editors. HTML, CSS, and JavaScript will work fine pretty much anywhere, but certain languages like R have dedicated text editors like R Studio. This often happens when a programming language develops a community for a special use case, like data visualization with R. In this case, you wouldn’t want to edit HTML in R Studio, and you might not want to edit R in VS Code.
Besides popularity, you should also consider what text editor feels most comfortable to you. Other text editors, like Sublime or Vim, have dedicated fan bases because of their respective features. Whatever editor you choose is up to you, and it isn’t hard to switch editors if you’re not liking the one you’re using.
2.a. What is GitHub?
asdf
5.a. What is GitHub?
asdf
5.a. What is GitHub?
asdf