Web Development

Web development is fun!

Like really fun. The more you know how to make something with code the more you enjoy building stuff with it.

To be honest I don't know anybody who hates doing it, and most people really love it. For me it sometimes feels like I’m playing a game or I’m building something with LEGO.

You’ll love it too.

I assume I don’t have to explain what a web developer does too much. Obviously, a web dev makes websites. Those can be anything from static websites with a single purpose of displaying some unchanging information, to complex web applications with servers, databases, APIs and other stuff.

Web development can be divided into two main areas. Front-end and back-end. The purpose of front-end is to take care of the things you see in your browser when you visit a website. There are 3 main parts: HTML, CSS and JavaScript. The text is written with HTML. The design, colors, layout, etc. is made with CSS. JavaScript enables interactivity of a website.

Back-end is the part you can’t see. Back-end creates functionality. When you send an email or submit a post it’s the backend that makes sure your email is sent and your post is saved to a database.

There’s also devOps or system administration which takes care of automation, monitoring systems and running servers where backend code lives. A full-stack means having skills to do both front-end and back-end (sometimes also devOps). I personally don’t do devOps related work, but it could be interesting for someone who is more into servers and back-end.

Because you started doing web applications it doesn’t mean you can’t focus on something else later. You may switch to making iOS and Android apps. Or making games. Regardless of your current preferences, be open-minded and don’t be afraid to try new things outside of your current scope of knowledge.

If you know one programming language then it’s far easier to learn another. This is true with code libraries and tools as well.

I was personally interested in both front-end and back-end web development from the start. Maybe you already know which parts are best suited for you. And maybe you don’t but that’s alright.

But even though you think you’d like to do only front-end, I suggest at least trying to read more about back-end languages or about how servers work. It could give you better understanding of some parts of front-end technology.

I’ve seen people learning web development in different order than what I recommend (which is the order most developers recommend). For example someone started learning web development by learning JavaScript first. I’m not saying you can’t learn it that way, but I think it’ll bring more problems and confusion. As I said previously, it’s important to think about the right order of learning blocks. We want to avoid confusion. We want to streamline our education process as much as possible.

In this section I’ll mention libraries. A library is basically bunch of code put together to serve some functionality so you don’t have to write it yourself.

I won’t go into details too much for each technology explaining what is what. At the end of each part I left you a few links to articles you should read.

Now I’m going to tell you what skills you need to learn. Obviously if you aspire to become a front-end developer you should focus on the relevant parts only for now.

It could differ depending on your preferences, a job or other stuff, but necessary skill sets are following:

Front-end developer: HTML + CSS + JS
Back-end developer: Back-end languages + SQL (+ devOps)
Full-stack developer: HTML + CSS + JS + Back-end languages + SQL (+ devOps)

Keep in mind this is only approximate. If you’re a back-end developer and you know also HTML & CSS, but not JavaScript, then you’re what? Middle-end developer?

It’s better to think about them in terms of what you want to know and what you want to do. Then pick up the skills you need. If working with servers sounds interesting for you, don’t say “but that’s just not for me, I’m a front-end developer”. And even if you can call yourself a full-stack developer it doesn’t mean you have to be exactly great at every skill.

You can see more complex roadmap here.

Also take a look at the list of free resources full of links to free courses, books and tons of other stuff.

1, Basics

So obviously you’ll have to know how internet and computers work. If you already know some basics then that's a good start for you. If you don’t, it'll take a bit longer, but no worries.

Some most important stuff you should read about and understand what they’re for:

Computers; Files; Operating system
Internet; IP address, Domain name, HTTP & HTTPS; Web browser; Server vs. client;
Databases; Data structures

You don’t have to remember every single thing right from the beginning. In the age of Google you can always find out details quickly when you need them. But before you move to learning coding you need to have a good understanding of how this stuff works together.

2, Necessary Software & Tools

As a software developer you’ll work with bunch of different software. To work effectively you’ll have to know them well. They’ll consist mainly from:

Operating system (OS). Windows, Linux, Ubuntu, macOS etc. On your operating system you’ll have to download and install all the applications and packages you need for running your code. If there’s any problem using your chosen programming language on the system you currently use, then you have a few options. Reinstall OS on your current computer, get a second computer, have two OS (dual boot), use virtual machine or try browser-based IDE (see below). In such case the easiest solution for a complete beginner is probably a second computer or browser IDE.
Text editor and IDE. You’ll use text editor for writing code. Text editors made for coding have bunch of useful features like syntax highlighting, code aligning and many more. Integrated Development Environment (IDE) is software consisting of text editor plus more powerful tools. Those might be tools for debugging, automation processes or built-in version control (see below). You can install IDE on your OS or you can use web based version.
Text editors
IDE
Command line interface (CLI). Also called terminal. There you’ll write instructions for your computer. For example you’ll want to go to a certain directory, find some file and run a code inside of the file. Or you’ll generate new files. It might feel weird to work with it at the beginning, but you’ll soon find out it’s a very handy tool.
CLI
Version control and Git. Version control is a software that records changes to your files. You can then recall who made them, what was changed, and when they were made. Git is a popular example of such version control.
Version control and Git are related to storing code online. Why should you store your code online? There are multiple reasons for that. It serves as a backup in the case something happen to your computer. You can make your code public so others could see it to and give you a review. Or you can make it available for other programs and websites that could use it in various ways. Most popular online storage for code is Github.
Git

3, HTML & CSS

HTML (HyperText Markup Language) is used to structure a web page and its content. Although it has a language in its name, it’s not a programming language. You’ll use HTML code to display some text or information in a certain format. For example in paragraphs, headings, tables etc. Or you can display images.

CSS (Cascading Style Sheets) is used to style your webpage. CSS describes visual aspects of HTML elements. With CSS you can define color, size, position of text and many other attributes.

To make your life easier you can use some of many CSS libraries like Bootstrap or Foundation. You should also read about responsive design, user interface (UI) and user experience (UX).

4, JavaScript (JS)

JavaScript is a programming language created specifically to be used by a browser. It enables more complex functionality than just showing static text. For example it’s used to display real time notifications on Facebook or make an interactive Google Maps.

Although it’s the only language option for doing front-end, it can be also used for back-end (Node.js).

Later once you'll be more comfortable with it you should learn some JavaScript libraries.

JQuery is a good start and it’s still widely used. But in recent years there’s ever growing user base of JS libraries and frameworks like Ember, Angular, React, Vue and others.

New libraries are made quite often and their popularity changes. If you want to do a lot of stuff with JS during your career than you’ll eventually have to learn some of them. Keep in mind having solid understanding of JS is essential for learning more advanced JS libraries. You won’t help yourself skipping it.

If you’re planning doing full-stack you don’t have to necessarily learn JavaScript before learning a back-end language. I actually didn’t. But I recommend learning it first anyway.

5, Backend language

If JavaScript is an only option for front-end then backend language is a language of choice.

Some of the most used are: Java (has nothing to do with JavaScript), PHP, Python, Ruby, GO, C, C++, Scala, but there are many others. It seems confusing which one to choose, I know. We’ll talk about it in a minute.

Some are used almost exclusively for web development, some have a bigger scope. Ruby is mainly used in web development (thanks to Ruby on Rails). Python is more broadly used and has dominance in machine learning. For mobile apps you’d use Swift or Java.

Every language has some advantages and disadvantages. Some languages are designed with certain ideas that could be different from other languages. That’s why learning a language isn’t just about learning the syntax.

Understand the concepts and culture of the language. For example Ruby was created to make a programmer happier. But it isn’t the fastest language, so if a speed is a priority for you then there are better options.

With back-end languages you'll probably work with frameworks. What is a framework? And how it’s different from a library?

Library is a collection of functions. It’s just a file with some code. Library gives you code and you decide in what way and where it’ll be used. So you can take a library function for playing videos and use it in your app. With framework it a little bit different.

Framework is a quite vague term. But for the simplicity think about it in this way. You don’t have to worry about how some parts of your application communicate with each other. You give code to various places of the framework, but the framework sets patterns and conventions how that code is supposed to be used.

When you make a new web application with a framework you already have a skeleton. You just need to add missing parts to have a full body.

A few examples of programming languages using frameworks:

Ruby - Ruby on Rails
Python - Django
PHP - Laravel

That’s why if you’re choosing a programming language for web development you’re not choosing only the language itself. You’re choosing framework. You’re choosing libraries for particular language made by other developers. You’re choosing community and culture.

6, SQL

If you want to make a web application that’ll enable people to create some information and keep it for later use, you’ll have to store that information in a database. All your tweets and all your pictures on Instagram are records stored in databases.

For communicating with database you’ll have to learn a language made specifically for that purpose. It’s called SQL (Structured Query Language). There are specific commands for searching, creating, updating and deleting databases and records.

To make using SQL more advanced you’ll use relational database management systems like PostgreSQL and MYSQL.

Choosing the Right Technology

Very likely you’ll get a bit unsure what technology or language to choose. Of course you want to find the one that has prosperous future and growing demand from employers.

Scrolling forum posts with battles over the best language doesn’t have to help. So many battles have been fought to find the best language/library/framework/tool.

When I was an absolute beginner I thought programmers are super rational people. Well. Soon I found out they can be sometimes very biased. Two groups of programmers can tell you the other language is garbage and won’t be even used in 5 years. And after 5 years both languages grow their user base and keep improving.

First understand a programming language isn’t a religious belief. It’s a tool. It’s a hammer. Using it will have some pros and cons. First decide what you want to make.

Only after that find a tool best suited for the job. Not the newest tool. Not only because it’s popular right now.

If you’re more excited about your tools than the stuff you’re going to make, than find better stuff to make.

Don’t be too worried about what language or technology will make you more money for now. Most front-end and back-end developers are paid pretty well. If you do what you love, you’ll get better far quicker. Which means your salary will grow faster too.

Think Like a Programmer

If you haven’t started to write code yet, you maybe won’t understand some stuff in this part. That’s alright. Give it a try and if you don’t understand anything then just skip it. You can always read it later. But I highly recommend getting back to this section later because it’s quite essential.

Knowing how to write code is obviously a necessity for a programmer. What many newcomers don’t realize at the beginning is you have to think in a certain way in order to be a real professional. Code is just a way how to make something happen. You can write terrible code that works, but it might be confusing and it’s a nightmare to maintain.

What really makes you a programmer is thinking like one. You have to adopt certain practices.

Some basic rules you should keep in mind:

Keep your code clean and simple. How? Simplicity comes form reduction. Remove any unnecessary stuff. Remove all libraries you don’t use. Make your code shorter. Can you compress this 7 line method into 3 lines?
There’s this concept called DRY – Don’t Repeat Yourself. It means you shouldn’t write the same code multiple times if possible. Write it once, and reuse it when needed.
Another slang is called spaghetti code. It’s used to describe a code written with multiple bad practices. It’s hard to read, unorganized, difficult to maintain, has parts that belongs elsewhere or has no clear structure.
Keep your code readable. If you get back to a piece of code you wrote before and can’t understand it, your code is bad. But it’s even worse for other programmers who’ll have to work with your code too. Even if you’ll work only by yourself, even if you understand your code right now, act like you write code for others.
- Comments: Comments explain certain information for humans and help understand more complex code quickly. Comments have no value for computers running your code. Write a comment only if you really need to explain something not obvious. Before you write a comment, ask yourself if you can explain your comment with the code itself.
- Variables: A variable holds a value and can be reused in various parts of your code. From the name of a variable I have to understand what kind of value it holds. A variable for sum of payments shouldn’t be called "x", but something like "payment_sum".
Use well maintained dependencies. You’ll use lots of various libraries. They’re super handy. For example somebody wrote a library for uploading files to server. So you don’t have to write all the code for the functionality you need. You can just download the library and check its documentation. But every library you decide to use becomes also your code. If it’s buggy then your code becomes buggy. Don’t complain then, it was your decision to use it. So before you decide to use a library, first check how often it’s updated and how are the creators/maintainers responding to issues.
Write your code with performance in mind. In other words make everything as fast and streamlined as possible. Loading a website, taking data from database, running your code and so on.
Keep your codebase tested. Why to event bother with testing? You write some code, try it and you can see it works. Yes, but once your code will get more and more complex and interconnected, it’ll be more and more prone for bugs and errors. Are you sure you’ll want to try every bit of your code manually every time you make some changes? It would take hours, days or even weeks. That’s why we have automated tests. Write it once and let a computer find out if everything works. Tests are investments. It takes some time to write them, but they’ll make your life and work easier later. But don’t be obsessed with testing. Testing is a tool to serve you. Think about tests in terms of what is necessary, what is nice to have and what is useless to test.
Think about what user would do. Users don’t care about how your code is written. Why should they? If they don’t understand how your website works, it’s your fault. The best way how to avoid this is to not making them even think what to do. It should be obvious.
Assume it’s your fault. You’ll be debugging your code often. Sometimes you won’t understand why it’s not working. Before you start blaming your framework, library or colleagues, it helps to first assume you made a mistake. That makes you think more about where you could make something wrong.

Googling

When you’ll be stuck or you’ll need to research something – just Google it. It’s not cheating. It’s not a lazy work. This is how it’s being done. But it absolutely doesn’t mean you should just mindlessly copy-paste the first answer you’ll find.

You need to understand the code you want to use. You need to know if and how it applies to your problem. And if it does, it may need some customization to fit your code properly. Take only relevant parts. Think about the right names for functions and variables. Make it simpler, shorter and more readable.

Most of your Google suggestions will probably lead to Stackoverflow.

AI & ChatGPT

AI and ChatGPT can be super helpful for learning web development. They offer a cool way to learn at your own pace and get help whenever you need it. With AI, you can find lessons and tips that match your learning style. ChatGPT acts like a digital buddy, answering your questions and explaining things in a way that makes sense. It's like having a tutor right at your fingertips! Plus, AI can look at your code, spot mistakes, and suggest ways to make it better.

You can try ChatGPT here here.

Free resources