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).
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:
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.
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?
JS is very fun but a brand new developer should not even think about Node.js for some time.
Here are some basic resources to get you started:
All of these are completely free and should take you through everything needed to help you feel comfortable writing JS code.
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.
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.
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.
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.
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.