Need some help? Click here to join a Discord server created exclusively for this series.
Before we get started there’s a few things you’ll need to download.
One of the first things you’ll need before we begin writing code is a text editor to write your code in. Two popular choices at the moment are Visual Studio Code and Sublime Text. Either one of these will do just fine—they’re largely a matter of personal preference.
Visual Studio Code is 100% free and open-source. Sublime Text is free to download as well but there is an $80 fee for a license which you’ll inevitably see in a prompt if you use Sublime Text long enough.
Next you’ll need to get a terminal emulator for the command-line work we’ll be doing. If you’re on Mac, I’d recommend iTerm2 but you’re welcome to use the default terminal application provided by Apple.
The last thing you’ll need to do is install Git. Git is an open source version control system which allows you to track changes in source code and coordinate working on these files among a team. You’ll be using Git to push your code to Github and to clone (or download) existing code repositories that other developers have created. For now, we’ll be using Git and Github to manage the code we write in this tutorial.
Once you’ve installed Git you can verify it was installed by running the following command in a terminal window:
Now that Git is installed and ready to go, we can create a folder for the code we’re about to write. First, create the new directory.
cd (which stands for change directory) into the new directory.
Now we can create the HTML page for our code using the
At this point, we’ll initialize our new directory as a Git repository.
Then we add our files using
git add . and commit our changes with a message: “Initialize repository”.
git add . git commit -m "Initialize repository"
I taught myself to code and now I’m a self-employed remote freelancer. I know what it takes to get here and I can teach you how to do it too. Click here to join my email list where I share my career tips and keep you up-to-date with my latest tutorials.
At this point we’re ready to take a look at our “Hello, world” program using the
index.html file we just created. Open that file in a text editor such as Visual Studio Code or Sublime Text and add the following text to the file.
<!DOCTYPE html> <html> <head> <title>Code Companion - Hello, world</title> <meta charset="utf-8"> </head> <body> <h1>Hello, world!</h1> </body> </html>
This is an extremely basic HTML page which displays a message: “Hello, world!”. Open this file in a web browser and you should see the message within the page.
index.html just below
Now when you view this page in a browser you should see the previous message, “Hello, world!”, along with an alert that displays the same message.
So how does this work? Let’s start by looking at the five lines we just added.
Following that is our
<script> and above its closing tag
</script>. In this case, we’ve added the following code:
When we call a function there’s a certain structure to how it’s called. First there’s the function’s name followed by an open parenthesis. Afer this open parenthesis are zero or more “arguments” followed by a closing parenthesis and a semicolon to end the line.
In our case we began with our function name
alert followed by an open parenthesis. Then we provided our function a single argument in the form of a string:
Hello, world!. After the single argument we finish our function call with a closing parenthesis and a semicolon.
Got an idea for a tutorial? Contact me on Twitter and I might publish it on this blog!
In our second example of the “Hello, world” program we’re going to use an interactive programming environment known as a REPL (pronounced “repple”) which stands for read, evaluate, print, and loop. The REPL environment that we’ll be using first reads our input, then it evaluates our input, then it prints any results and finally loops back to the first read step. Let’s see what this looks like in action.
First, open a browser such as Chrome and open the developer tools. You can do this with the keyboard shortcut
Within this window you can now call the
alert function as we did earlier to see the REPL in action.
If you’d like to avoid an alert modal every time you call
alert you can print the results directly into the REPL instead using the function call
If you’re wondering why
console.log() has a period in the middle while
alert() is just one word, that’s totally normal and it’s good you noticed the difference between the two function calls. Since this is an introduction, the difference between the two is out of scope for this tutorial but it will be covered when we get to functions and objects.
Once you’ve finished the installation process, you can double check that everything has been installed correctly by opening a terminal window and running the following command:
Within this file we’ll add some of the code we used earlier with the REPL. However, since this code isn’t being run in a web browser the
alert function, a function provide to us by web browsers, is no longer available to us. Instead we’ll use
Save this and within a terminal window navigate to the
At this point you should now see the argument to
console.log() printed to the terminal window.
Feel free to update the file with a few more function calls to see what happens.
console.log('Hello, world!'); console.log('Hello, world?');
Before we finish, head over to GitHub and create an account. From there, click “Start a project” and provide a repository name. Your directory name (
webdev-intro) and repository name don’t have to be the same but it may help so that you can keep the two aligned. Then, click “Create repository”.
Now that your repository has been created you need to add the repository url to your project directory. Within the
webdev-intro directory run the following command replacing
your-username-here with your own GitHub username.
git remote set-url origin https://github.com/your-username-here/webdev-intro.git
At this point you should see your updated URL by running the following command:
git remote -v
Now that the GitHub remote URL is set, add the latest updates along with a commit message.
git add . git commit -m "Add hello world"
Then push these changes up to GitHub.
git push origin master
Now that these changes have been pushed to GitHub your code is accessible to you at any time (thanks to the “cloud”) even if you delete the files on your computer. Once again, Git and GitHub will be covered in more detail in a later tutorial.
Experiment with arguments other than
Hello, world!. What happens if you pass two strings to
alert()? What happens if you pass two strings to
alert('First', 'Second'); console.log('First', 'Second');
What happens if you pass a number to
Learning a front-end framework is hard. "Getting started" tutorials cover the basics but you leave thinking, "Okay, now how do I build something with this?"
The truth is, getting started tutorials aren't all that great for beginners. They're demos to highlight as many features as quickly as possible.
They're great for showing off what a framework can do. They aren't so great for teaching you how to build web apps.
The end result is a basic application that doesn't mimick what it's like building real applications as a front-end developer.
You'll work with a mocked API and database. Application architecture isn't covered. Automated testing is skipped altogether.
Trust me, I've been there. But those days are over.
With The Angular Tutorial, you'll learn how to build applications using a real API and database. You'll leverage 3rd party APIs like Zomato, Google Places, and open-source libraries just as you would in a real job.
The Angular Tutorial assumes you have no previous knowledge of the Angular framework. It starts at the very beginning.
Every piece of code is explained and tested to make you interview ready.
Ready to get started? 👇