the-6-month-web-development-mastery-plan-in-2020-for-free-149h

原始地址：https://dev.to/hb/the-6-month-web-development-mastery-plan-in-2020-for-free-149h

Tools, Languages, and Frameworks

当涉及到网页开发时，主要使用的三种语言是HTML、CSS和Javascript。HTML代表超文本标记语言（Hyper Text Markup Language）。HTML允许用户为网页设计文档。CSS代表层叠样式表（Cascading Style Sheets）。CSS是用来为网站设计样式的语言：颜色、排版等。Javascript（有时也称为JS）是一种编程语言，可以使网页具有交互功能。例如，点击按钮时发生的事情是由Javascript控制的。

框架是一种预先构建的软件，可以用Javascript编写，但不一定是，可以增强网页并使前端开发更轻松。前端框架控制着用户界面（用户看到的内容）。主要的前端网页开发框架有Vue、Angular和React JS。在我看来，最流行、最好的框架是React JS。React JS已经成为2020年最流行的前端框架，因为它非常可定制、轻量级和强大。一些使用React JS的网站包括Instagram、Netflix、Facebook、Uber等。后端框架是一种简化服务器创建过程的工具。在这个计划中包含的后端框架是一些最受欢迎的：Node.js、Express.js、GraphQL等。

为了存储网站信息，您需要一个数据库。Postgresql是2020年最流行的数据库。这是因为Postgresql具有强大的功能，对于初学者来说非常容易学习。Postgresql可以完美地处理任何大小的数据，无论是大数据还是小数据。

The 1st Month

第一个月是学习基础知识，熟悉编程和开发工具的时间。您将深入学习CSS、HTML、Javascript以及一些React、Node和Express。我建议您使用VSCode作为您的代码编辑器（用于编写代码），并学习一些Git和Github（版本控制和开发者共享代码的地方）。我会推荐一些免费和付费的课程。当我开始学习网页开发时，我选择了付费课程，从中学到了很多东西，但如果您预算有限，免费课程也可以。

课程：
免费：
HTML：https://www.youtube.com/watch?v=pQN-pnXPaVg
CSS：https://youtu.be/ieTHC78giGQ
Javascript：https://youtu.be/W6NZfCO5SIk
React：https://youtu.be/DLX62G4lc44
付费：https://www.udemy.com/course/the-complete-web-developer-zero-to-mastery/

The 2nd Month

第二个月是开始独立完成项目并熟悉开发工具、语言和框架的时间。我建议您选择一个React项目自己完成：计算器、天气应用、随机引用生成器或投票系统。如果遇到困难，StackOverFlow是一个伟大的社区，开发者在这里互相帮助解决问题。在制作一些基本的React项目之后，我建议您学习数据结构和算法。这些可能会比较困难，更偏向理论，但我保证这是非常有价值的。数据结构和算法将成为您选择的任何网页开发领域的基础。我推荐这门课程：https://youtu.be/t2CEgPsws3U。在学习完数据结构和算法后，我鼓励您在React中创建一个数据结构或算法的可视化工具。一些想法包括排序可视化工具、路径查找可视化工具或二叉树可视化工具。这将加深您对所选择项目的数据结构或算法的理解。将这个项目分享在Github上。如果您还不知道Git或Github是什么，我推荐这个小课程：https://youtu.be/DVRQoVRzMIY

The 3rd Month

这个月的重点是掌握基础知识并进入中级和高级主题。我建议您自己使用React和Firebase创建一个实时聊天应用程序。一定要使用React Hooks和最新的React标准（如函数组件）。之后，我建议您学习Typescript。Typescript为Javascript添加了类型。这是可选的，但很可能会在您将来的工作和工作场所中使用。大多数人喜欢在大型项目中使用Typescript，因为Typescript比Javascript更具扩展性和安全性。我建议阅读Typescript文档，因为您现在已经是中级开发者了，应该学会有效阅读文档。之后，我建议您观看这个关于如何在React中实现Typescript的教程：https://www.youtube.com/watch?v=Z5iWr6Srsj8。最后一个月，我建议您观看这个教程：https://youtu.be/Fy9SdZLBTOo，但使用Typescript进行学习。

The 4th Month

好了。到目前为止，您已经是一位认真的开发者了，已经投入了3个月的时间学习网页开发。我建议您在这个阶段做一些最复杂的项目（再次强调，尽量使用Typescript）：https://youtu.be/7qAXvOFhlDc。完成后，我建议您使用之前学到的PERN+Typescript堆栈来创建一个博客网站（甚至可以是一个Medium克隆）。完成您的博客网站后，我建议您学习GraphQL。就像您学习Typescript一样，阅读GraphQL文档来学习它。在学习了基本的GraphQL后，学习如何使用它创建REST API。您可以做任何全栈项目。最后，通过在LeetCode上解决一些有趣的编程问题来结束这个月。这些问题将提高您的数据结构和算法技能，并增加一些有趣的问题解决乐趣！

The 5th Month

您离6个月计划的完工已经很近了。是时候掌握前端、后端和数据库之间的连接了。这个教程完美地总结了你到目前为止学到的东西，使用了GraphQL、Typescript、Postgresql、React、Express，并教你一些新的框架/工具。这个教程可以在这里找到：https://youtu.be/I6ypD7qv3Z8。在完成这个教程和这个月的其他时间里，尝试每天解决1或2个简单/中等难度的LeetCode问题。完成教程后，添加更多功能，如用户页面、评论、标签，创造力大发！如果您有更多时间，我鼓励您继续致力于“Reddit克隆”项目。

The 6th Month

这是最后一个月了，离目标几乎完成了！您已经完成了许多令人印象深刻的项目。在Github上看看并找到一些让您印象深刻的项目（例如VSCode）。为了在开源方面积累一些经验，为您喜欢的项目添加一些新功能。通过参与开源项目，您可以与其他开发者共同开发产品，并努力寻找解决实际问题的解决方案。由于开源项目需要保持一定的代码质量，参与其中也将有助于使您的代码更具可扩展性、可重用性和可理解性。另外，建立一个完整的全栈作品集，展示您迄今为止建立的优秀项目。

感谢阅读我的6个月网页开发精通计划。祝您在成为最优秀的开发者的道路上一切顺利！

Henry