Introduction
In this course, you’ll learn all about becoming a web developer, from the responsibilities that a web developer performs on a day-to-day basis to the set of skills that you’d need to succeed in such a role. And, of course, you’ll also get your hands dirty with code: We’ll introduce you to the fundamental building blocks of the web and make sure you leave this course having developed your very first website!
What are we going to do today?
- Learn what the role of a web developer is and discuss the different types of web developers
- Take a look at the skills required to become a web developer
- Preview what we’ll be learning over the next 5 days
- Create your first webpage using a text editor and browser
Ready to dive into the magical world of web development? Let’s go!
1. Who is a web developer?
A web developer is at heart an interactive artist. They’re someone driven by a deep desire to create things. A web developer’s canvas is a user’s web browser.
Much like how a curious child takes pleasure in making toys by joining LEGO blocks—and then experiences a similar joy in taking things apart to see how they’re made, a web developer’s job is to use the basic building blocks of the web (like HTML, CSS and JavaScript) to create something complex like a webpage. Don’t sweat it! We’ll get into all of those terms soon.
It is also the web developer’s job to diagnose problems in a website’s functionality, to understand how something works by reading the code behind it, and to make changes to fix any issues. That essentially makes web developers the physicians of the world wide web. When we talk about the world wide web, we’re mainly referring to websites and web applications. At this point, the curious aspiring developer in you might be wondering, “What’s the difference between the two?”
Well, we’re glad you asked! A website is usually a simple page or a group of pages (the popular web comic site, xkcd, for example). However, modern websites are much more than that. Take Google Docs, for example. It has a nice interface that, once opened, looks very much like a desktop software like Microsoft Office. Such complex websites are often termed web applications. A web developer today is expected to know how to create and work with web applications. Having said that, most people use the terms interchangeably, so don’t get too hung up on the terminology!
Types of web developers
There are different types of web developers who focus on different areas. These include:
- Frontend developers: Frontend developers implement web page designs using HTML and CSS. They make sure the website looks pretty on different devices, and that the forms and buttons work.
- Backend developers: Backend developers create the backbone of the web application. They write code logic that handles a user’s input (for example, what should happen when you click the signup button after filling in a form).
- Full stack developers: Full stack developers do bits of both backend and frontend. Depending on the problem at hand, they can switch cape 🦸♀️🦸♂️ and move stacks. You can learn more about the differences between frontend and backend development in this guide.
There are many other specific roles in web development, like system architects, AI, machine learning and security engineers. These roles require more specialized knowledge of one or more of the above types of development, so many professionals in these roles will start by gaining some general web development experience.
2. What are the skills required to become a web developer?
What does it take to become a web developer? Essentially, just three things: HTML, CSS and JavaScript—the three pillars of the web, which we’ll be learning about over the next few days. Together, these three pillars make every website work, defining the content to be displayed (HTML), telling a browser how to display that content (CSS), and making the content interactive (JavaScript), respectively.
A web developer is well versed in these three technologies. They can read other people’s code and make changes to it. They can find and debug bugs (shortcomings in existing code). A web developer might, at times, work on a new project (a new website) from scratch, or may have to work on an existing website and make it better. A typical day in the life of a web developer involves fixing bugs, developing new features (that is, enhancements) and webpages, and working with other developers to discuss ways to solve problems.
Don’t be overwhelmed by all of these details. You’ll soon see that they’re all very connected, and learning one of these automatically makes you good at a few others!
What’s the job outlook like for web developers?
In short, very good. Employment of web developers is projected to grow 13 percent from 2018 to 2028, much faster than the average for all occupations. Demand will be driven by the growing popularity of mobile devices and ecommerce (Bureau of Labor Statistics). It is a great time to be a web developer as startups are flourishing, which results in above average salaries for web developers in most parts of the world.
Also given the nature of the job, finding a remote job as a web developer is easier than many other domains. As a result, it opens up the entire world’s job market to everyone irrespective of where they’re physically located.
3. What we’ll be learning in the next five days
No web development course is complete without a hands-on project. In this course, we’ll be using the three pillars of the web (HTML, CSS, and JavaScript) to build your first project, a personalized portfolio website. Once you have these under your belt, picking up other tools and languages is much easier. Pay extra attention to the basics, as a shaky foundation leads to loads of confusion later on. We’ll also give you the resources needed to put your website online so that you can share it with your friends and family.
Today, we’ll start by getting a fish eye view of the web development world. We’ll talk about the tools we’ll use in this course, and we’ll also write some HTML.
On the second day, we’ll write more HTML and HTML elements, and create the rough layout of our project website.
On day three, we’ll write some CSS to make our website mobile responsive, which means that our website will be viewable on computers, tablets, and mobile phones.
On the fourth day, we’ll dive into some advanced CSS and add cool effects to our page.
On the fifth and final day, we’ll learn how to write basic JavaScript. We’ll also look at form validations and other common elements of JavaScript programming.
To give you a tiny glimpse, this is roughly how your website will look like at the end of this course. Pretty cool, right?
Ready to get started? Let’s begin by setting up your developer environment.
Setting up your developer environment
For this course, we’ll need two tools that every web developer uses:
- A text editor to write code
- A web browser to see what we’re building
While you can use any web browser or text editor, we recommend using Google Chrome and Sublime for this course.
- Google Chrome can be downloaded from https://www.google.com/chrome/
- Sublime Text can be downloaded from https://www.sublimetext.com/3.
Like any good craftsperson, it’s important that you know and understand your tools. For that reason, let’s take a brief look at what we have so far.
Google Chrome
Google Chrome is a web browser. You may or may not already be using Google Chrome for browsing the web. A web browser allows us to view webpages (similar to the one you’re reading this very text on). We’ll use Google Chrome to view the results after writing and making changes to our code.
Sublime Text
Sublime Text is a popular text editor. A text editor is a very aptly named piece of software; it helps us edit text. It is similar to the default text editor that comes preinstalled on Mac or Windows, but has additional features like code highlighting to enhance our coding and debugging experience.
⚠️ Watch out! Sublime Text is a paid software with an unlimited trial period. You’ll occasionally see a dialog box popping up prompting you to pay for the software license. You can pay for it if you wish, but you don’t need to just for this course.
😎Pro tip: If you get stuck when installing Chrome or Sublime, or see any error messages, it is best to do a web search (try a Google or DuckDuckGo search) for the exact error message. It is likely that other people have had the same problem before us and a solution already exists.
After downloading, install it according to the instructions you’ll find on those websites. Once you’re done installing, you’re ready to move to the next section.
4. Your turn: Creating your first webpage
We’ll now use the tools that we downloaded and installed in the previous section to do our first development work, creating our first text on a webpage. We’ll use HTML for this purpose. Let’s talk about HTML quickly before we start creating our first page.
HTML stands for Hypertext Markup Language. In a nutshell:
- Hypertext simply means text that can jump from one point to the other. If you have ever clicked a link on a page (try this: google.com), you’ve used hypertext.
- Markup is simply a Lay to structure content so that we can distinguish between different blocks of text.
- Language means a, umm, language. Computer languages are similar to real world languages like English and German, just very strict in their syntax.
HTML lets us structure our page and the data in it. Once we have a structure and data to work with, we can focus on style and functionality.
Okay, that’s enough theory for now. Let’s get right into it by opening Sublime Text.