Getting started with web development can be strenuous and confusing. There’s so much to learn and you have so many different options for languages, frameworks, and open source projects to choose from. Where do you even start?
There is no single correct answer but there is a natural progression that most developers take. It’s easier to start with the basics and slowly move into studying the more detailed programming languages.
In this guide I want to share a start-to-finish approach that anyone can take to learn web development. I’ll share not only the most popular dev languages but also the best resources and tools to help you learn along the way.
The Basics: HTML5 and CSS3
If you’re just getting started then HTML and CSS are absolute fundamentals for web development. These two languages aren’t really programming languages because they don’t deal in logic.
HTML is a markup language and CSS is a style language. HTML defines how a page should be structured and CSS defines how a page looks on the screen. These two languages are considered frontend languages because they operate in the browser(no server needed).
Some programmers do get started with full languages like Python or JavaScript. But if you want to build for the web and aren’t sure where to start then HTML/CSS should be #1 on your priority list.
The two languages are very different, but they complement each other nicely. A page with just HTML will work, but it will not look pretty. Likewise a pure CSS file actually won’t show anything in the browser because there’s no HTML to render.
If you can learn HTML and CSS then you can build websites. They may not be dynamic or programmable, but pure HTML/CSS websites can work and look good.
The most updated versions of these languages are HTML5 and CSS3. These aren’t incredibly different than HTML4 and CSS2. They just add new features that make developing websites a lot easier.
I could rattle off project ideas or step-by-step approaches to learning these languages. But honestly the best way is to come up with your own projects and build them. Along the way you’ll run into problems but you can solve all of them with Google searches and Stack Overflow.
You can also find great snippets on Codepad if you’re looking for HTML/CSS solutions to common problems. You can even make a free account to save your favorite snippets for future reference.
When it comes to basics like HTML and CSS you really can learn everything for free on the Internet. If you’re looking for some recommendations check out these free resources:
- Intro to HTML/CSS: Making webpages
- FreeCodeCamp Dev Path Map
- W3Schools HTML
- W3Schools CSS
Some people loathe W3Schools but it is a great site for beginners. And if you’re willing to go the paid route many people swear by the Treehouse course which offers a free trial to new signups.
I also want to mention the value of preprocessors like Sass and Less. These are like superset languages built on top of CSS which offer more advanced logic for variables, loops, and functions.
If you’re just getting started don’t worry too much about this for now. You need to understand the basics of CSS before you can jump into Sass. But if you want to do web dev work seriously then you’ll eventually need to dive into this area.
I’d personally recommend Sass because I found it a bit easier than Less, plus the community is larger with more support.
Also there are preprocessing languages for HTML but they’re not as widely used. Some options include Haml and Jade.
Haml runs off Ruby while Jade uses Node via NPM. Both of these libraries require some understanding of package managers which is why I consider them more advanced and mostly unnecessary.
But if you want to delve into these preprocessors here are some resources to get you started.
- The Sass and Compass tutorial for absolute beginners
- A Beginner’s Guide to npm — the Node Package Manager
- Using Jade and Grunt to Speed Up HTML Production
- HAML? Jade? Yaml? What are these things?
JavaScript/ES6
The other frontend language most web developers learn is JavaScript. This has been closely tied to web development for decades and it allows developers to create dynamic effects on the page.
With JavaScript you can build dropdown menus, sliding carousels, modal windows, and many other common web interfaces. Advancements in CSS3 do allow devs to make some cool stuff without any JavaScript. But that doesn’t mean JS is a worthless language; far from it.
More websites rely on JavaScript for dynamic features now than ever before. Modern web browsers finally support JS to a point where most users visiting your site will have JavaScript enabled.
The latest version of JavaScript is called ES2015, short for ECMAScript 2015. I don’t want to bog down this post with mundane details, so for all intents and purposes the term “JavaScript” basically means ECMAScript. If you want to learn about the history check out this post.
If you learn the basics of JavaScript then you’ll understand ES2015. The fundamentals are supported in the current version of JS and all future versions.
JavaScript is often the web developer’s very first programming language. Some may argue that it’s not real programming because it operates as a scripting language. But since you can run Node.js on the server it’s now possible to run JavaScript as a frontend+backend language.
JS is very fun but a brand new developer should not even think about Node.js for some time.
Get started with the fundamentals of JavaScript like setting variables, creating loops, functions, and logic operators. This knowledge can be applied to all forms of JavaScript and other programming languages too.
Here are some basic resources to get you started:
- What is JavaScript, really?
- How to Learn JavaScript Properly
- Eloquent JavaScript Online(2nd Edition)
All of these are completely free and should take you through everything needed to help you feel comfortable writing JS code.
In that process you’ll often read about libraries such as jQuery and the very popular TypeScript language.
Both of these are valuable tools to learn, especially as a web developer. But you really shouldn’t dive into them until you feel comfortable building very basic features in JS.
The best way to learn is, like before, creating projects from scratch.
In the process you’ll bump into roadblocks and Google will help you solve them. Thankfully JavaScript can also put out errors for you to Google and reverse-engineer the problem.
If you’re using Chrome check out this post explaining how to output JavaScript code into the Dev Tools console. This way you’ll get specific error messages that tell you which line caused the error. It’ll make debugging a whole lot simpler.
In the course of studying JavaScript and other libraries like jQuery/TypeScript you’ll often have questions that Google can’t answer. If you hit a wall I’d recommend posting your question to online communities for support. Here are some websites I’d recommend for problem solving:
- Stack Overflow
- /r/WebDev
- /r/JavaScript
PHP, Ruby, or Python
The last piece of web development falls into backend development. This is a broad area with lots of different languages, some more popular than others.
Decades ago Perl/CGI was the preferred language for backend development. Nowadays that’s almost nonexistent.
Trends change frequently so it’s important to plan ahead and move with the industry.
Brand new developers will see a lot of talk surrounding PHP. It’s one of the older web programming languages and it was made specifically for web development. Ironically the creator of PHP never wanted it to be a programming language.
But over the years it stuck and grew rapidly. Now projects like WordPress, Joomla, and Magento all rely on PHP to function properly. This means the vast majority of web developers pick up at least a little PHP to apply it when needed.
Two other very popular languages are Ruby and Python. These are fun to learn because they’re programming languages that can be used beyond web projects.
I can’t tell you which language to learn first because each developer should decide for themselves.
If you want to be a frontend dev then you really don’t need to worry about learning any of these. But if you want an easy intro to backend development you should start with PHP. It’ll let you build custom WordPress projects from scratch and you’ll find that most hosting companies support PHP by default.
But all of these languages are completely free and open source. Each language also comes with a detailed framework you can use to build out projects quickly.
PHP has Laravel, Ruby has Rails, and Python has Django. Open source allows all of these projects to flourish and they give developers an easy resource to build new projects from scratch.
The best way to study your preferred language is through practice. Seems like a pattern huh?
Learning to write code is best learned by getting your hands dirty. When you encounter problems you’ll be forced to solve them, and when you solve a problem you learn a little from the process. These little moments add up over time and help shape your development prowess.
If you have no idea where to start but really want to get into backend coding then dive into PHP. You’ll find many free guides and plenty of Q&A solutions on Stack Overflow. Same goes for Ruby and Python, although you may need to get more hands-on when it comes to configuring & practicing on a real web server.
Just get started and start small. Build projects locally and learn the fundamentals. And whenever you get confused remember that Google is your best friend, and confusing roadblocks are often the best teachers.
Structured Query Language(SQL)
Lastly if you’re looking into backend development then SQL is a must-learn language. It powers the majority of database engines like MySQL and PostgreSQL.
The good news is that most DB engines are compatible with all SQL code. So once you learn SQL it should work across any database you encounter.
The most popular database engine for beginners is MySQL. This often comes bundled with hosting plans and it’s the most widely supported engine for popular CMS projects like WordPress.
- W3Schools SQL
- Get Started Learning SQL
- What is the easiest way to get started using databases with real data?
All of these links are completely free and should get you started down the road to SQL competence.
But I should mention that many databases have interfaces like PHPMyAdmin. These tools allow you to run queries without writing any code.
If you want to really develop your SQL knowledge it’ll make you that much more valuable to employers. But even if you just learn the absolute basics you can get by just fine.
Wrapping Up
All the languages mentioned in this guide can make for a powerful full stack developer. But if you want to do basic web development you won’t need to master all of these skills.
Frontend devs can learn HTML+CSS and some JavaScript. Backend devs could learn basic HTML/CSS but really focus their efforts on a backend language+database engine.
There is no right or wrong answer because it all depends on what you want to do. This guide covers all the primary languages for web development so no matter what you choose to learn, you can be confident knowing you’re on the right track.
