Get Our Free Ultimate Guide to Coding for Beginners

Get Our Free Ultimate Guide to Coding for Beginners

Make a plan for learning the tech skills you need to land a new job with this 60+ page FREE ebook!

If you want to make a career pivot into tech (especially because of the high starting salaries and flexibility that come with it) becoming a web developer is one of the savviest ways to get there.

There’s a clear list of web development skills you’ll need to learn, and once you have those it’s one of the easiest entry-level tech roles to land, since the industry often hires developers based on their portfolio and code, not previous job experience.

But what IS web development? And how exactly do you get started in the field?

We’ve put together this ultimate guide to break down everything you need to know about starting out as a web developer. From what exactly a web developer is, to what skills web developers need, to how to find an entry-level developer, we’re covering it all.

And don’t feel pressured to take in all this information at once! Bookmark this page and come back as often as you need while starting on your own path to web development.

Table of Contents

1. What is a Web Developer?
2. Key Web Developer Skills
3. How to Learn Web Developer Skills
4. Web Developer Salaries
5. How to Land a Web Developer Job
6. Freelancing as a Web Developer
7. Final Thoughts

Chapter 1: What is a Web Developer?

Web Developer: The Basic Definition

Web development is the process of taking the plans and layouts created by web designers, then coding them into live, functioning websites. Web developers, also called programmers, are the people who do it.

In terms of what this actually looks like, web development can be broken down into three general categories:

  • Front End Web Developers—Front end developers use languages like HTML, CSS, and JavaScript to build the visible parts of websites (think “front-facing”) you see when you visit with a web browser. Front end development is an effective and flexible way to break into tech, since front end web developers do everything from work for established companies to freelancing on their own and building up their skills while working for individual clients.
  • Back End Web Developers—While the front end of a website includes everything the user interacts with directly, think of the back end as the“under the hood” parts of a site. Users don’t see this work, but back end web development makes the parts they DO see run smoothly. For example, back end developers use “server side” programming languages to request data from a site’s web server, which then appears as HTML output on a user’s screen.
  • Full Stack Web Developers—Combine the skill sets of a front end and back end web developer, and you get “full stack.” Full stack developers are simply programmers who have experience with front end web development and back end development (and keep in mind that “web” can be substituted for “mobile app” or “app” development in this description, too, hence why you’ll see job postings for full stack app developers).

It’s up to your personal career goals and interests which of these developer paths you choose, but wherever you want to end up, we recommend starting by learning solid front end fundamentals. Even basic HTML and CSS skills (which can be learned within a month or so), will qualify you to do entry level freelance work for clients. After that, it’s up to you to decide what you want to specialize in and how far you want to go (whether it’s sticking with front end, branching out into back end, or tying it all together as a full stack engineer).

Bonus Reads:

(back to top)

Chapter 2: Web Developer Skills You’ll Need to Know

Now that you have an idea of what web developers do, let’s look at the core skills they use to do it.

Front End Programming Languages

These are some of the most common programming languages used for front end web development.

HTML

HTML (Hypertext Markup Language) defines the parts of web pages to the web browsers that visit them. When you access a site through your phone, tablet, or computer’s browser (Chrome, Safari, Firefox, etc.) those browsers are able to read HTML content and translate it into what you see on the screen. HTML is the language that defines which part of the page is a header, which is a footer, where paragraphs belong, where images, graphics, and videos are placed, etc.

CSS

CSS (Cascading Style Sheets) is a sister language to HTML. It’s used after the parts of a page are defined, and specifies the page’s style. Page layouts, colors, and fonts are all selected and implemented through CSS. In other words, if HTML is the foundation of a house, CSS is the interior and exterior decorating decisions.

JavaScript

While HTML and CSS are used to build static web pages, JavaScript is the coding language that brings sites to life with dynamic content. When you visit a website or web app with features like animated graphics, forms that offer autocomplete suggestions as you type, photo slideshows, and just about anything that involves web page content changing without a user manually reloading the page, those features were likely built using JavaScript.

JavaScript Libraries and Frameworks

JavaScript libraries like jQuery are collections of pre-written JavaScript code that can be plugged into web projects. This allows developers to save time on re-creating basic JavaScript functions, like interactive forms and image galleries.

Meanwhile, JavaScript frameworks like Vue.js and React.js are collections of libraries that can be used as templates for web projects. JS frameworks not only provide pre-written code (similar to jQuery), but they also provide a structure for where your JS code should go, helping projects become more efficiently and uniformly arranged.

Back End Programming Languages

These are some of the go-to coding languages used for back end web development.

PHP

PHP (which stands for—get this—PHP: Hypertext Preprocessor) is a scripting language used in “server-side” (back end) web development. Server-side activity involves a web browser sending requests to a web server (the software or hardware that stores a websites pages, images, media, and other assets), which then responds to the request with HTML code that is turned into content on the user’s screen.

PHP is a language used to request server content—for example, a PHP script can make your three most recent blog posts appear automatically on your site’s front page. Meanwhile, PHP scripts can also involve conditional (if/else/endif) statements that direct your site to change its display and add content from your web server as needed, based on user behavior.

Ruby and Ruby on Rails

Ruby is a “a dynamic, open source programming language with a focus on simplicity and productivity.” In other words, it’s free to use and its users are allowed to study, change, and distribute the language to anyone and for any purpose (that’s the open source part), while its syntax is designed to mimic non-machine language as much as possible (the part about being focused on simplicity and productivity.

In order to instruct a software program to print “hahaha” on the screen, standard programming languages might require you to code something like this:

($i = 0; $i < 3; $i++) {
echo “ha”;
}

With Ruby, “hahaha” looks like this:

3.times do
print “ha”
end

Simple AND productive, right?

When it comes to web development, Ruby becomes even more simple and productive with a software framework called Ruby on Rails. Like JavaScript frameworks, Rails is a collection of pre-written Ruby code and templates used to build and control the back end of websites and web apps.

Python

Python is an “object oriented” programming language that can be used for front end and back end scripting in web development (with a majority of its use coming on the back end). Object oriented languages (like Python) allow programmers to create virtual objects in their code and give each of these objects unique attributes and abilities. All of the objects a developer creates are then able to interact with each other or perform actions on their own.

Through this object model, object oriented programming languages like Python reduce complexity for developers by mimicking real world building dynamics and giving programmers a clear structure to work with. Objects can be isolated and maintained separately from the rest of their code (making it easier to locate and repair bugs), and—once created—they can be easily reused in future programs.

WordPress

WordPress is the industry leading CMS (Content Management System), a type of software program that lets web developers create, publish, and manage digital content online. By using a CMS like WordPress, they’re able to do all of this through a user interface where changes are reflected immediately after pressing a “Publish” button (as opposed to the less streamlined experience of coding sites from scratch).

While complete tech newcomers can use WordPress out of the box by following menu cues in the user interface and selecting pre-existing site templates, one you build up skills like HTML, CSS, and PHP you’ll be able to create your own WordPress page templates and site features, giving you the same kind of options for customization you’d have when coding from scratch.

Because of this versatility, the WordPress CMS is a widely-used tool for building sites that will appeal to side hustle clients as well as full-time employers. (Web technology survey site W3Techs cites WordPress CMS as owning 60 percent of worldwide CMS usage.) Simply knowing how to build basic websites with WordPress is enough to open up work as a WordPress developer, and WordPress’ sliding skill scale will allow you to learn gradually as you go—all qualities that speak to the wisdom of WordPress specialization.

Web Design, a Clarification

Although web design is its own field (and it’s possible to work as a web developer without having an active hand in the design process and vice versa), it only adds to your hireability and job flexibility as a developer if you have at least a basic understanding of web design. Web design fundamentals include:

Layout & Navigation Principles

It’s always important to remember that the layout of a website is as important as the content it presents. You need to arrange the website’s images, text, video, and menu options in a way that allows for efficient navigation by users.

Familiarizing yourself with best layout and navigation principles, like those illustrated in this UX Booth article, is a good way to get a design overview.

Color & Typography

In addition to layout and navigation, color and typography play a deciding role in effective web design. Even the world’s most brilliant layout can vanish courtesy of clashing colors and unreadable text.

Certain color and typography choices are a subjective part of the design process, but there’s a whole science of color choice that can (and should) inform web design. The same goes for typography—in addition to making web pages easier to read and more appealing to users, the right font size and style choices can directly affect the ability of search engines to index and rank your website.

Mobile First Design

In the early days of web design, most of us were looking at sites from our desktop computers. Fast forward to 2018, and 52 percent of all website traffic is now served to mobile phones, making “mobile first design” the web design standard. This means creating your website designs with the smallest display screens in mind, and working outward to bigger screens from there.

Our curriculum team uses water in a glass as an example. When you pour water into a glass, the liquid conforms itself to the size and shape of the glass being used—which is the whole aim of mobile first design. A website that looks spectacular on your phone’s screen should seamlessly expand into a spectacular experience on your desktop, and vice versa.

This UX Pin article gives a look at the kind of specifics that go into mobile first design—something you should be familiar with even as a web developer.

Version Control/Git

After all the hard work of marking up with HTML, styling with CSS, and programming with JavaScript, web developers will go through a number of revisions. If something goes wrong along the way, the last thing a developer wants to do is start over from the beginning. Version control is the process of tracking and controlling changes to a website or web application’s source code so this won’t happen.

Version control software—like open source stalwart Git—is a tool developers use to track those changes so they can go back to a previous version of their work and find out what went wrong without tearing the whole thing down.

If you’re planning on becoming a developer, you can see why this is a skill that you (and your prospective clients and employers) will be very happy to have.

Bonus Reads:

(back to top)

Chapter 3: How to Learn Those Web Developer Skills

Now that you have an idea of the kind of skills it takes to work as a web developer, you’re probably wondering HOW to actually start learning these skills. And, based on the kind of questions we get from prospective students, you might be letting some preconceived notions give you unnecessary anxiety on the topic. In addition to simply wanting to know where and how to learn tech skills, newcomers to tech are often worried that learning these skills will:

  • Take too long
  • Require high level math skills
  • Require a college degree

So let’s tackle those three common fears first.

Conquering Three Common Tech Fears: a Quickstart Guide

1. Learning Basic Coding Will Take You Months (Not Years)

Yes, you read that correctly. It is totally possible to learn tech basics in a matter of months. We’ve written in more detail here about general “learn to code” timeframes and timeframes specific to languages like HTML/CSS and JavaScript, but here’s the general summary:

The absolute first step toward web development is to start learning two coding languages ASAP—HTML and CSS. These two skills will allow you to start building basic websites, and they’ll even qualify you to start doing paid HTML and CSS jobs (think freelance web development gigs for friends, family, or local businesses). And here’s the thing—learning to code with HTML and CSS can take as little as weeks or even days depending on your pace and approach.

After getting experience with HTML and CSS, you can expand your development repertoire further with programming languages like JavaScript. Learning JavaScript will add a few more months to your learning process, but knowing JavaScript will open up even more development jobs.

Once you’ve nailed the basics of these front-end development skills the learning process will continue over the course of your development career, and there are always more skills to learn in order to stay professionally flexible and relevant—for instance if you’re interested in exploring back-end web development you’ll need to learn server side languages like Ruby on Rails—but the process of becoming a professionally viable front-end developer can realistically be achieved in a matter of months.

2. High Level Math Isn’t as Important as You Might Think

The high starting pay and job flexibility associated with web development sounds great…but unless you have doctorate level math skills it’s probably not for you, right?

Wrong!

While tech careers are often stereotypically associated with hardcore computation, it’s the computer you’re using that does most of the intense number crunching. According to web developer Charlotte O’Hara (who I interviewed on the subject previously), critical thinking skills and an eye for design are a much bigger part of the job than advanced calculations. You can read more about the facts on math and coding (and how insecurity around math is often just a matter of perception) in our How Much Math Do I Need to Know to Code article.

3. College Degree Not Necessarily Required

But even if you won’t need as much math as you think (or you know more math than you think you do), you still need a degree in computer science to work as a web developer, right?

Wrong again!

Yes, having a CS degree can certainly be a good thing if you’re trying to work as a web professional, but—since web development is largely a skills-based field—if you know how to do the work, there’s absolutely no reason you can’t get hired.

If you’re ready to start working as a web developer, the best thing to do is start upskilling your way to the languages (HTML, CSS, JavaScript, etc.) you’ll need for doing the work—it might sound like a long haul, but it’s considerably shorter and less expensive than going back to school for two-to-four years.

Even better, the degree-less success stories are out there (and we’ve covered quite a few of them).

Where to Learn Web Developer Skills

Fears and misconceptions aside, the next question to answer is WHERE to start learning web developer skills. The good news is, whatever your situation, there’s a learning format that will work for you. Some of the most common places to learn coding skills are:

Coding Bootcamps

Bootcamps are traditionally 8-12 week, in-person intensive programs where students code all day, every day for the duration of the course. While the bootcamp format can be a great way to get immersively hands-on with coding languages and learn at an accelerated rate, there are some pitfalls to this approach as well. As our CEO Adda Birnir says:

“Bootcamps are great options for some people, but—like most things in life—they’re not perfect for everyone. In order to do one of those bootcamps you have to be in a set location, commit to attending full time, and it’ll cost you. That might work if you’re not working, live in a major city, and have money saved up, but not if you’re caring for children, live outside of a big city, or can’t afford in-person bootcamp tuition (currently an average of nearly $12,000 according to Coursereport).”

Online Coding Tutorials

Fortunately, if the barrier of entry to bootcamps doesn’t fit your personal circumstances, there are other options. One of those options (on the other end of the spectrum from coding bootcamps) is learning through online tutorials. Unlike the bootcamp model, learning through tutorials online can be done entirely at your own pace, and in many cases for free. Sites like Coursera and Lynda offer low cost and free tutorials, while some languages like Python have their own official online beginners guides and documentation. You can get even more ideas for free coding resources by checking out our article, 64 Ways to Learn to Code For Free.

The downside to this approach is in the lack of structure. If you’re someone who’s extremely self disciplined and has a good amount of spare time, you CAN cobble together coding basics through tutorials alone. But when you hit a wall, it’s all on you to get past it. And there’s no recognition or certification at the end of the tunnel. Yes, all that matters when it’s time to build a website is whether you know how to do it or not, but the kind of certification that comes from completing an established course makes it a lot easier to convince clients and employers that you’re the person for the job.

Online Coding Courses

A third way to learn web developer skills is to take a paid, instructor-led course online. This approach mixes the structure of a bootcamp (though a lot less intense and considerably less expensive) with the flexibility of learning from home. Online courses like our Skillcrush Front End Developer and Web Developer Blueprints can be completed in just three months by spending only an hour a day on the materials.

Paid online courses like Skillcrush Blueprints also include access to instructor assistance and feedback, an online community where you can share questions and accomplishments, and a certification at the end of the process. You can read more about Skillcrush’s online courses here.

Bonus Reads:

(back to top)

Chapter 4: Web Developer Salaries

So, if you take the time and spend the money to learn web developer skills, what kind of financial return on your investment can you expect to see from entry level web developer jobs?

According to Indeed.com, the average entry-level front end web developer makes $61,512 a year working full-time in the United States. After three years or more of experience this average climbs to $108,409 for mid-level and senior front end development jobs, while developers who learn back end skills average $128,148/year.

We’ve broken these numbers down further in our Web Developer Salary Series article, but keep in mind they’ll vary according to certain elements—location, experience, expertise, etc. To determine what you can reasonably expect to make, Glassdoor’s Know Your Worth tool is a great way to plug in specific details about your own circumstances to calculate a likely salary (and the right number to give when asked your salary requirements). You may also want to explore how to calculate your rate for freelance web developer work.

(back to top)

Chapter 5: How to Land a Web Developer Job

You know the web developer skills you need, where and how to learn them, and the kind of return on investment you can expect, but there’s one important detail—how do you actually land a web developer job? Making that leap from learning to code to working as a junior web developer might seem daunting.

Of course, you should begin by staying on top of listings from general job sites like Glassdoor and Indeed and developer-focused sites like Github, Smashing Magazine, and Stack Overflow. But everyone seems to want experience, so how do you get that experience if you haven’t been hired yet? We have some tips and tricks to help you out.

1. Work on Mock Coding Projects

Working without being paid is generally NOT something we recommend—except when it comes to padding a body of work before you’ve actually started working. Don’t wait for that first paid job to put your coding skills to work. Do as many mock projects as you can while you’re trying to land your first paid gig, whether it’s a model website for a fictitious brand or a prospective redesign of a real site. Or show what you can do with JavaScript and tackle some test JavaScript projects.

And—while you’ll be using these projects as part of your resume and portfolio when you apply for jobs—don’t forget to publish your work publicly on sites like Codepen, Stack Overflow, and Github. Being an active member of the online developer community, even before you start your first day of work, is a good way of showing clients and employers your dedication and professional curiosity.

Finally, remember that this first step can actually bridge the gap between practice work and paid work. Reach out to friends, family, and acquaintances and see if anyone has website needs that you’re able and ready to tackle. Doing these starter projects either pro bono or for a beginner’s freelance rate will give you valuable work experience en route to your first “real” job.

2. Use Your Portfolio to Show Off Those Projects

Having a crisp, easily shareable digital portfolio is a must in order to win over clients and hiring managers. But what does that mean?

First, you need to find the right site to house your digital samples. This article on free design portfolio sites will lead you in the direction of stalwarts like Behance and Dribbble, both of which work just as well for web developer portfolios as they do for web design.

Second, you need to make sure you’re including the kind of web developer samples that will resonate with clients and employers. This article will give you 10 tips for building a stellar web developer portfolio, after which you can level up your portfolio game even further with this 4-step guide to making sure your work shines.

3. Make Sure Your Elevator Pitch is Good to Go

In between trolling job listings and compiling a knockout portfolio, life sometimes just happens. You never know when you might be in a situation where you’re suddenly face-to-face with someone who can hook you up with that dream web developer job. Which means you better have something to say when and if the time comes.

No problem, we’ve got that covered, too! If you need a little help explaining who you are, what sets you apart, and why (despite maybe not having the most on-paper experience) you’re the person to solve a company’s problems, go ahead and download our guide to writing the perfect personal pitch.

4. You’re Breaking Into Tech—But You Still Need a Conventional Resume and Cover Letter

The tech industry may have changed a lot of the ways we work and find jobs, but one institution remains the same—the venerable cover letter and resume. In order to really nail that web developer job, you’re going to need both.

Because you’re new to web development, it’s critical to write a custom cover letter when applying for jobs. Take the time to research the company or client you’re applying with, notice any trends in their projects or even problem areas (what could they be doing more of?), and make sure to include those observations in your letter. You can even mention a personal experience you’ve had with the company, too. The more original, the better.

Finally, when it comes to your resume, it needs to live up to the same high standards as the portfolio and website projects you’re showcasing. The good news is, there are plenty of free resume templates that will hit that standard for you, giving you one less thing to spend your creative energy on. Check out our list of free creative resume templates for 2019 here.

Bonus Reads:

(back to top)

Chapter 6: Freelancing is a Flexible, Entry-Level Web Developer Option

We’ve said it before and we’ll say it again: tech jobs are flexible. And part of what makes them so flexible are the freelancing opportunities available in every tech field. Whether it’s web development, web design, or digital marketing, tech jobs run the gamut from full time jobs for a single company, to freelance careers, to part time side hustles you can do while caring for children or building your skills.

Web development is no different. If side hustling appeals to you, or if you’re looking for a way to do paid projects while building your skills AND your portfolio, don’t forget that freelance developer work is always an option.

Of course, if you’re going into business for yourself, you’ll need some support.

Here are some articles to get you started on the ins and outs of working as a freelance web developer:

Meanwhile, you can check out our own guide to calculating a freelance web rate here, and you can download our calculator for freelance web design rates here.

(back to top)

Chapter 7: Final Thoughts

Well, you’ve made it this far—which means you’re probably ready to get serious about learning to code and working as a web developer.

Making that first commitment is a big step, so congratulations! But now it’s time to take the next one: consider signing up for our Skillcrush Front End Developer Blueprint or Web Developer Blueprint today, and you’ll be well on your way to a high paying, flexible, creative career in web development.

(back to top)

Get Our Free Ultimate Guide to Coding for Beginners

Get Our Free Ultimate Guide to Coding for Beginners

Make a plan for learning the tech skills you need to land a new job with this 60+ page FREE ebook!

Similar Posts