Web Development Roadmap

✅ Basic Introduction

• How Internet Works?
• Understand the following terms: Process, IP Address, Port Number, Domain, Hosting, Client, Server, DNS Resolution
• Client Server Architecture (Request-Response Model)
• User Experience & User Interface
• How are websites made? What are they comprised of?
• Frontend? Backend? Databases?
• Little bit about your operating system & file system. (Because from here onwards, we deal with files a lot)
• Command Prompt Basics

✅ Code Editors (I would prefer Visual Studio Code)

• Opening Files & Folders
• Creating Files & Folders
• Adding Plugins
• What is Live Server?
• Opening Command Prompt from Code Editor

✅ HTML Basics: An Introduction to HTML

• Introduction
  • What is HTML?
  • Markup Languages?
  • Importance of HTML in web development
  • Installing VS Code editor:
  • Download link:
• HTML Structure
  • HTML document structure
  • Basic HTML tags
  • Opening and closing tags
• HTML Elements
  • Headings and paragraphs
  • Links and images
  • Lists and tables
  • Anchor Tag
• HTML Attributes
  • Understanding attributes
  • Commonly used attributes
  • Adding attributes to HTML elements
• HTML Forms
  • Creating forms
  • Input fields and buttons
  • Form validation
• HTML5 Features
  • New semantic elements
  • Multimedia elements
• Best Coding Practices
  • Writing clean and organized HTML code
  • Using proper indentation and comments
• Conclusion
  • Importance of HTML in modern web development
  • Understand the Future Possibilities with HTML

✅ Understanding Browser’s Debugger Tools

✅ CSS Basics:

1. Why use CSS?
2. Inline, Internal and External CSS
3. Creating and Linking CSS files
4. Selectors
5. Combining Selectors
6. CSS Properties: Fonts, Colors, width, height etc.
7. Units: px, em, rem, % etc.
8. Box Model: Margin, Padding, Border
9. Positioning
10. Transitions and Transforms
11. Flex Box
12. Media Queries
13. Responsiveness
14. CSS Grid
15. Keyframes and Animations

✅ CSS Libraries

1. What is a CSS library?
2. How to view the library code?
3. How the whole process works?
4. Bootstrap
5. Build few projects using Bootstrap

✅ Deploying your website online

1. What is cloud?
2. How does cloud hosting work?
3. Different Cloud Providers
4. Deploying & assigning domain name to the website

✅ JavaScript: Basics to Advanced (TBH Everything)

1. Introduction

2. JavaScript ecosystem

3. JavaScript Versions and Browser Support

4. Transpiled languages like TS

5. Compilers and Interpreters

6. Working with code editors

7. Debugging: console, sources and breakpoints

8. Linking JavaScript file

9. Variables, var vs let

10. Function Scope vs Block Scope

11. Data Types

12. Dynamically typed/statically typed

13. typeof, instanceof

14. Type conversions

15. Operators

16. Conditional Statements

17. Switch-case

18. Loops: for, while and do-while

19. Loops: for variations - for..in, for..of, foreach

20. Objects

21. Dot operator

22. JSON

23. Garbage Collection

24. call stack & memory heap

25. Arrays

26. map, reduce, filter

27. Array methods

28. … operator

29. Mutator, Accessor and Iterator

30. Understanding Events

31. Event Listeners

32. e.preventDefault()

33. Understanding Capturing & Bubbling Phases

34. Event Propagation & stopPropagation

35. Using Event Delegation

36. Keyboard and mouse events

37. Synchronous Execution

38. Asynchronous Execution

39. Blocking Code & The Event Loop

40. Promises

41. Promise Chaining

42. More on Promises

43. async/await

44. window

45. document

46. location

47. history

48. navigator

49. Dialog boxes: alert, confirm, prompt

50. Accessing DOM

51. Nodes

52. Traversing DOM

53. Creating, Removing and Cloning DOM Elements

54. Forms

55. Localstorage

56. Sessionstorage

57. cookies

58. indexed db

59. Debugging: Application tab

60. Understanding HTTP & REST API

61. XMLHttpRequest

62. fetchAPI

63. Error handling

64. Chained fetch api’s

65. CORS, SOP

66. Authentication

67. API and Postman

68. Debugging: Network tab

69. Streams

70. Websockets

71. AXIOS

72. Feature detection and fallback code

73. Polyfills

74. Transpiling code

75. Working with libraries: What and why?

76. Ways of Adding libraries

77. Example: axios

78. Splitting code, intro

79. Javascript modules

80. imports/exports

81. dynamic imports and code splitting

82. module scope and global this

83. Intersection Observer API

84. Mutation Observer API

85. Npm

86. Eslint

87. Webpack

88. Generating Sourcemaps

89. Optimizations

90. V8 engine

91. Critical Rendering Path

92. Render tree, BOM, CSSOM, DOM

93. Accessibility(a11y)

94. WebAssembly

95. Memory leaks

96. SEO Optimization, metatags

97. Internationalization(i18n)

98. Microfrontends

99. OAuth

100. PWA

101. SSG, SSR, SPA

102. Web Workers

103. Handling Animations

104. Authentication Practices

105. XSS and Javascript Remote Code Execution

106. CSRF and Browser Security

107. Prototype Pollution

108. Vulnerable Modules(Flagged)

109. CSRF

110. Performance measuring tools

111. Throttle vs Debounce

112. Async/defer javascript

113. Image resizing/optimization

114. Minification and Gzip Compression

115. Lazy Loading

116. Caching strategies

117. Critical CSS

118. Fonts optimization