A Beginner's Guide to Web Development

Web development is a rising field, with thousands of new developers finding their start each year. However, with all the learning content out there, it can be hard to know where to start.

Today, we will take you through a complete guide to your web development journey, from basics to job interviews.

Here’s what we’ll cover today:

• Part One: The basics of web development

• Part Two: A guide to web development jobs

• Part Three: Resources for practice and help

Make amazing web apps by learning HTML, CSS, and JS.

Part One: The Basics of Web Development#

What skills do you need as a web developer?#

Anyone can become a web developer. You don’t need a fancy degree in computer science to master the skills, but before you can start looking for jobs in the field, there are a few things you will need to learn.

1. The basics of how the Internet and websites work
2. The basics of HTML, CSS, and JavaScript
3. Libraries and frameworks, like jQuery, React.js, and Bootstrap
4. Other programming languages, like Python and Ruby (for back-end web devs only)
5. Git and GitHub

Don’t let this overwhelm you. All of these skills naturally build off of each other, so it’s important to learn slowly and take it step-by-step as you develop a solid foundation.

Alright, now you know what’s ahead of you. Let’s start learning!

The Foundational Stuff#

The Internet is comprised of three, interacting features.

• Websites: a collection of files and information that we access through a computer and a server

• Servers: the computers that store all the data of websites in a massive network

• Browsers: the programs that load and display content on your computer

Every website is comprised of the frontend (client side) and the backend (server side). The frontend includes everything that the user will directly see and experience when they visit a website. The backend is the behind the scenes where information is stored, sent, and received.

Everything you see on a website, like the one you’re looking at now, is made up of HTML, CSS, and Javascript files.

These are the most foundational tools that you need as a web developer. They are the languages you use to actually create your webpages.

So, let’s learn what they do!

What is HTML?#

HTML (HyperText Markup Language) is the basic programming language for web development. It provides the basic structure of a site such as words, titles, and paragraphs.

HTML consists of a bunch of established tags, which represent different functions that then “translate” into readable information on the screen. These tags are written between angle brackets.

For example, the text surrounded by the <b> </b> will be bold. The tag <h6> </h6> will make your text the smallest header size.

What is CSS?#

CSS (Cascading Style Sheets) is a style sheet that essentially describes how HTML elements will appear on a webpage. You use CSS to control the presentation, style, and formatting of your site, like RGB values, border colors, background images, and more.

CSS files declare a set of rules, that define a set of properties and their values.

For example:

<h4 style="color:Tomato;">Tomato Red</h4>

determines that the text “Tomato Red” should look like this:

Tomato Red#

What is JavaScript?#

JavaScript is how you control the behavior of your webpage. If you’re serious about web development, you’ll need to start to learn the basics of JavaScript. It is one of the most popular and pervasive programming languages in the world, with a low entry barrier and offers immediate results based on the success of your code.

JavaScript makes websites interactive by manipulating your various HTML and CSS features. With JavaScript, a user can click on a button, scroll to the bottom of a page, or display photos in a moving carousel.

For example, this chunk of code dictates that when the button “Click here” is pressed, the word “Bigger Font” changes to size 35px. Try it out!

<button type="button" 
onclick="document.getElementById('demo').style.fontSize='35px'">Click here</button> 

The Technology Stack#

Alright, so now we understand the basics of HTML, CSS, and JavaScript. Next, we need to tackle frameworks and libraries, which are part of the technology stack. A tech stack is the combination of software, applications, programming languages, and tools that all build on top of each other to make your website. Companies and web developers will use different tech stacks based on their unique needs and goals.

So, what are frameworks and libraries, and why do we need them? While you can technically make a webpage without these tools, you won’t make it very far as a web developer without them.

What are frameworks?#

You could build a webpage completely from scratch, but it takes a lot of time, especially when you want to add more complexity. That’s where JavaScript frameworks come in handy. A framework is like a prepackaged structure of pre-written code for your website that determines how programs should interact.

Say you wanted to build a car. Instead of starting entirely from scratch, you can buy a vehicle frame to save time and guarantee you’ll build something that will actually drive. A framework in web development is similar. It offers built-in programs, plug-ins, and tools that you install into your website files. Frameworks speed up your development process, and they are made by other developers, so you know the code is pre-tested and effective.

There are backend and frontend frameworks that use different programming languages. Let’s look at a few notable ones to get you started.

See how React, Vue, and Angular compare for work in 2020, Angular vs Vue vs React: choosing the best framework in 2020

What are libraries?#

A library is a collection of specific tools and features that you can add to your website for functionality. Unlike a framework, a library does not offer any structure but rather implements different behaviors and actions on your webpage.

Let’s return to our car analogy. If the framework is the frame of the car, the libraries are the features and parts you add to the car to tailor it to your needs, like the tires, air conditioner, or steering wheel.

There are tons of different libraries that each have diverse purposes.

Let’s take a look at a few to get a sense of what they can do.

• jQuery: for manipulating HTML, DOM, and CSS
• React.js: for creating interactive UIs
• Chart.js: for making charts using JavaScript
• Wow.js: for showing animations as you scroll
• Scrolline.js: for showing how far you’ve scrolled on a page

jQuery and React.js are the most important libraries for you to learn at this time. They are very popular and have hundreds of unique features to make some really cool stuff.

What is Node.js?#

Node.js is a popular open-source, server-side tool for fullstack and back-end developers.

Node is a run-time environment used for executing your web programs. It’s very useful for building network applications. It also comes packed with a library of JavaScript modules to simplify your web application process.

Node.js is becoming more standardized even at enterprise-level organizations, so it’s a valuable tool to master.

What other tools do I need to become a web developer?#

Having the right tools before you get started will prepare you to learn faster and more efficiently. Fortunately, you can get started with just three basic things: a browser, a text editor, and a version control system.

Web Browsers#

This is where you will test your code. A good web developer should be comfortable using many different kinds of browsers, but as you’re getting started, it’s fine to stick with one until you feel more comfortable.

The most common browsers used by web developers are outlined below.

This list is not exhaustive, so you will see several others as you research and learn.

• Mozilla Firefox: open-source, native on all platforms, lots of updates
• Google Chrome: DevTools, easy to troubleshoot JavaScript, uses a lot of memory
• Edge: integrated with Windows, cons similar to IE
• Brave: focused on performance, secure, poor plug-in support
• Safari: great dev tools, not integrated with Windows
• Opera: free VPS service, cons similar to IE

Text Editors#

This is where you will write your code. There are many different options for text editors. You computer likely comes with a built-in one, but we recommend a more robust option.

The most commonly used text editors by web developers are:

• Atom: open-source, cross-platform, created by GitHub, known for its speed (free)
• Sublime Text: cross-platform, known for its plugins and shortcuts ($70)
• VS Code: open-source, created by Microsoft, interactive debugger (free)
• Brackets: open-source, made by Adobe, live preview feature (free)

Unlike browsers, most web developers stick with the same text editor. Explore your different options to see which one is most comfortable for you. The more you use it, the more muscle memory you will build.

Content Management System (CMS)#

A Content Management System is a software used to facilitate editing, creating, and publishing your work.

A CMS gives you control over your content by integrating all of the features of your site into an accessible platform. Many of these help with both content management, marketing, and content delivery.

A CMS typically uses a database (such as MySQL and MariaDB), which stores a collection of programs and tools in a particular programming language. That way, you can edit and manage your website without needing to return to the minute details of your code.

Choosing a CMS depends on a lot of different factors, like your users, the size of your team, and the ease of the interface. A good CMS for beginners is WordPress.

It’s a free, open source hosting service for building and publishing websites. It’s very popular for bloggers and has a low entry barrier for beginners. With a huge community of support, you’re likely to find answers to your questions as they come up.

Some other notable CMS softwares are Drupal, Typo3, and Joomla!

Part 2: A Guide to Web Dev Jobs#

What jobs are there for web developers?#

Once you feel confident in your web dev skills, it’s time to actually start looking for work and apply your skills to the real-world. Where do you begin? What are the options for you?

Let’s look at three things you’ll need to consider as you figure out the job that is best for you.

Step 1: Determine your web dev specialization#

The first step to looking for work is to determine what kind of web developer you want to be. There are three different categories of web developer jobs to consider: frontend, backend, and full stack.

You might not know yet which is a better fit for you, and that’s fine! The more you practice and explore, the clearer that will become.

Frontend Web Developers work on the layout and visuals of a website and use languages like HTML, CSS, and JavaScript. They work with web design and user experience. This kind of web dev is good for someone who likes fine-tuning details. The salary for a front-end web developer generally ranges from US$45k - $75k.

Backend Web Developers work on the frameworks of a website that fetch and display data. They use languages like Java, Python, and Ruby on top of HTML, CSS, and JavaScript. This kind of web dev is good for someone who cares more about functionality than design. The salary for a back-end web developer generally ranges from US$55k - 85k.

Full Stack Web Developers deal with both sides of web development. The salary for a full stack developer generally ranges from US$60k - 110k. Learn more about becoming a Full Stack Web Developer!

Step 2: Determine what work environment is best for you#

Before jumping into a career, you should consider the different work environments available to a web developer. You could work freelance, find a full-time job with a big company, join a start-up, or even go into teaching. Think about which environment is best for your life situation. This will determine how you market yourself, how you design your portfolio, and where you look for job postings.

Step 3: Start building a portfolio of your awesome projects and skills#

A killer web developer portfolio is critical for getting jobs in the field. This is the website where you showcase all your hard-earned skills, beautiful designs, and best web projects. We know you’re just starting out, so don’t let this step overwhelm you.

As you learn more and practice, you’ll start to compile pretty much everything you need for a portfolio. Your portfolio can even showcase your early work and your practice projects!

There are a lot of hosting websites where you can publish your portfolios. Here are three great options for those of you starting out.

Go check out them out and get some inspiration from other web developers: Github Pages, Repl, Carbonmade, Krop.

Where do I find job postings?#

Now that you know what kinds of jobs are out there, you need to know where to find them. There are a lot of resources for job searching that range from general to specialized.

Important note: One of the best ways to learn about job openings is through the Web Dev community. Networking is a key way to learn about jobs and see what kind of work excites you. Don’t be afraid to go to meetups, conferences, and job workshops.

Part 3: The Resources#

Where can I learn more about web dev?#

Starting your web dev career is scary and but exciting. Luckily, there are tons of resources available to you where you can keep learning and seek advice.

• EdPresso: Educative’s online dictionary for quick answers to common questions organized. These are organized by tags and have useful visualizations to help you learn quickly.

• GitHub /StackOverflow: Open-access forums and discussion boards where a global community of programmers and developers share code, answer questions, and give feedback on projects.

• Learn Web Development From Scratch: this course gently guides you into the world of web dev through hands-on practice, text-based instruction, and interactive playgrounds.

• Web Development: A Primer: familiarize yourself with the basic terms before getting hands-on with a project

Happy learning!

Continue learning about web development#

• The Roadmap to becoming a Front-End Developer

• The Web Developer FAQ

• Learn JavaScript OOP: A primer for web development