Best Resources for Fullstack Development
When it comes to full-stack development, learning online is like hiking through a jungle to find a four-leaf clover. You know that the perfect one’s somewhere inside – but finding it is a pain.
With so many paid and free courses available, each recommending different technologies, languages, frameworks, and stacks, it is absolutely daunting to find the correct starting point.
Even while you search that cloverleaf, a good map is a must-have! So, in this article, we’ll walk you through some essential courses to help you get up and running with full-stack development. Even as you pick a specialization, you will need a rudimentary knowledge of the overall set of languages, so keep an open mind.
Before diving into the list of resources, here is a list of some important tools, technologies, and frameworks you should keep in your mind throughout the article:
For front-end:
- HTML & CSS
- Responsive Designs
- JavaScript
- Git
Once you are a master of the topics above (you really know them inside out), then continue your learning path with these:
Advanced front-end development:
- CSS Preprocessors (Less, Sass, PostCSS)
- Frameworks like ReactJS, AngularJS, and Angular 2
- Task Runners
Server-side development:
- Database management
- NodeJS (Backend Development)
- Python (With Flask or Django for Backend Development)
With that said, let’s dive into the courses you can take to familiarize yourself with (and ace) the above-listed technologies and more.
Front-End Development
HTML
HTML is a markup language (which is something purists hate to see lumped with a ‘programming language’) that decides the structure of your frontend layout. Basic knowledge of HTML is a must for any developer. So, for that, here’s a list of free courses for you to go through. These won’t take a lot of time, and should get you fairly comfortable with the markup language.
Note that you don’t need to go through ALL of these courses. Skim through a few, find your comfort level (based on your requirements), and pick a course that is structured in a way that best suits your learning style.
Basic courses:
- Learn HTML By Codecademy
- HTML5 & CSS3 Fundamentals: Development for Absolute Beginners By Microsoft
- HTML Fundamentals By Solo Learn
- HTML5 & CSS Fundamentals By edX
Intermediate:
- HTML Modules By MDN
- HTML5 Cheatsheet
The way to pick a course depends
CSS
The HTML courses will teach you how to create a basic web page, but to modify styling like fonts, font sizes and weights, backgrounds, colours, shadows, and more – you’ll need CSS.
For that, here are some courses you can go through. Again, you don’t need to go through all these courses. Find your comfort zone and expand it:
Basics:
- Learn CSS By Codecademy
- Introduction to CSS By MDN
- The Complete CSS3 Tutorial
- How to Code in HTML5 & CSS3
To be fair, you can style your HTML using ‘inline styling’ – a “frowned-upon” practice that most developers cringe at, but still use anyway. Doing this is similar to drinking soda with a spoon (i.e. time consuming and your regret is proportional to the size of code), so avoiding it is highly recommended.
Intermediate:
Responsive Designs
Once you’re done with these, you can take a step further and explore the SASS-y world of CSS preprocessors. Some resources for that:
- Learn Sass Tutorial By Codecademy
- Sass Basics
- Learn Less
- Learn Less in 10 minutes
- Stylus
- Introduction to PostCSS
- PostCSS — A Comprehensive Introduction By Smashing Magazine
JavaScript
Time to get serious! JavaScript definitely requires more time and dedication than HTML and CSS. As a ‘true’ programming language, JS will also give you a first impression of what you can expect from backend development.
One crucial piece of advice at this point is that you SHOULD NOT start learning JS frameworks like Angular, React, etc., until you are at least 90% comfortable with Vanilla JS (and jQuery, to make JS easier on you). With that in mind, the courses listed below are some of the best resources for learning Vanilla JS and getting acquainted with the syntax and working of this language.
Basics:
- JavaScript Tutorial By Solo Learn
- JavaScript Tutorial By Code School
- JavaScript Tutorial By LearnJS
- Learn JavaScript By Codecademy
- JavaScript Fundamentals By Rithm School
Intermediate:
- JavaScript (The Right Way)
- Intermediate JavaScript Part 1 By Rithm School
- Intermediate JavaScript Part 2 By Rithm School
- Object-Oriented JavaScript by HackReactor & Udacity
- Learn JavaScript By MDN
- Intro to jQuery by Udacity
- Intro to jQuery by edX
Advanced:
- Advanced JavaScript 1 By Rithm School
- Advanced JavaScript 2 By Rithm School
Books:
- Eloquent JS — Free JavaScript Ebook
- You don’t know JS — Free, hosted on GitHub
- Learning js Design patterns — Reusable solutions to commonly occurring problems
Unlike HTML and CSS, JavaScript demands more time and patience. As a result, it is recommended you do a couple of projects while learning the language. Not only will it give you a practical perspective of things, it’ll also help you test the knowledge you’ve acquired by going through the courses. Here are a couple of most recommended JavaScript projects that you can follow:
Once, and only once, you’re comfortable with vanilla JavaScript, it’s time to spice things up a bit and learn JavaScript frameworks to make your life easy.
If you’ve understood JavaScript properly, you’ll call it a language meant to make websites functional. JavaScript frameworks make things simpler and provide more options to web developers. Three of the most recommended front-end frameworks are Angular, Angular 2 (which is very different from Angular), and React. You can choose to learn either one of the three, or all – depending on what you’re planning to build. Then, you’ll also need to acquaint yourself with Task Runners.
Here are some of the best resources for both frameworks and task runners:
ReactJS
- Rithm School React Fundamentals
- Rithm School Intermediate React
- Tutorial By Official React: Intro To React
AngularJS and Angular 2
- Learn AngularJS 1.X
- Learn Angular 1.x with free interactive lessons
- A Better Way to Learn AngularJS
- A Better Way to Learn Angular 2
- AngularJS 3
Task Runners
- Automate Your Tasks Easily with Gulp.js
- Grunt Tutorial
- Learn Webpack in 15 Minutes
- How to use Webpack with React: an in-depth tutorial
- Webpack Tutorials and Courses
Here’s a quick cheat code – if you’re looking to learn everything regarding frontend development, including a fair bit of integration with the server-side, a fantastic and completely free solution is https://www.freecodecamp.org/learn (We’re not affiliated with them in any way, but it’s hard not to be impressed).
Back-End Development
Once you’ve familiarized yourself with front-end development, you can now look at the back side of the coin, i.e., backend development. Backend development deals with working with the server-side of the application, bringing data to front-end, and managing databases. For that, here are some languages and frameworks that you should explore:
NodeJS
Node.js is an open-source, cross-platform JavaScript run-time environment that executes JavaScript code server-side. Since its inception, it has taken the world by storm (because, as we’ve said before, the internet is practically built on JS)
Here’s a list of resources on learning NodeJS:
Basics:
- Why the Hell Would You Use Node.js
- Node JS Tutorial Video For Beginners by The Net Ninja
- Node JS Tutorial By Node School
- Node & Express.js Fundamentals By Rithm School
- Intermediate Node and Express.js By Rithm School
- 10 Best Practices for Writing Node.js REST APIs
- Redis + Node.js: Introduction to Caching
Docs:
There are other languages for back-end development including but not limited to Python, Ruby, PHP, and Java. Some courses for backend development using Python include:
Basics:
- Learn Python By Codecademy
- Python for Beginners
Advanced:
- Rithm School Intermediate Flask
- Getting started with Django
The above-mentioned courses will have you covered in terms of both client-side as well as server-side. But there’s one last thing that remains – database management. For that, you need to acquaint yourself with various databases.
Despite sounding just like storage tools, different databases have their own nuances – and picking the right one depends largely on the kind of data you want to store. Some things to think about are:
- Are all my database items related to each other?
- Are these values structured or unstructured
- What kind of functions do I need to perform on them?
- Do I need to store multimedia items too?
Here are some important resources to help you dive deeper into database management:
- SQL vs NoSQL
- Intro to Relational Databases — SQL, DB-API, and More!
- MongoDB University — Numerous classes on learning MongoDB
- PostgreSQL Tutorial
- PostgreSQL Exercises
- Try Redis
- Redis Tutorial
In conclusion…
Phew! That was quite a long list of resources. But don’t you worry, once you’ve given each a brief look and decided what your requirements are, you’ll have a much clearer picture of what solutions make sense for you, and which ones to put off for later.
If you think there are some other must-haves for full-stack development, drop us a comment below and we’ll add it to the list!