Learning to write software can be hard. One of the things that can be the most challenging for a beginner is the mounds of free information online, because most of it assumes that you already know a bunch of fundamentals and you get lost if you don’t. I will show you how to get from no coding experience at all to having a working website that can receive, store, and display information. We’re going to use a programming language called Elixir, and a website framework that uses Elixir called Phoenix.
Elixir is a beautiful programming language, and will allow you to keep things very simple in the beginning but provides very powerful and helpful tools that you can leverage as you gain experience. The language is also designed very intentionally, and will push you towards writing good code as you learn more and do more with it.
When I was just starting on my journey as a coder, I took some online courses at codecademy.com and thought they were great. They had a lot of exercises to explain bits of code in various languages and taught me how to write some basic lines of code. But once the courses were done, I realized that I didn’t even know where to put my code so that it did something. On the website, there was always a magic black box that you typed your code into and it would tell you if you got it right or wrong. But I had no idea where to find that magic black box on my regular computer! So before I even show you how to write a single line of code, we’re going to get things set up so that you know where to put your code so it does something!
The Right Computer
To code, you need a computer. And it turns out, you don’t even need a very fast or new computer!
This guide is written for Windows computers. I recommend that you find a Mac computer to learn on if you can, because most web developers use them and it’s a little easier to use Elixir on non-Windows systems.
Here’s the link to the Mac version of these instructions.
So if you don’t have a Mac lying around, grab your Acer or Asus or Dell and continue along.
Step 1— The Programming Language: Elixir
Elixir is the language we’ll be using to start programming. More important than which language you start with is that you actually start. The internet is littered with forum threads and articles about which programming languages are the best and what the trade-offs are.
Aficionados of each language will cite chapter and verse on why their chosen language is the best. In my experience there are nice things and not-nice things about every language, and so as long as a language is generally accepted as workable for your particular use case (web development, in our case), you’ll be better off committing to a single language for a while and getting good at it. The better you know one language, the easier it is to learn others later on when you need to.
All you need to do to install the Elixir programming language on your computer is to go to the following link, which will download a program. You’ll want to run the program, click “next” a few times (just take the default options), then “finish.”
Voilà! Your computer now has a programming language that you can use.
Step 2— The Code Editor Program
In addition to a programming language, to write code you’ll need a code editor. Technically, you could use the Notepad program that comes with your computer, or any program that allows you to write lines of text and save them as files, but you would miss out on all kinds of conveniences that make your life easier. As a metaphor, it’s like using a push reel mower to cut the grass on a soccer field. You’ll wish pretty quickly that you’d invested in the right tool for the job. Fortunately, there are much better options and we’re going to set you up with one of the best (and it’s free!)
We’re going to pick Visual Studio Code because it’s got good support for Elixir and it will grow with you as you learn more. It’s also a lot less intimidating than many of the other options, and as you get better at coding you’ll find that it has just about every tool and convenience that you could wish for. It’s one of the most popular editors, so chances are that if you learn another programming language at some point you won’t have to also pick up a new code editor to use it.
To download the editor, go to https://code.visualstudio.com/Download and click the download button for Windows. You can close the tab once the download starts. Then, click the link that pops up with the
VSCodeUserSetup...exe on it with the blue icon. Go through the installation, and just keep the defaults since they’ll work fine for our purposes. When you’re finished, click to launch Visual Studio Code.
We need to do a couple of things once the program opens:
Click on the “Extensions” button on the left menu, which looks like this:
In the search bar in the top left, type in “ElixirLS” which stands for Elixir Language Server. Click the green “Install” button. Once it’s finished installing, click the blue “Reload to Activate” button.
Step 3— Writing Some Code
Now that you've installed a code editor (Visual Studio Code) and installed Elixir, you’re ready to write your first bit of code!
In Visual Studio Code, go to the top bar and click File -> New File. You should now see a blank text page, like you would if you were creating a new Word document. Paste the following Elixir code into that blank page:
IO.puts "Hello World!"
Now go to File -> Save or press CTRL+ S.
The name you give the file is important, or at least the ending is important. Elixir files need to end in
.exs to work properly, so we’re going to name our file
You may also need to select from the dropdown labeled “Save as type” right under where you type in the file name. Choose “Elixir” (it may be at the very bottom of the list).
The location you save your file in is going to be important in the next steps, so save the file in your Downloads folder.
You may notice in Visual Studio Code that your code suddenly changed color! This is because of the extension that we installed. When the ElixirLS extension sees that you have a file open and the file name ends with
.exs, it will automatically change the color of different parts of the code. This is a huge benefit because as you get used to the colors, it helps you read the code better and find things faster.
Step 4— Running Your Program
Believe it or not, this little snippet of text that you saved in a file is a real program! But unlike the programs you’re used to, there’s no fancy icon somewhere that you click to make it run.
For that job, we’re going to use a program that comes with your computer called “Command Prompt”. Command Prompt is sort of a raw interface to your computer, where you can write a few words and hit “enter” and it will make the computer do things (like run programs that you’re creating).
Command Prompt can do a lot of things that aren’t possible anywhere else. We’re going to use it for a few things:
- Navigate to your Downloads folder where the
hello.exsfile is that we created
- Run our little program
Please click here (link coming soon!) to read Part 2, where we’ll use Command Prompt to do these things!