2021完整的 #Web 开发资源
开发商ROADMAPS
Frontend -前端开发路线图。
Backend -后端开发路线图。
React -React开发路线图。
Andriod -Android开发路线图。
DevOps -DevOps路线图。
文档和备忘单
MDN Web Docs -MDN Web Docs网站提供有关Open Web技术的信息，包括网站和渐进式Web应用程序的HTML，CSS和API。
DevDocs- 为开发人员提供的快速，离线和免费的文档浏览器。在一个Web应用程序中搜索100多个文档。
DEVHINTS- 少量的备忘单。
FLEX - Malven -用于CSS flex布局的可视备忘单。
GRID - Malven -CSS网格布局的可视备忘单。
设计工具
Figma -Figma帮助团队从头到尾创建，测试和交付更好的设计。
Adobe XD- 通过外观和感觉像真实事物的设计分享您的故事。线框，动画，原型，协作等等—一切都在这里，一站式完成。
Sketch-使用超过100万人使用的设计平台，从自由职业者到全球最大的团队，创建，制作原型，进行协作并将您的想法变为现实。
Whimsical -以思想的速度进行视觉交流–协作流程图，线框，便签和思维导图。
网络如何运作？
互联网的工作原理视频 -互联网如何运作？
互联网的工作原理简短视频 -关于互联网如何工作的简要说明？
域名解析 -DNS如何工作？
HTTPS -HTTPS如何工作？
HTML和CSS
freeCodeCamp -学习Web开发的免费课程。
Interneting Is Hard -面向完整初学者的友好的Web开发教程。
HTML Elements -由MDN引用的HTML元素。
HTML Entity -CSS技巧的HTML实体参考。
CSS3属性 -MDN引用的CSS。
CSS参考 -CSS的免费视觉指南。
Flexbox Froggy -一款可帮助您学习CSS Flex的游戏。
CSS技巧-Flexbox -Flexbox完整指南。
网格花园-一个学习CSS网格的游戏。
CSS TRICKS - A Complete Guide to Grid -CSS网格的全面指南，着重于网格父容器和网格子元素的所有设置。
学习CSS网格 -Jonathan Suh撰写的综合指南，可帮助了解和学习CSS网格布局。
Can I Use -最新的浏览器支持表，以支持台式机和移动Web浏览器上的前端Web技术。
CSS Effects -CSS动画。
Keyframes-使用可视时间轴编辑器创建基本或复杂的CSS @keyframe动画。
Animista -玩准备好使用CSS动画的集合。
BEM -BEM命名备忘单。
Autoprefixer 一个PostCSS插件，可解析您的CSS并添加供应商前缀。
CSS Formatter- 在线CSS Formatter，CSS Beautifier。
Placeholder -如何使用我们的占位符。只需在我们的URL后指定图像大小，将获得一个占位符图像
开发商ROADMAPS
Frontend -前端开发路线图。
Backend -后端开发路线图。
React -React开发路线图。
Andriod -Android开发路线图。
DevOps -DevOps路线图。
文档和备忘单
MDN Web Docs -MDN Web Docs网站提供有关Open Web技术的信息，包括网站和渐进式Web应用程序的HTML，CSS和API。
DevDocs- 为开发人员提供的快速，离线和免费的文档浏览器。在一个Web应用程序中搜索100多个文档。
DEVHINTS- 少量的备忘单。
FLEX - Malven -用于CSS flex布局的可视备忘单。
GRID - Malven -CSS网格布局的可视备忘单。
设计工具
Figma -Figma帮助团队从头到尾创建，测试和交付更好的设计。
Adobe XD- 通过外观和感觉像真实事物的设计分享您的故事。线框，动画，原型，协作等等—一切都在这里，一站式完成。
Sketch-使用超过100万人使用的设计平台，从自由职业者到全球最大的团队，创建，制作原型，进行协作并将您的想法变为现实。
Whimsical -以思想的速度进行视觉交流–协作流程图，线框，便签和思维导图。
网络如何运作？
互联网的工作原理视频 -互联网如何运作？
互联网的工作原理简短视频 -关于互联网如何工作的简要说明？
域名解析 -DNS如何工作？
HTTPS -HTTPS如何工作？
HTML和CSS
freeCodeCamp -学习Web开发的免费课程。
Interneting Is Hard -面向完整初学者的友好的Web开发教程。
HTML Elements -由MDN引用的HTML元素。
HTML Entity -CSS技巧的HTML实体参考。
CSS3属性 -MDN引用的CSS。
CSS参考 -CSS的免费视觉指南。
Flexbox Froggy -一款可帮助您学习CSS Flex的游戏。
CSS技巧-Flexbox -Flexbox完整指南。
网格花园-一个学习CSS网格的游戏。
CSS TRICKS - A Complete Guide to Grid -CSS网格的全面指南，着重于网格父容器和网格子元素的所有设置。
学习CSS网格 -Jonathan Suh撰写的综合指南，可帮助了解和学习CSS网格布局。
Can I Use -最新的浏览器支持表，以支持台式机和移动Web浏览器上的前端Web技术。
CSS Effects -CSS动画。
Keyframes-使用可视时间轴编辑器创建基本或复杂的CSS @keyframe动画。
Animista -玩准备好使用CSS动画的集合。
BEM -BEM命名备忘单。
Autoprefixer 一个PostCSS插件，可解析您的CSS并添加供应商前缀。
CSS Formatter- 在线CSS Formatter，CSS Beautifier。
Placeholder -如何使用我们的占位符。只需在我们的URL后指定图像大小，将获得一个占位符图像
一些与 #Web 开发有关的各个方面YouTube频道
Codecourse
Codecourse 可帮你免费学习用于Web开发的代码。有一些视频介绍了如何使用Bourbon＆Neat制作出色的CSS，从零开始在PHP中构建MVC应用程序，以及从基础到实际应用的PHP学习资料。
可以学习的内容： PHP，CSS，托管。
DevTips
DevTips为你提供每周的教程，每个视频都以一种易于理解的方式彻底涵盖了一个主题，可以进入HTML和CSS，CSS定位等基础知识。创作者还从开发个人网站中汲取了丰富的经验，从寻找想法，建立线框图，创建Web组件到最终结果。
可以学习的内容： HTML，CSS，JavaScript。
Level Up Tuts
斯科特·托林斯基（Scott Tolinski）运行此渠道，涵盖CSS样式和网站构建，AngularJavaScript等框架，CMS之类的WordPress或Magento。和更多。在设计方面，他涵盖了有关Sketch应用程序的教程，提供了一些素描技巧和使用某些功能的指南。他每周两次发布新视频。
可以学习的东西： HTML，CSS，JavaScript（AngularJavaScript，Meteor），PHP，设计（Sketch 3）
JREAM
JREAM定期提供带有许多主题的编程课程，包括前端开发（CSS，JavaScript，jQuery，Gulp）和后端开发（PHP OOP）。有时还会有一些视频提供有用的提示，例如有关编写良好代码的建议以及诸如Windows 10之类的新主题。
可以学习的东西： CSS，JavaScript（NodeJavaScript，jQuery），PHP，MySql，设计（Photoshop，Illustrator）。
LearnCode.academy
一个可以帮助你成为Pro Web开发人员的渠道，其主题从基础到当今正在兴起的各种主题-都与Web开发有关。您将学习HTML，JavaScript基础，jQuery，CSS和模块化JavaScript的基础知识，ES6备忘单。还有关于如何使用多个Pro WebDev工具的教程。
可以学习的内容： HTML，CSS，JavaScript（包括Node.JavaScript，Angular.JavaScript，Backbone.JavaScript），服务器管理，部署策略。
Mackenzie Child涵盖了Web开发中的各个主题，从设计到编码到在Ruby on Rails上启动Web应用程序。在12种不同的应用程序中有关于Ruby on Rails的截屏视频，从博客，待办事项应用程序到Rails上的Pinterest克隆，不一而足。
可以学到的东西： Ruby on Rails。
德里克·巴纳斯（Derek Banas） 展示了有关多种语言编程的视频教程。可以看到有关面向对象的JavaScript，CSS和SASS，Ruby，Go，Swift，Visual C＃，Haskel，Dart，Scala和其他语言的教程。
可以学习的东西： CSS，JavaScript，Ruby，Go，Swift，Visual C＃，Haskel，Dart等。
StartHere.fm是有关Web开发的播客频道。提出的主题包括：HTML和CSS，JavaScript，PHP，Rails以及有关设计（原型设计，线框图，UX）的介绍。
可以学习的东西： HTML，CSS，JavaScript，Ruby on Rails。
Tuts +网页设计
Tuts +创建视频课程和教程，以帮助你学习和掌握网页设计技能。你在这里可以学到很多东西，包括掌握Bootstrap，在Photoshop和Dreamweaver中进行布局，构建响应式布局，实现SASS和Compass，为Tumblr制作主题等。在60秒的视频让很多题目非常简单。
可以学习的东西： HTML，CSS，设计（Photoshop，Dreamweaver）。
亚当·科里（Adam Khoury）
这是Adam Khoury的免费视频课程，旨在帮助掌握Web开发技术，例如JavaScript，PHP，SQL，HTML，CSS等。
可以学习的内容： HTML，CSS，JavaScript，PHP，SQL。
Coder’s Guide
在《Coder’s Guide 》中，可以更广泛地学习计算机编程。从HTML / CSS和JavaScript开始，然后转到更高级的主题，例如响应式网站和通过Bootstrap应用WordPress主题。还提供有关Java编程和VisualBasic的视频。
可以学习的内容： HTML，CSS，JavaScript，PHP，Java，VisualBasic。
布拉德·侯赛（Brad Hussey）
该频道提供有关Web开发编码的免费课程。主题包括：使用HTML和CSS从头开始构建网站，使用Bootstrap进行响应式网站，使用PHP编码动态网站等。还包括有关虚拟主机的视频，甚至介绍如何成为一名出色的自由职业者。
可以学习的内容： HTML，CSS，JavaScript，PHP。
Google Chrome Developer 展示了Web开发的最佳做法，HTTP 203，Polycast（关于Google Polymer）和一个非常有趣的工具提示系列，展示有关使用许多网络基础应用或工具的良好提示。
可以学习的内容： HTML，JavaScript，Google Polymer。
Google Web Designer
一个了解Google Web Designer工具的特性和功能的渠道，以及一个使用它来构建一个出色网站的教程。
可以学习的内容：设计，HTML，CSS，JS。
CSS技巧
这是CSSTricks.com的YouTube频道，由Chris Coyier制作。该频道显示了主要与Web设计相关主题的截屏视频，包括CSS，响应式设计，SVG等。也有关于WordPress开发的截屏视频。
可以学习的内容： CSS，JavaScript，WordPress。
Codecourse
Codecourse 可帮你免费学习用于Web开发的代码。有一些视频介绍了如何使用Bourbon＆Neat制作出色的CSS，从零开始在PHP中构建MVC应用程序，以及从基础到实际应用的PHP学习资料。
可以学习的内容： PHP，CSS，托管。
DevTips
DevTips为你提供每周的教程，每个视频都以一种易于理解的方式彻底涵盖了一个主题，可以进入HTML和CSS，CSS定位等基础知识。创作者还从开发个人网站中汲取了丰富的经验，从寻找想法，建立线框图，创建Web组件到最终结果。
可以学习的内容： HTML，CSS，JavaScript。
Level Up Tuts
斯科特·托林斯基（Scott Tolinski）运行此渠道，涵盖CSS样式和网站构建，AngularJavaScript等框架，CMS之类的WordPress或Magento。和更多。在设计方面，他涵盖了有关Sketch应用程序的教程，提供了一些素描技巧和使用某些功能的指南。他每周两次发布新视频。
可以学习的东西： HTML，CSS，JavaScript（AngularJavaScript，Meteor），PHP，设计（Sketch 3）
JREAM
JREAM定期提供带有许多主题的编程课程，包括前端开发（CSS，JavaScript，jQuery，Gulp）和后端开发（PHP OOP）。有时还会有一些视频提供有用的提示，例如有关编写良好代码的建议以及诸如Windows 10之类的新主题。
可以学习的东西： CSS，JavaScript（NodeJavaScript，jQuery），PHP，MySql，设计（Photoshop，Illustrator）。
LearnCode.academy
一个可以帮助你成为Pro Web开发人员的渠道，其主题从基础到当今正在兴起的各种主题-都与Web开发有关。您将学习HTML，JavaScript基础，jQuery，CSS和模块化JavaScript的基础知识，ES6备忘单。还有关于如何使用多个Pro WebDev工具的教程。
可以学习的内容： HTML，CSS，JavaScript（包括Node.JavaScript，Angular.JavaScript，Backbone.JavaScript），服务器管理，部署策略。
Mackenzie Child涵盖了Web开发中的各个主题，从设计到编码到在Ruby on Rails上启动Web应用程序。在12种不同的应用程序中有关于Ruby on Rails的截屏视频，从博客，待办事项应用程序到Rails上的Pinterest克隆，不一而足。
可以学到的东西： Ruby on Rails。
德里克·巴纳斯（Derek Banas） 展示了有关多种语言编程的视频教程。可以看到有关面向对象的JavaScript，CSS和SASS，Ruby，Go，Swift，Visual C＃，Haskel，Dart，Scala和其他语言的教程。
可以学习的东西： CSS，JavaScript，Ruby，Go，Swift，Visual C＃，Haskel，Dart等。
StartHere.fm是有关Web开发的播客频道。提出的主题包括：HTML和CSS，JavaScript，PHP，Rails以及有关设计（原型设计，线框图，UX）的介绍。
可以学习的东西： HTML，CSS，JavaScript，Ruby on Rails。
Tuts +网页设计
Tuts +创建视频课程和教程，以帮助你学习和掌握网页设计技能。你在这里可以学到很多东西，包括掌握Bootstrap，在Photoshop和Dreamweaver中进行布局，构建响应式布局，实现SASS和Compass，为Tumblr制作主题等。在60秒的视频让很多题目非常简单。
可以学习的东西： HTML，CSS，设计（Photoshop，Dreamweaver）。
亚当·科里（Adam Khoury）
这是Adam Khoury的免费视频课程，旨在帮助掌握Web开发技术，例如JavaScript，PHP，SQL，HTML，CSS等。
可以学习的内容： HTML，CSS，JavaScript，PHP，SQL。
Coder’s Guide
在《Coder’s Guide 》中，可以更广泛地学习计算机编程。从HTML / CSS和JavaScript开始，然后转到更高级的主题，例如响应式网站和通过Bootstrap应用WordPress主题。还提供有关Java编程和VisualBasic的视频。
可以学习的内容： HTML，CSS，JavaScript，PHP，Java，VisualBasic。
布拉德·侯赛（Brad Hussey）
该频道提供有关Web开发编码的免费课程。主题包括：使用HTML和CSS从头开始构建网站，使用Bootstrap进行响应式网站，使用PHP编码动态网站等。还包括有关虚拟主机的视频，甚至介绍如何成为一名出色的自由职业者。
可以学习的内容： HTML，CSS，JavaScript，PHP。
Google Chrome Developer 展示了Web开发的最佳做法，HTTP 203，Polycast（关于Google Polymer）和一个非常有趣的工具提示系列，展示有关使用许多网络基础应用或工具的良好提示。
可以学习的内容： HTML，JavaScript，Google Polymer。
Google Web Designer
一个了解Google Web Designer工具的特性和功能的渠道，以及一个使用它来构建一个出色网站的教程。
可以学习的内容：设计，HTML，CSS，JS。
CSS技巧
这是CSSTricks.com的YouTube频道，由Chris Coyier制作。该频道显示了主要与Web设计相关主题的截屏视频，包括CSS，响应式设计，SVG等。也有关于WordPress开发的截屏视频。
可以学习的内容： CSS，JavaScript，WordPress。
