FRONTEND LEARNING PATH

LEVEL 1: Beginner (About a month to complete)

● Basic HTML
○ https://www.codecademy.com/learn/learn-html
● Basic CSS
○ https://www.codecademy.com/learn/learn-css
● Build a basic website
○ https://www.codecademy.com/learn/make-a-website
● Basic Javascript
○ https://www.udemy.com/javascriptfundamentals/
○ https://www.codecademy.com/learn/introduction-to-javascript
● Javascript on the Web (DOM)
○ https://developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model/I
ntroduction
○ https://www.khanacademy.org/computing/computer-programming/html-css-js
● jQuery Tutorial
○ https://www.codecademy.com/learn/learn-jquery
● How Does The Browser & Internet work (including HTTP, DNS)?
○ https://dev.opera.com/articles/http-basic-introduction/
○ https://developer.mozilla.org/en-US/docs/Learn/Common_questions/Pages_si
tes_servers_and_search_engines
○ https://developer.mozilla.org/en-US/docs/Learn/Common_questions/How_doe
s_the_Internet_work
○ https://developer.mozilla.org/en-US/docs/Learn/Common_questions/What_is_
a_domain_name
○ https://cloudacademy.com/blog/how-dns-works/
● HTTP Status Codes:
○ https://www.smartlabsoftware.com/ref/http-status-codes.htm
○ https://www.tutorialspoint.com/http/http_status_codes.htm
○ https://egghead.io/courses/debug-http-with-chrome-devtools-network-panel
LEVEL 2: Intermediate (About 2 months to complete)

● HTML5
○ https://html5andcss3.org/html5history.php
○ https://www.tutorialrepublic.com/html-tutorial/html5-new-input-types.php
● CSS Preprocessors (Sass)
○ https://htmlmag.com/article/an-introduction-to-css-preprocessors-sass-less-st
ylus
○ https://www.codecademy.com/learn/learn-sass
● CSS3
○ https://www.tutorialrepublic.com/css-tutorial/css3-background.php
● CSS Cascading & Specificity
○ https://developer.mozilla.org/en-US/docs/Learn/CSS/Introduction_to_CSS/Ca
scade_and_inheritance
○ https://developer.mozilla.org/en-US/docs/Web/CSS/Cascade
○ https://www.smashingmagazine.com/2007/07/css-specificity-things-you-shoul
d-know/
○ https://css-tricks.com/specifics-on-css-specificity/
● CSS Architectures
○ BEM Naming Convention
■ https://csswizardry.com/2015/08/bemit-taking-the-bem-naming-conven
tion-a-step-further/
○ ITCSS Architecture
■ https://www.hongkiat.com/blog/inverted-triangle-css-web-development
/
■ https://www.silverstripe.org/blog/better-css-putting-it-together-with-ato
mic-itcss-and-bem/
○ PROJECT: Build a sample website with SASS using BEM & ITCSS
● CSS Tips & Tricks
○ Box Model
■ https://www.w3schools.com/css/css_boxmodel.asp
■ https://developer.mozilla.org/en-US/docs/Learn/CSS/Introduction_to_
CSS/Box_model
○ Positioning
■ https://css-tricks.com/almanac/properties/p/position/
■ https://css-tricks.com/absolute-relative-fixed-positioining-how-do-they-
differ/
○ Floating
■ https://css-tricks.com/all-about-floats/
■ https://www.smashingmagazine.com/2009/10/the-mystery-of-css-float-
property/
○ Z-index
■ https://css-tricks.com/almanac/properties/z/z-index/
■ https://medium.freecodecamp.org/z-index-explained-how-to-stack-ele
ments-using-css-7c5aa0f179b3
○ Different Stylesheets
 ■ https://www.hostinger.in/tutorials/difference-between-inline-external-an
d-internal-css
○ Pseudo-Classes & Pseudo-Elements
■ https://developer.mozilla.org/en-US/docs/Learn/CSS/Introduction_to_
CSS/Pseudo-classes_and_pseudo-elements
○ CSS Shapes
■ https://www.w3schools.com/howto/howto_css_shapes.asp
■ https://css-tricks.com/the-shapes-of-css/
○ PRACTICE: Coding a few CSS shapes
● Responsive Design
○ https://www.codecademy.com/learn/learn-responsive-design/modules/learn-re
sponsive-design-module
○ PROJECT: Build a responsive website
● Core Javascript
○ Variable & Function Hoisting
■ https://medium.com/javascript-in-plain-english/https-medium-com-java
script-in-plain-english-what-is-hoisting-in-javascript-a63c1b2267a1
■ https://codeburst.io/hoist-your-knowledge-of-javascript-hoisting-59b73
124b430
○ Scope, Scope Chaining, and Shadowing
■ https://blog.bitsrc.io/understanding-scope-and-scope-chain-in-javascri
pt-f6637978cf53
■ https://hackernoon.com/execution-context-in-javascript-319dd72e8e2c
○ Closures
■ http://javascriptissexy.com/understand-javascript-closures-with-ease/
■ https://javascript.info/closure
■ https://developer.mozilla.org/en-US/docs/Web/JavaScript/Closures
○ Objects & The prototype chain
■ https://codeburst.io/master-javascript-prototypes-inheritance-d0a9a5a
75c4e
■ https://dev.to/codesmith_staff/explain-javascripts-prototype-chain-like-i
m-five-51p
○ New Keyword
■ https://www.tutorialsteacher.com/javascript/new-keyword-in-javascript
○ This keyword
■ https://medium.com/quick-code/understanding-the-this-keyword-in-jav
ascript-cb76d4c7c5e8
■ Call vs Apply
● http://hangar.runway7.net/javascript/difference-call-apply
○ Bind Keyword
■ https://javascript.info/bind
● ES6+ Javascript
○ http://es6-features.org/#Constants
○ https://ponyfoo.com/articles/es6-promises-in-depth
● How Javascript Works (Call Stack / Event Loop / Async)
○ https://www.youtube.com/watch?v=8aGhZQkoFbQ
 ○ https://www.youtube.com/watch?v=cCOL7MC4Pl0
○ https://jakearchibald.com/2015/tasks-microtasks-queues-and-schedules/
● Basic Debugging & DevTools
○ https://www.youtube.com/watch?v=0GfQ2-jKhLM
○ https://www.youtube.com/watch?v=x4q86IjJFag
○ Constant resource: ​https://umaar.com/dev-tips/
● NodeJS & NPM
○ https://www.youtube.com/watch?v=U8XF6AFGqlc
○ https://www.tutorialspoint.com/nodejs/nodejs_npm.htm
○ https://devhints.io/npm
● Checking for Browser Support for a feature (HTML/Web API/CSS/Javascript)
○ https://caniuse.com/
● Shadow DOM
○ https://glazkov.com/2011/01/14/what-the-heck-is-shadow-dom/
● PROJECT: Write a multi-page web application that fetches data from an API
using Ajax. Add interactivity to the page using javascript.
● PROJECT: Write a bouncing ball animation using JS and the DOM where the
ball must bounce off the walls of a container
● PROJECT: Make a pinterest-like layout - using plain CSS or using Flexbox
● Practice: A few Javascript specific coding questions on w​ ww.codewars.com

LEVEL 3: Frameworks & Tooling

● React Course
○ https://www.udemy.com/react-redux/learn/v4/content
● Webpack 4 Tutorial
○ https://www.udemy.com/webpack-from-beginner-to-advanced/learn/v4/conten
t
● PROJECT: Make a google calendar-like (weekly view) single page app (SPA)
using React & redux. Make use of webpack to bundle the files, etc. Structure
your CSS using BEM & ITCSS. User must be able to add/delete/modify events
and switch between weeks

LEVEL 4: Advanced

● CSS Flexbox & CSS Grid ​(Optional)

○ https://css-tricks.com/snippets/css/a-guide-to-flexbox/
○ https://flexboxfroggy.com/
○ http://www.flexboxdefense.com/
● Critical Rendering Path
○ https://medium.freecodecamp.org/an-introduction-to-web-performance-and-th
e-critical-rendering-path-ce1fb5029494
○ https://bitsofco.de/understanding-the-critical-rendering-path/
● Website Performance
○ https://in.udacity.com/course/website-performance-optimization--ud884
● Browser Rendering
 ○ https://blog.logrocket.com/how-browser-rendering-works-behind-the-scenes-6
782b0e8fb10
○ https://in.udacity.com/course/browser-rendering-optimization--ud860
● 33 Things Every JS Developer Should Know
○ https://github.com/leonardomso/33-js-concepts
● HTTP1 vs HTTP/2
○ https://kinsta.com/learn/what-is-http2/
○ https://hpbn.co/http2/
● Cross Origin Resource Sharing (CORs)
○ https://medium.com/@baphemot/understanding-cors-18ad6b478e2b
○ https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS
● Remote Debugging
○ https://developers.google.com/web/tools/chrome-devtools/remote-debugging/

PROJECTS (Host on github, share link on resume):

All the above projects plus:

1. Write a very simple DOM manipulation library
a. https://blog.garstasio.com/you-dont-need-jquery/dom-manipulation/
b. https://medium.freecodecamp.org/how-to-write-a-jquery-like-library-in-71-lines
-of-code-learn-about-the-dom-e9fb99dbc8d2
c. https://gomakethings.com/how-to-create-your-own-vanilla-js-dom-manipulatio
n-library-like-jquery/
2. Write a simple React like library (virtual DOM)
a. https://medium.com/@deathmood/how-to-write-your-own-virtual-dom-ee74ac
c13060
b. https://hackernoon.com/build-your-own-react-48edb8ed350d
3. Optional:​ Publish what you think would be a useful NPM module (does not have to
be complicated, just useful). You will learn more about modules and how to publish
and consume one.
4. Optional:​ Node REST API (Ex:
https://medium.com/@onejohi/building-a-simple-rest-api-with-nodejs-and-express-da
6273ed7ca9​)

INTERVIEW PREPARATION:

1. What are debounce and throttle? Can you write a custom/simple debounce or
throttle function?
a. https://css-tricks.com/the-difference-between-throttling-and-debouncing/
b. https://codeburst.io/throttling-and-debouncing-in-javascript-b01cad5c8edf
2. Scope chaining, Hoisting & closure questions
3. Explain Object prototypal inheritance?
4. What is ​__proto__​?
(​https://hackernoon.com/understand-nodejs-javascript-object-inheritance-proto-protot
ype-class-9bd951700b29​)
 5. What is ​this​? Will give you ​n​ number of invocations of a function - have to tell the
output (which you can get if you know the value of ​this​) in each case
6. What is the ​new​ keyword? Can you write your own function that does exactly what
new​ does?
7. What is CSS Specificity?
8. Floating versus inline-block?
9. Have you used flexbox? Explain, write a snippet.
10. What is z-index? Can a child element of a lower z-index parent show above the
sibling of that parent with higher z-index? (hint: stacking context)
11. How does closure and scope chaining work? If you were the developer of js, how
would you implement chaining and closure? (Hint: using the javascript “heap”)
12. VirtualDOM versus DOM (DOM Diffing)
13. 10 things you did to improve the performance of your website (esp. Load
performance)
14. Image spriting, HTTP2, Domain Sharding, multiplexing?
15. Do you know what critical rendering path is? Explain
16. Questions on promises. Definition? Why is it better than callbacks?
17. Will give a complicated promise example - have to tell output. Basically, they are
testing your knowledge of promise chaining.
18. Tell me how you would profile the page load time of a website (OR) How would you
use devtools to do <X>?
19. Async/Await. Why use it when we already have promises?
20. How do you fetch many API calls in parallel but output the results sequentially
(one-after-another)? (Hint: run all promise calls first then loop and await over the
pending promise objects returned by the calls)
21. Write your own custom promise function. (Ex: “new MyPromise()”)
22. What is the callstack? Do you know what the event loop is? Explain (OR) Given a for
loop that contains settimeout calls, what is the output?
23. Algorithm questions:
a. Learn how to implement the basic data structures in javascript (ex: stacks,
queues, linked lists, tree, etc - it is not very tough)
b. Learn basic sorting functions (mergesort, quicksort, insertion sort) - practice
their implementation in js
c. Implement linked list and the operations that follow along (add/ remove/ etc)
d. Learn binary search and how to implement it in js
e. Learn time complexity of various operations like various sorting searching etc
f. Practice algorithms - mainly arrays, sorting, searching
g. Approach is important - think in terms of TC & SC - it is okay if end answer is
not the most optimized
h. Most questions will have TC of n^2…. Bringing it down to nlogn itself is an
improvement. So you first think of a brute force soln and then try optimizing.

EXCLUDED:
1. CSS Transitions & Animations
2. Progressive Web Apps (PWAs)
3. Server Side Rendering (SSR) w/ React
4. Service Worker & Caching
(​https://developers.google.com/web/ilt/pwa/caching-files-with-service-worker​)