By Coding Master

200+ free
resources on
web development
 of
Table
Contents

TOPICS COVERED PAGE NO.

Online Learning Platforms 03

Youtube Channels 04
Documents 05
Applications 06
Blog Websites 07
Cheat Sheets 08
Free Courses 09
Books 10
Code Snippets 11
Free Web Hosting 12
Code Challenging Websites 13
Free Online Games 14
CSS Generators 15
Free Templates 16
Github Repository 17
Color Palettes 18
Chrome Extensions 19
Icons 20
Illustrations 21
Newsletters 22
Web Design Inspiration 23
Animation Libraries 24
Some More Useful Websites 25-26
 ONLINE LEARNING PLATFORMS

1. Free Code Camp -

https://www.freecodecamp.org/

2. Udemy -
https://www.udemy.com/

3. Treehouse -
https://teamtreehouse.com/

4. Udacity -
https://www.udacity.com/

5. Cousera -
https://www.coursera.org/

6. Sololearn -
https://www.sololearn.com/

7. Frontend Masters -
https://frontendmasters.com/

8. W3Schools -
https://www.w3schools.com/

9. Codeacademy -
https://www.codecademy.com/

10. Traversy Media -

https://www.traversymedia.com/

03
 YOUTUBE CHANNELS

11. FreeCodeCamp -
https://youtube.com/c/Freecodecamp

12. Traversy Media -

https://youtube.com/c/TraversyMedia

13. Dev Ed -
https://youtube.com/c/DevEd

14. Programming With Mosh -

https://youtube.com/c/programmingwithmosh

15. Tyler Moore -

https://youtube.com/user/Conutant

16. Web Bos -

https://youtube.com/c/WesBos

17. Coding The Smart Way -

https://youtube.com/c/Codingthesmartway

18. Code With Harry -

https://youtube.com/c/CodeWithHarry

19. Clever Programmer -

https://youtube.com/c/CleverProgrammer

20. Yahoo Baba -

https://youtube.com/c/YahooBaba

21. Design Course -

https://youtube.com/c/DesignCourse

04
 DOCUMENTS

22. Dev Docs -

https://devdocs.io/

23. GeeksForGeeks -
https://devdocs.io/

24. Tutorials Point -

https://www.tutorialspoint.com/

25. W3Schools -
https://www.w3schools.com/

26. Java Point -

https://www.javatpoint.com/

05
 APPLICATIONS

27. Programming Hub -

https://programminghub.io/

28. Grasshopper -
https://careerkarma.com/blog/grasshopper-app-review/

29. Encode -
https://play.google.com/store/apps/details?id=com.upskew.encode&hl=en

30. Mimo -
https://getmimo.com/

31. Programming Hero -

https://www.programming-hero.com/

32. Sololearn -
https://www.sololearn.com/

33. Khan Academy -

https://www.khanacademy.org/computing/computer-programming

34. W3Schools -
https://www.w3schools.com/

06
 BLOG WEBSITES

35. CSS Tricks -

https://css-tricks.com/

36. Smashing Magazine -

https://www.smashingmagazine.com/

37. Site Point -

https://www.sitepoint.com/

38. Dev Community -

https://dev.to/

39. Evanto Tuts -

https://tutsplus.com/

40. Medium -
https://medium.com/

07
 CHEAT SHEETS

41. Over API -

https://overapi.com/

42. Awesome Cheat Sheets -

https://lecoupa.github.io/awesome-cheatsheets/

43. HTML5 Element Index -

http://html5doctor.com/element-index/

44. HTML CheatSheet -

https://htmlcheatsheet.com/

45. Can I Use -

https://caniuse.com/

46. CSS Animation -

http://www.justinaguilar.com/animations/

47. CSS Grid Cheat Sheet -

https://grid.malven.co/

48. CSS Flexbox Cheat Sheet -

https://flexbox.malven.co/

49. CSS Easing Functions -

https://easings.net/

08
 FREE COURSES

50. Web Development Learn By Doing HTML5 & CSS3 From Scratch -
https://www.udemy.com/course/web-development-learn-by-doing-html5-
css3-from-scratch-introductory/

51. Master The Basics Of HTML5 & CSS3 Beginner Web Development -
https://www.udemy.com/course/master-the-basics-of-html5-css3-beginner-
web-development/

52. HTML And CSS Foundations -

https://www.udemy.com/course/html-and-css-foundations/

53. Build Your First Website In 1 Week -

https://www.udemy.com/course/build-your-first-website-in-1-week/

54. Introduction To CSS Beginners Guide To CSS Web Design -

https://www.udemy.com/course/introduction-to-css-beginners-guide-to-
css-web-design/

09
 BOOKS

55. CSS Pocket Reference -

https://drive.google.com/file/d/1fqKiCvkESei14Oh3RoGCBBJkewZ3-
0oA/view?usp=sharing

56. CSS3 The Missing Manual -

https://drive.google.com/file/d/1deKgQjs9O0MoivQvDH3wyLz_nrUUyfYF/vi
ew?usp=sharing

57. Head First HTML & CSS -

https://drive.google.com/file/d/1Ig31aq3gEd6qyOuLuvL1aeJXlE_A1B-
z/view?usp=sharing

58. HTML & CSS - Design & Build Websites -

https://drive.google.com/file/d/1VNnDgtKmk8fX83k5jl4PTNIjINyWjlJ6/view?
usp=sharing

59. HTML5 -
https://drive.google.com/file/d/1nxYanqOOsA3olZkfIL5BZsMoax_MMQ0R/vi
ew?usp=sharing

60. CSS3 -
https://drive.google.com/file/d/1clN8z5fH0cjR4NiBZTNXbS6dfw0GOjhr/vie
w?usp=sharing

10
 CODE SNIPPETS

61. Codepen - 71. CodePad -

https://codepen.io/ https://coderpad.io/

62. Free Frontend - 72. CSS Deck -

https://freefrontend.com/ https://cssdeck.com/

63. Code My UI - 73. Code Interview -

https://codemyui.com/ https://codeinterview.io/

64. Play Code -

https://playcode.io/

65. JS Bin -
https://jsbin.com/

66. JS Fiddle -
https://jsfiddle.net/

67. CodeSandBox -
https://codesandbox.io/

68. Web Code Tools -

https://webcode.tools/

69. CSS Flow -

https://www.cssflow.com/

70. CodePly -
https://www.codeply.com/

11
 FREE WEB HOSTING

74. GitHub Pages -

https://github.com/

75. Netlify -
https://www.netlify.com/

76. AWS -
https://aws.amazon.com/

77. Firebase -
https://firebase.google.com/

78. Infinity Free -

https://infinityfree.net/

79. WordPress -
https://wordpress.com/

80. Wix -
https://www.wix.com/

81. Weebly -
https://www.weebly.com/in

82. Shopify -
https://www.shopify.in/

12
 CODE CHALLENGING WEBSITES

83. TopCoder -
https://www.topcoder.com/challenges/?pageIndex=1

84. Coderbyte -
https://www.coderbyte.com/

85. HackerRank -
https://www.hackerrank.com/domains

86. CodeChef -
https://www.codechef.com/

87. Codewars -
https://www.codewars.com/

88. LeetCode -
https://leetcode.com/

13
 FREE ONLINE GAMES

89. Floxbox Defense -

http://www.flexboxdefense.com/

90. Unflod -
https://unfold.com/

91. Grid Garden -

https://cssgridgarden.com/

92. CSS Diner -

https://flukeout.github.io/

93. Code Combat -

https://codecombat.com/

94. Coding Game -

https://www.codingame.com/

95. Screeps -
https://screeps.com/

96. Flexbox Froggy -

https://flexboxfroggy.com/

97. Code Monkey -

https://www.codemonkey.com/

98. Cyber Dojo -

https://www.cyber-dojo.org/creator/home

14
 CSS GENERATORS

99. CSS Grid Generator -

https://cssgrid-generator.netlify.app/

100. CSS Flexbox Generator -

https://cssflex-generator.netlify.app/

101. CSS Matic -

https://www.cssmatic.com/

102. Patternify -
http://www.patternify.com/

103. ColorZilla Gradients -

https://www.colorzilla.com/gradient-editor/

104. Gradient Generator -

https://cssgradient.io/

105. CSS Layout Generator -

https://csslayout.io/

106. Animation Generator -

https://cssanimate.com/

107. CSS3 Generator -

https://css3generator.com/

108. Web Code Tools -

https://webcode.tools/generators/css

15
 FREE TEMPLATES

109. Templated -
https://themewagon.com/author/templated/

110. Zero Theme -

https://www.zerotheme.com/

111. UI Deck -
https://uideck.com/

112. Admin UI Themes -

https://athemes.com/collections/free-bootstrap-admin-templates/

113. HTML5 Up -
https://html5up.net/

114. Theme Wagon -

https://themewagon.com/

115. ColorLib -
https://colorlib.com/

116. W3Layouts -
https://w3layouts.com/

16
 GITHUB REPOSITORIES

117. Awesome CSS -

https://github.com/awesome-css-group/awesome-css

118. Web Developer Roadmap -

https://github.com/kamranahmedse/developer-roadmap

119. JavaScript Algorithms -

https://github.com/trekhleb/javascript-algorithms

120. Awesome Learning Resources -

https://github.com/lauragift21/awesome-learning-resources

121. Clean Code JavaScript -

https://github.com/ryanmcdermott/clean-code-javascript

122. Frontend Checklist -

https://github.com/thedaviddias/Front-End-Checklist

123. JavaScript Concepts -

https://github.com/leonardomso/33-js-concepts

124. 30 Seconds Of Code -

https://github.com/30-seconds/30-seconds-of-code

125. CSS Protips -

https://github.com/AllThingsSmitty/css-protips

17
 COLOR PALETTES

126. Color Hunt -

https://colorhunt.co/

127. HTML Color Code -

https://htmlcolorcodes.com/

128. Coolors -
https://coolors.co/

129. UI Gradients -
https://uigradients.com/

130. Gradient Genarator -

https://www.colorzilla.com/gradient-editor/

131. Flat UI Colors -

https://flatuicolors.com/

18
 CHROME EXTENSIONS

132. CSS Peeper -

https://chrome.google.com/webstore/detail/css-
peeper/mbnbehikldjhnfehhnaidhjhoofhpehk?hl=en-US

133. Colorpick Eyedropper -

https://chrome.google.com/webstore/detail/colorpick-
eyedropper/ohcpnigalekghcmgcdcenkpelffpdolg?hl=en-US

134. Window Resizer -

https://chrome.google.com/webstore/detail/window-
resizer/kkelicaakdanhinjdeammmilcgefonfh?hl=en-US

135. Lorem Ipsum Generator -

https://chrome.google.com/webstore/detail/lorem-ipsum-generator-
def/mcdcbjjoakogbcopinefncmkcamnfkdb?hl=en-US

136. CSS Scan -

https://chrome.google.com/webstore/detail/css-
scan/gieabiemggnpnminflinemaickipbebg?hl=en-US

137. CSS Viewer -

https://chrome.google.com/webstore/detail/css-viewer-for-google-
chr/eedfldkdghfkhdcanjnfiklpeehbfoag?hl=en-US

138. HTML Validator -

https://chrome.google.com/webstore/detail/kingsquare-html-
validator/anjdemaoejlpgmnmkijdemoiebcddhkc?hl=en-US

139. Wappalyzer -
https://chrome.google.com/webstore/detail/wappalyzer/gppongmhjkpfnbh
agpmjfkannfbllamg?hl=en-US

140. JSON Viewer -

https://chrome.google.com/webstore/detail/json- 19
viewer/gbmdgpbipfallnflgajpaliibnhdgobh?hl=en-US
 ICONS

141. Font Awesome -

https://fontawesome.com/

142. Icons8 -
https://icons8.com/

143. Flaticon -
https://www.flaticon.com/

144. Pixeden -
https://www.pixeden.com/

145. Fontello -
https://fontello.com/

146 . Icon Finder -

https://www.iconfinder.com/

147. Captain Icon -

https://mariodelvalle.github.io/CaptainIconWeb/

148. Endless Icons -

https://endlessicons.com/

149. Icon-Icons -
https://icon-icons.com/

150. Round Icons -

https://roundicons.com/

20
 ILLUSTRATIONS

151. Freepik -
https://www.freepik.com/

152. Undraw -
https://undraw.co/

153. Drawkit -
https://www.drawkit.io/

154. Humaaans -
https://www.humaaans.com/

155. Handz -
https://www.handz.design/

156. Open Doodles -

https://www.opendoodles.com/

157. Illustration. co -
http://illustration.co/

158. Vivid Js -
https://webkul.github.io/vivid/

159. Many Pixels -

https://www.manypixels.co/

21
 NEWSLETTERS

160. JavaScript Weekly -

https://javascriptweekly.com/

161. Node.js Weekly -

https://nodeweekly.com/

162. FrontEnd Focus -

https://frontendfoc.us/

163. WebTools Weekly -

https://webtoolsweekly.com/

164. CSS Weekly -

https://css-weekly.com/

165. JavaScript Kicks -

https://javascriptkicks.com/

22
 WEB DESIGN INSPIRATION

166. Behance -
https://www.behance.net/

167. Awwwards -
http://www.awwwards.com/

168. CSS Nectar -

http://cssnectar.com/

169. SiteInspire -
https://www.siteinspire.com/

170. Frontend Mentor -

https://www.frontendmentor.io/

23
 ANIMATION LIBRARIES

171. Animate. CSS -

http://daneden.github.io/animate.css/

172. Bounce JS -
http://bouncejs.com/

173. Anime JS -
http://anime-js.com/

174. CSShake -
http://elrumordelaluz.github.io/csshake/#1

175. Hover. CSS -

http://ianlunn.github.io/Hover/

24
 SOME MORE USEFUL WEBSITES

176. Hidden Tools - 186. CSS Reference -

https://hiddentools.dev/ https://cssreference.io/

177. Iconscout - 187. HTML Reference -

https://iconscout.com/ https://htmlreference.io/

178. CSS Zen Garden - 188. Free CSS -

http://www.csszengarden.com/ https://www.free-css.com/

179. A List Apart - 189. Fun JavaScript Projects -

https://alistapart.com/ https://fun-javascript-projects.com/

180. Code Project - 190. Daily Dev -

https://www.codeproject.com/ https://daily.dev/

181. Scotch - 191. Dev Docs -

https://scotch.io/ https://devdocs.io/

182. The Odin Project - 192. What Runs -

https://www.theodinproject.com/ https://www.whatruns.com/

183. CSS Autor - 193. 1LOC -

https://cssauthor.com/ https://1loc.dev/

184. Gradient Magic - 194. Am i Responsive -

https://www.gradientmagic.com/ http://ami.responsivedesign.is/

185. Trianglify - 195. Shape Divider -

https://trianglify.io/ https://www.shapedivider.app/

25
 SOME MORE USEFUL WEBSITES

196. Fancy Border Radius -

https://9elements.github.io/fancy-border-radius/

197. CSS Clip Path -

https://bennettfeely.com/clippy/

198. 30 Seconds Of Code -

https://www.30secondsofcode.org/

199. Undraw -
https://undraw.co/

200. Humaaans -
https://www.humaaans.com/

THE END

26