Welcome to an introduction to modern web development crash course series. I'm really excited to teach you a bit about how to become a web developer. I'm assuming you know absolutely nothing about writing code. I do assume that you have a basic grasp of how to operate your computer, how to browse the Internet, how to operate your operating system, how to use a keyboard and mouse, etc.

The aim of this series is not to take you from "beginner" to "expert" but to take you from "beginner" to "comfortable". From there you should be able to start making your way. You should feel at home whether you are a student learning web development, a teacher looking for class materials, a hobbyist, or someone who just wants to understand more about how web technologies work.

Contrary to what many people believe, you do not have to be a wizard with math to write code. The two subjects share some overlap but also are quite different. Many artists, lawyers, historians, linguists, and others have great success learning how to code. Don't let those preconceived notions hold you back at all.

Also keep in mind that this is hard. Learining how to code is hard. You have to learn a lot of small pieces of information to be able to make sense of the larger picture. It's easy to feel discouraged. Keep your head up and keep trying. Walk away from the problem and come back later.

Never feel afraid to Google anything, Every programmer you know, from the top person in the field to the newest student is Googling things constantly. This isn't cheating, It's a skill. It's a requirement.

There is so much information coming at you that cannot possibly remember it all. Copy and paste code. Look at Stack Overflow. You get better by repeatedly exposing yourself to information. Each time a bit more will sink in.

You will learn everything you need to know to create your own website, from back to front. In order to do this, you will have to learn several "languages". I put languages in quotes because not all of these are technically languages but it's a good approximation for now.

For now we're calling them languages. The languages you are going to learn are HTML, CSS, JavaScript and Python. We will also be using some other tools like the command line and git but we'll get there too.

🔹 HTML - Structuring the web

HTML is the language that we use to structure the different parts of our content and define what their meaning or purpose is.

🔹 CSS - Styling the web

CSS is the language that we can use to style and layout our web content, as well as adding behavior like animation.

🔹 JavaScript - Dynamic client-side scripting

JavaScript is the scripting language used to add dynamic functionality to web pages.

🔹 Python - Server-side website programming

Python is an interpreted, high-level, general-purpose programming language

Even if though we will be concentrating on client-side (Frontend) web development, it is still useful to know how servers and server-side (Backend) code features work. This series will provide a general introduction to how the server-side works and show you how to build up a server-side app using popular python framework : Django

Below you find a set of charts demonstrating the paths that you can take and the technologies that you would want to adopt in order to become a frontend, backend developer.

Introduction

Frontend Roadmap

The front end of a website is the part that users interact with. Everything that you see when you're nevigating around the Internet, from fonts and colors to dropdown menus and sliders, is a combo of HTML, CSS and JavaScript being controlled by your computer's browser.

Backend Roadmap

The back end of a website consists of a server, an application, and a database. A back-end developer builds and maintains the technology that powers those components which, together, enable the user-facing side of the website to even exist in the first place.

Above images are taken from kamranahmedse/developer-roadmap github repository.

Before we get started, we need to set you up with all the necessary tools you're going to need to get up and going.

Every developer has very strong opinions about their tools and will tell you that is some reason you have to use their tool. Don't listen to them.

Find what works for you. If you find yourself fighting your tools more than they're helping you, consider trying something else.

Keep an open mind. What's shiny or popular is not necessarily going to work for you. Take time to invest in making your tools work the best for you. Small wins amount to huge boosts in productivity in the long term.

Tools you need to do simple web development and how to install them properly.

🔸 A computer

Maybe that sound obvious to some people, but some of you are reading this article on your phone. For serious web development, it's better to invest in a desktop or laptop computer running Windows, macOS or Linux.

🔸 The Browser

You may not be yet aware but your browser has a myriad of developer tools built into it that help you understand your code. helps you find bugs, and helps you experiment directly on your running website.

All of the modern browsers are great and you can use any one of them to develop sites. I recommend you pick one and really get to know its developers tools.

My Recommendation : Google Chrome

Download Chrome

I've been a big fan of Chrome and It's dev tools for a long time and it just keeps getting better. The developer tools are amazing and the team behind them are amazing too.

Currently, the most-used browsers are Firefox, Chrome, Opera, Safari, Internet Explorer and Microsoft Edge

🔸 The Editor

There are so many strongly-held opinions that it's hard to tell which one is going to work for you. There are many flavours and it all depends on what you want out of your editor.

My Recommendation : Visual Studio Code

Download Visual Studio Code

I've been using VSCode since I was at college. It's a fantastic editor that has lot of convenient features and helpers. two other editors that are similar in their offering are Sublime Text 3 and Atom. Both are great and both are free to download.

🔸 The Terminal

You're going to learn to use a terminal during this crash course. It's less scary than it seems. For the terminal emulator, it doesn't matter a whole lot which one you use. If this is confusing to you, it's okay. It's a minor detail that you can come back to later.

Don't try to understand every piece all at once. There are times where it's okay to just trust that something works and come back later to understand how.

Lastly, this isn't a get-rich-quick scheme. Learning to code is hard and requires a lot of hard work. While entry-level jobs are out there and you can get them with months of work. I guarantee you'll have to work hard for them.

Stay tuned for next article that will begin our journey to learn modern web development with basics of HTML.