Originally posted on Educative.io
Do you want to become a web developer but don’t know where to start? You’re in the right place! Today, we will take you through a complete guide to your web development journey. If you want to skip the reading and get right into web development you can visit this great free course, Learn web development from scratch: Go beyond the syntax.
Here’s what we’ll cover today:
Part One: The basics of web development skills and tools
Part Two: A guide to web development jobs
Part Three: Resources for practice and help
Let’s jump right in!
Are you completely new to web development? No worries! We recommend checking out our Web Developer FAQ before you keep reading!
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.
- The basics of how the Internet and websites work
- Libraries and frameworks, like jQuery, React.js, and Bootstrap
- Other programming languages, like Python and Ruby (for back-end web devs only)
- 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 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.
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.
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.
<h4 style="color:Tomato;">Tomato Red</h4>
determines that the text “Tomato Red” will appear in the color "Tomato".
For example, this chunk of code dictates that when the button “Click here” is pressed, the word “Bigger Font” changes to size 35px.
<button type="button" onclick="document.getElementById('demo').style.fontSize='35px'">Click here</button>
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.
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.
- Express JS: used by IBM and Uber; minimalist design; harder for beginners
- Django: used by Google, Instagram; tons of built-in features; based on Python
- Spring Boot: easy to use; good for large scale cloud projects; based on Java
- Ruby on Rails: used by SoundCloud; good for small projects; based on Ruby
- Flask: used by Lyft; easy to set up; based on Python
- Angular: good for Single-Page applications; not SEO friendly; based in TypeScript
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
- 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 probably 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.
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.
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
- 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
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.
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.
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.
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.
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 here!
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.
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.
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.
For remote / freelance job boards:
- Upwork: tailor postings to your needs
- Just Remote: specific to tech jobs
- JobsPresso: diverse job options
- FlexJobs: features on major media outlets
For tech specific job boards:
- Mashable Job Board: can search by company
- Smashing Jobs: minimalist interface
- Krop: tailored to web designers
- GitHub Jobs: large community of users
For start-up job boards:
- Startupers: specific to bay area
- Angel: speak directly with founders
- Hired: only offers vetted start-ups
Starting something new is scary and exciting. Luckily, there are tons of resources available to you where you can keep learning and seek advice. We’ve compiled a list of the most important resources, forums, and newsletters to get you started.
Awwwards.com: Check out the work of other web developers for inspiration.
Codrops: A blog for web developers focused on the latest trends, tutorials, and design tips.
Codepen: A platform to build and test code
Designer Hangout: The most active community for UX designers
DZone: An online hub for tutorials and tools for web dev beginners
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.
Meetup: A search engine for local events that you can browse by category
Smashing Magazine: An international blog and thriving community of web developers who talk about books, webinars, web dev discounts, and more.
Webdevforums: A forum where you can get feedback on your projects and ask questions relating to SEO
Webdeveloper Forum: A general forum for questions relating to web development and program that is organized by frontend and back end questions.
Whatis.com: A free, online dictionary for terms relating to coding and web development.
You’ve made it this far! Bravo! You’re ready to begin your web dev journey. So, where do you start?
Working with experts, we’ve put together an easy-to-use roadmap course for everything you need to know to get started. Our free Learn Web Development From Scratch course cuts through the muck and gently guides you into the world of web dev through hands-on practice, text-based instruction, and interactive playgrounds.
The first three lessons familiarize you with web dev fundamentals and give you hands-on practice with this new language.
The course then dives deeper into the programming interface and teaches you how to modify the language you now know how to write. By the time you complete the course, you’ll be able to apply your knowledge and develop fully functional web modules, such as an image carousel and a to-do list application.
This course is also part of one of our carefully designed learning tracks. Once you complete the lesson, you’ll automatically know what to learn next with a simple click!
We know that being a beginner is already hard, so we believe that taking the first step shouldn’t come at any extra cost or stress to you. That’s why we’ve made our Learn Web Development from Scratch course completely free! You’ll get lifetime access to the course without any sneaky subscription fees. You could even start learning right now!