Angular Roadmap

0 Comments

The following is a deep dive, designed to familiarize you thoroughly with Angular. It is not the “easy path to just learning ‘enough'” – it aims far higher, combining thorough study of the official docs, regular practice projects, comprehensive exploration of TypeScript, Karma, Jasmine, and Protractor and hands on non-Angular TypeScript practice to ensure a rock solid foundation in everything Angular.

Level 0 – Reference only if you need pre-Angular basics

Course: Introduction to Computer Science – CS50 (If you want more confidence programming)
Articles: How to not f-up your local files with Git part1, part2 and part 3 (You want to be using git, read these to get up to speed.)
Course: Learn to Code HTML & CSS (Intro, to get you started with HTML and CSS)
Course: Learn to Code Advanced HTML & CSS (Additional HTML and CSS instruction)
Course: Getting Sassy with CSS (Dip into Sass, try to hit this before you finish the guide)
Book Series: YDKJS (You need to KNOW JavaScript, not just sorta-know JavaScript, if you haven’t studied these books, do yourself a favor and study them alongside whatever else you might be doing)
Official Docs: ESLint – thoroughly review the User Guide
Official Docs: Axios npm package – thoroughly review, you’ll want this for making API calls

Level 1 – Basics

Study each item thoroughly. Type the code. Understand how it works. Yes, the whole thing.
You NEED to know JavaScript – if you’re shaky on JavaScript, do yourself a favor and hit MDN and study, especially ES6 features

For each project:

Use a git workflow (If you wonder what this is, read the articles in Tier 0)

For at least one project:

Use Angular Material
Use Bootstrap

Level 2 – Beyond basics

Study each item thoroughly. Type the code. Understand how it works. Yes, the whole thing.

For each project:

Use a git workflow
Include at least 20 automated tests

For at least one project:

Use Angular Material
Use Bootstrap

Level 3 – Intermediate

Study each item thoroughly. Type the code. Understand how it works. Yes, the whole thing.

For each project:

Use a git workflow
Include at least 20 automated tests
Utilize Sass
Implement end-to-end testing

For at least one project:

Use Angular Material
Use Bootstrap

Level 4 – Beyond intermediate

Study each item thoroughly. Type the code. Understand how it works. Yes, the whole thing.

For each project:

Use a git workflow
Include at least 20 automated tests
Utilize Sass
Implement end-to-end testing

For at least one project:

Use Angular Material
Use Bootstrap

On two projects of your choice – use no CLI or boilerplate created by someone else. Setup the project from scratch using npm init. Setup your own build process. Include only what you need from npm. Know precisely what everything in the setup is doing because you put it there, on purpose, yourself.

Bonus – advanced

Helpful links

How to not f-up your local files with Git part1, part2 and part 3
surge.sh
Learn to Code HTML & CSS
Learn to Code Advanced HTML & CSS
Getting Sassy with CSS
Programming for the Web with JavaScript
Data Visualization and D3.js
YDKJS
For when you need assets/ideas
Official Docs
1. MDN HTML – for exploring all that HTML has to offer
2. MDN CSS– for exploring all that CSS has to offer
3. MDN JavaScript– for exploring all that JavaScript has to offer
4. Sass – supercharged CSS
5. D3 – for creating awesome graphs and charts
6. Angular – option for creating single page apps on the frontend
7. Karma – venture into testing
8. Jest – venture into testing
9. Webpack – module bundler for use in your build process (so you can minify your HTML/CSS/JavaScript among other things and deliver an optimized build to production)
10. Babel – makes the new JavaScript work on old browsers (or node versions for that matter)
11. Gulp – for automating your workflow
12. ESLint – for helping to keep your code clean
13. Prettier – more help keeping your code clean
14. Travis – continuous deployment (how to trigger a build/deploy whenever you commit your changes via git)

Attribution

Many of the courses listed closely mimic the list from Open Source Society University – Computer Science
Many of the topics selected to augment were inspired by Google Interview University
Many of the projects were inspired by (or are directly taken from) Free Code Camp, The Odin Project and Udacity

Categories: Angular Roadmap

Level 0 – Reference only if you need pre-Angular basics

Level 1 – Basics

For each project:

For at least one project:

Level 2 – Beyond basics

For each project:

For at least one project:

Level 3 – Intermediate

For each project:

For at least one project:

Level 4 – Beyond intermediate

For each project:

For at least one project:

Bonus – advanced

Helpful links

Attribution

Related Articles

Responses