Web Developer Handbook

WEB DEVELOPMENT

Must Know Concepts

JAVASCRIPT:

• Const vs Let vs Var
• Hoisting
• “this” in JS
• Closures
• Map-reduce-filter
• Promises

HTML & CSS

JAVASCRIPT:

• Semantic HTML
• HTML5 Storage mechanism
• Box Model
• CSS Selectors
• Media Queries- Flexbox

REACT JS

JAVASCRIPT:

• JSX
• Components
• State and props
• Render props
• React hooks
• Memoization

TYPESCRIPT

JAVASCRIPT:

• Class inheritance
• Interfaces
• Enums
• Type assertions
• Generics

WEB DEV MISC.

JAVASCRIPT:

• HTTP
• Web services
• REST API
• Web performance
• Web workers
• Web security

WEB DEVELOPMENT

Learning Websites

1. Udemy
2. Javascript.info
3. Freecodecamp
4. Codeacademy
5. Coursera
6. W3 schools
7. Tutsplus

WEB DEVELOPMENT

Books

1. Responsive Web Design with HTML5 and CSS
2. Exploring ES2016 and ES2017
3. The Clean Coder
4. Eloquent JavaScript
5. Scalable and Modular Architecture for CSS
6. JavaScript: The Good Parts

• https://gumroad.com/l/html2react/web-dev-handbook

WEB DEVELOPMENT

HTML & CSS

JAVASCRIPT:

• Semantic HTML
• HTML5 Storage mechanism
• Box Model
• CSS Selectors
• Media Queries- Flexbox

WEB DEVELOPMENT

Project Ideas

CALCULATORS:

• Simple math calculator
• Compound interest calculator
• Trigonometry calculator
• Closures
• Map-reduce-filter
• Promises

RANDOM MOTIVATIONAL QUOTE:

• Single page application
• Show quote for the day
• Change quote every single day
• Pull quote from a JSON file
• Map-reduce-filter
• Promises

CURRENCY CONVERTOR:

• Use https://free.currencyconverterapi.com/ AP
• Or simply hard code the formulae
• Deploy chrome extension of your app

DIGITAL CLOCK:

• Hours, Minutes, Seconds
• Implement timer
• Implement stop watch

RANDOM YOUTUBE VIDEO PLAYER:

• Connect to YouTube or other video streaming API
• Get random video on a button click
• Play the video
• Like the video

IMAGE CAROUSAL / SLIDER:

• Show left/right buttons to change the images
• Have a timer to change the images after X seconds
• Pull images from a folder or from CDN

WEB DEVELOPER

Interview Questions

1. Explain what is CORS? How does it work?
2. How will you reduce page load time?
3. In HTML explain difference between and ?
4. What is closure and it’s working in JavaScript
5. Explain API in layman’s terms
6. Explain big-O notation in the simplest terms.
7. How does XSS attack work?
8. What is the difference between ID and Class selector?
9. Difference between “null” and “undefined”
10. How will you implement a modal component?
11. What is Webpack and it’s uses?
12. Why do you need TypeScript?

WEB DEVELOPER

Top Tech Companies

1. Google
2. Spotify
3. Facebook
4. Microsoft
5. Netflix
6. Amazon
7. Twitter
8. Apple
9. Adobe
10. Zoom