Motivation and Background

My brother has been developing an interest in programming recently. Data science, artificial intelligence, web development, ..., you know, all the cool stuff. Eventually, he built up enough motivation to start learning web development and asked me how he might get started. I'm no expert in web development (I'm more of a data science guy), but as a former teacher, I was keen on putting together a beginner-friendly "curriculum" of sorts.

He had touched HTML and maybe a programming language before. But that was close to two decades ago, and my brother hadn't really mastered it then nor has he done any programming since. So I can treat him as a complete beginner. There were a few things I had to keep in mind:

1. Time: My brother is working full time, and has to take care of his baby. I have to take a minimalistic approach. Harvard's CS50 on edX.org is amazing - they take complete beginners through the basics of computer science and include a web development course using Python. But it does go through a lot using the C programming language before they get to the web stuff. Besides, unless you sign up, you often cannot follow along what they code in their lectures because they use CS50 specific tools sometimes. I had to mix and match different resources that fit well together.
2. Convenience: My brother is keen to study in between his busy work/life. I want it to be browser-based as long as possible. Installing tools and setting up environments can be tricky for beginners, and his work computer runs Windows while his home computer is a Mac. It is better for beginners to get started on the code straight away, as trying to mess with tools can be daunting and off-putting.
3. Pedagogy: I don't want to sound too much like an ex-teacher, but there are progressions that make more sense in terms of learning. Less complex ideas should be introduced first before more complex ideas are introduced. Sounds obvious, but some courses out there are focussed on the job-readiness, and therefore try to get to the most popular tools as soon as possible. For example, out of the front-end SPA technologies, Svelte appears to be the easiest choice to get started, but most courses offer React.
4. Documentation: There is a lot to be said about learning from video and learning from reading. I won't go into it here, but suffice it to say, that at some point, all developers need to learn how to read the documentation. But not all documentation is created equally. Following the docs for FastAPI is far easier than following those of Flask, although there are far more tutorials made about Flask. The choices I present needed to consider how clear something was explained through a mixture of video and documents.
5. Language: Obvious necessities are HTML, CSS, JavaScript, and SQL. That, in theory, should be enough, with Node.js and Express.js pretty much covering the backend part of web development. But my brother initially was and still is, interested in data science as well. So I thought Python would be a good thing to start to get used to now.

Oh, and I wanted to collect completely FREE resources.

The result of all these considerations was a curriculum that I have named "Web Dev for Bro". If you are in a similar situation, getting started in Web Development without any programming experience, and don't have much time, you may find this useful too. Here it is:

1 Introduction to Programming

1.1 HTML/CSS

Just do the basic tutorials. No need to do all of them.

HTML Tutorial

CSS Tutorial

1.2 JavaScript

Just do the basic tutorials. No need to do all of them.

JavaScript Tutorial

1.3 Python

Just do the basic tutorials. No need to do all of them.

Python Tutorial

1.4 SQL

Just to the basic tutorials and the SQL Database tutorials.

SQL Tutorial

2 Introduction to Web Development

2.1 Concepts

Only need to watch. No need to follow along. Just try to get used to the concepts at this point.

CS50 2019 - Web Track - YouTube

2.2 Tools and Setup

These tutorials are more about having the necessary tools to be a JavaScript and Python developer. Follow along with the installation and familiarise yourself with the tools. You don't need to be fully comfortable with these tools yet. Simply installing these tools is enough at this point. All of the subsequent courses will provide some guidance on how to use these tools.

VS Code

Visual Studio Code Intro & Setup

JavaScript and npm

NPM Crash Course

Python and pipenv

There are many ways of managing the environment for python projects. Pipenv should be the "best", but some of the tutorials, later on, will use virtualenv. Both are fine, and those tutorials will show you how to use virtualenv. On your own projects, try to use pipenv.

Pipenv Crash Course

Git/GitHub

Git & GitHub Crash Course For Beginners

SQLite and PostgreSQL

There are many databases. Some of the most popular are PostgreSQL, MySQL, and MongoDB. For most cases, PostgreSQL is the best option. All of these databases require a database "server". This can be cumbersome, so developers often use SQLite during development and then switch over to PostgreSQL during production. So it is good to know a bit of both. The SQL language is mostly the same so there is nothing "new" to learn from what was covered in W3School, but here are some tutorials on how to work with SQLite and PostgreSQL.

Sqlite 3 Python Tutorial

PostgreSQL - Installation & Overview

2.3 Practice

Follow along with this introductory tutorial. There will be a concept that hasn't been introduced before called ORM, which will use a tool called SQLAlchemy. Don't freak out, just follow along as an introduction for now. It will be covered in the future.

Learn Flask for Python - Full Tutorial

🍎 By this point, you should have a basic idea of how to make small and simple web apps.

3 Web Development Fundamentals

3.1 Concepts

Things about to get more advanced from here on. Watch the following video lectures. There is no need to follow along, but you may need to re-watch some lectures a couple of times to really absorb the concepts.

CS50's Web Programming with Python and JavaScript - YouTube

3.2 Practice

Follow along the following tutorials to get some practice of backend and frontend web development. Some of these tutorials may be similar, but it is worth doing all of them for practice. Each tutorial has a slightly different focus, so it is well worth going through all of them. Note that you'll be moving towards separating the frontend from the backend. The backend provides the API and the frontend consumes the API.

Backend

Follow along with this tutorial to built a full web app using Flask.

Python Flask Tutorial for Beginners - Full Course in 3 hours (2020)

While it is possible to build full apps using Flask and its templates, modern apps often separate the backend from the frontend. This means that Flask will only be used to provide an API that the frontend part of the app can use.

One tool that can help you test these APIs as you build the backend before building the frontend is called Postman. As with other tool videos, you don't need to remember everything yet, but install postman and familiarise yourself.

Postman API Crash Course for Beginners [2020] - Learn Postman in 1 hour

Now follow along with this tutorial to build an API.

REST API With Flask & SQL Alchemy

Frontend

There are many frontend frameworks, one of the easiest to get started is Svelte. Follow along with this tutorial to get a feel for it.

Svelte 3 - Quickstart Tutorial (Getting Started With Svelte.js)

You will feel like you need to go back and revise JavaScript. This is perfectly normal and there is no harm in going back to basics as you need. But just to show how amazingly simple Svelte will be once you get it, here is a 3 minute tutorial that shows you how to build a todo app in 15 lines of code.

Intro to Svelte - Todo app in 3 minutes and 15 lines of code

And here is a longer one that you can follow along with to build a to do app with a bit more complexity. Also, towards the end of this tutorial there is an introduction to how to connect such frontend apps to the backend API.

Svelte v3 - Basics - Todo App

🔥 By this point, you should have a pretty good idea of how to make simple web apps.

4 Master Web Development

You are already ready to start building hobby web apps. To become better, you need to become pretty good with at least one frontend framework (you've met Svelte) and at least one backend framework (you've met Flask and Django). In addition, you will need to get comfortable with deploying web apps online (Heroku, for example). Underlying all this is being good at Python and JavaScript.

4.1 Learn a Frontend "Framework"

Many choices here:

• Svelte
• Vue
• Angular
• React

Pick one and master it. Svelte is the most elegant and easiest to learn. It is also the best introduction to frontend technologies. The official documentation has a great tutorial.

Svelte

To get a job in frontend development, you need to know the popular tools. The next thing I would learn would be Vue. This is optional, and I would try and make a few web apps using Svelte first.

4.2 Learn a Backend "Framework"

Many choices here too:

• Flask
• Django
• FastAPI
• Express

As with the frontend case, pick one and master it. FastAPI is the most modern python framework. The official documentation has a great tutorial. In fact, FastAPI has the best official tutorial that covers a lot of concepts including things like security. However, it does not have many video tutorials on youtube or anywhere else yet. The framework design is very similar to Flask, so the knowledge should be transferrable.

FastAPI

In the Python world, the most popular frameworks are Flask and Django. But the backend development market is fragmented into Python, JavaScript, Ruby, PHP, Java Scala, Go, Rust, and many more languages. I would stick with Python and JavaScript. For JavaScript, Express is the most popular backend framework. The next thing I would learn is Express. Again, this is optional, and I would try and make a few web apps using FastAPI first.

4.3 Figure out how to deploy web apps

There are many options here and things keep changing all the time. Some starting points are:

• Docker
• Heroku
• Firebase

Really, these things are great. Seriously great. There should be plenty of tutorials out there on how to use these tools. Some Youtube channels below will have a lot of tutorials on these.

😎 By this point, you're good to go bro. You've got this.

5 Continue Learning

Youtube

• Traversy Media
• Academind
• The Net Ninja
• Fireship
• Pretty Printed
• Code Drip
• Web Dev Simplified
• Tech with Tim
• Corey Schafer
• Svelte Master

Udemy

They do massive discounts fairly often. So when there is a discount, purchase some courses that you are interested in. Svelte, Vue, Flask, Express, Heroku, Docker, Firebase, Authentication, Payment, etc.