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:
- 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.
- 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.
- 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.
- 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.
- 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.
1.2 JavaScript
Just do the basic tutorials. No need to do all of them.
1.3 Python
Just do the basic tutorials. No need to do all of them.
1.4 SQL
Just to the basic tutorials and the SQL Database tutorials.
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.
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
JavaScript and npm
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.
Git/GitHub
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.
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.
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.
๐ฅ 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.
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.
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.
Top comments (6)
I just want to add a YouTube channel I was so happy about, The Coding Train. I want to personally thank that guy for his way of making things simpler and he's hell of a genius.
And not to forget, Pluralsight also is giving this month all it's courses for free which is also an exciting platform. ๐
Thanks! Yeah, I'm also checking out pluralsight this month.
Great work, Min, and a very comprehensive curriculum -- I think it meets the goals you set out for it admirably well. Do you think there's a place for a "Software Engineering fundamentals" course or tutorial among all of the platform tech that's spelled out here? (btw, I don't have a specific YT channel or online tutorial to recommend for this -- I've looked for one in the past but never found anything well-suited. Something like "Uncle Bob" Martin for beginners... alas, it's nowhere in sight)
Thanks!
Haven't really looked into it. But for such heavy-duty stuff I'd turn to edX, Coursera, and maybe Udacity, though they'd come at a small cost. I would also look at a selection of university websites to see what a typical software engineering degree covers to compare with what is available via MOOCs.
Thank you for posting. I am interested in both data and web development so this is an awesome path. Glad to see someone else interested in data and web development.
Dylan isreal on YouTube and udemy is my guru