给 Web 开发初学者的 5 个建议

当今的 Web 开发时代令人着迷。琳琅满目的框架和库让我们保持高效。成千上万的优质资源可供阅读和学习。除了海量的书籍、博客和课程外，Web 开发者们还有 Google、YouTube、Twitter、LinkedIn 和 Stackoverflow 等平台作为他们的好伙伴。然而，作为初学者，你可能会觉得有点不知所措。

如果你刚开始接触 Web 开发，我想分享几点。我花了十多年时间研究各种 Web 技术和技术栈，建议初学者重点关注以下五点。

1.学习 Git 和 GitHub

惊讶吗？没错，第一个就是学习 Git！学习Git 命令和工作流程，这样你就能更好地管理项目源代码。它还能帮助你在 Git 上与你感兴趣的其他项目进行协作。

您至少应该了解以下内容，

如何启动 Git 存储库？
如何暂存/取消暂存代码更改？
如何提交和修改提交？好的提交信息的标准是什么？
如何将您的更改推送到存储库？
如何将另一个分支合并到你的分支？
如何解决合并冲突？

已经有很多文章和视频可以帮助你掌握以上所有内容。我制作了一个适合初学者的视频来解释这些内容，你可以在这里找到。

除了 Git 命令之外，还要重点了解GitHub 和 Workflows。你需要知道：

如何创建和管理存储库？
如何分叉存储库并为其做出贡献？
如何管理分支机构？
如何创建和管理 Pull 请求？

你越多地使用 GitHub 公开管理你的项目，你就越有机会进行协作、分享和学习。我强烈建议你从 Web 开发之旅的一开始就创建一个活跃的 GitHub 个人资料。

如果您想了解有关如何增加公共 GitHub 存储库参与度的更多信息，以下是一些有用的提示，

在 freeCodeCamp 上提高公共 GitHub 存储库的参与度

2. 学习基础知识。原因和方法如下

作为初学者，要专注于理解和练习基础知识。例如，如果你已经开始学习基于 JavaScript 的 Web 开发，那么就应该专注于学习原生 JavaScript（又称 Vanilla JavaScript）、HTML5 和 CSS。框架和库非常重要，如果没有它们，我们的扩展性就无法保证。但是，如果你能够真正专注于基础知识，那将会非常有帮助。

这条推文引发了一些精彩的评论讨论。有空的话可以看看。

现在，让我来重点谈谈在框架和库需求如此旺盛的情况下，如何继续学习基础知识。规划一些业余项目并坚持下去。你可能不得不立即开始开发某个库或框架，因为你的工作/角色需要这样做。但是，不要停止利用基础知识进行业余项目。

以下是一些使用纯 JavaScript、HTML 和 CSS 的项目想法，

着色：通过不同的按钮点击（红色、绿色、蓝色等）为圆圈（div）着色。

学习目标：布置按钮、带有边框半径和居中的 div 的基本样式、点击处理程序、DOM 操作来设置值。

随机颜色：选择一种随机颜色并将其设置为页面的背景颜色。

学习目标：与上面的方法类似，只需添加数组并从中随机选取一个元素即可。你也可以使用诸如 fill() 之类的数组方法进行改进。

密码强度：检查密码强度（弱、好、强）。

学习目标：设计密码框，处理关键事件。

敲门：用 CSS 和图片创建三扇门。点击每扇门都会发现一些惊喜。

学习目标：CSS 动画、DOM 操作、基本 CSS、UX。

石头剪刀布：一款非常流行的至少 2 人游戏。

学习目标：展现构建良好用户体验、布局、逻辑分支的创造力。

移动球：使用布局知识移动球（或任何其他对象）。就像使用 CSS Flexbox 属性一样，您可以在 UI 中的不同位置移动对象。

学习目标：CSS 布局和 FlexBox，JavaScript DOM 应用样式。

井字游戏：我们都知道它是什么。一个简单的X和O游戏。

学习目标：UI 布局、JavaScript 逻辑。同样，你可以制作一个 Web 计算器。

调查表：表单中的一组输入字段，用于接受用户输入。点击“提交”按钮即可提交调查。

学习目标：HTML 表单、表单处理、表单操作、使用 CSS 进行布局对齐。

列出宝可梦：调用API获取宝可梦信息，并按您想要的方式列出它们。您可以扩展同一项目，添加搜索/查找宝可梦的功能。

学习目标：CSS 布局，使用 fetch 进行 API 调用。

在线宠物商店：这是一个更高级的项目，用于构建一个在线宠物商店。列出宠物的详细信息，包括图片和其他描述，例如名称、类型和价格。允许用户将宠物添加到购物车并使用虚拟付款结账。

学习目标：CSS 布局、处理来自本地存储的 JSON 数据、本地存储 Web API、JavaScript 支付 Web API、单页应用程序。

我可以继续写下去，但那样的话，这篇文章篇幅会很长。如果您有兴趣讨论这些项目或其他项目想法，欢迎在 Twitter 上私信我。欢迎随时联系我。

3. 不要成为“框架偏见”的开发人员

让我们列出五大基于 JavaScript 的 Web 开发框架/库。你最喜欢的一个我很可能已经介绍过了。

反应
角度
Vue
苗条
Next.js（嗯，基于 React，但值得单独提及）

CSS 方面？

顺风
引导
布尔玛
实现
基础

你可能喜欢其中一个或多个，但不要对此抱有偏见。我所说的偏见是指你很早就形成了“这就是你应该一直使用的框架/库”的观念。有时，偏见也会迫使别人认同你的观点。

作为初学者，要对新知识保持开放的态度。选择并学习你遇到的新事物。你总会有自己喜欢的，但这不应该成为你尝试新事物的障碍。保持灵活性能让你从职业生涯的早期阶段就开始尝试并为各种开源项目做出贡献。

4.记录你的进步和学习

记录事情并不令人兴奋（至少与编码相比）。然而，这是一个有价值的部分，投资回报率很高。我建议记录进度（旅程）和学习过程。

记录进度的一个有效方法是加入一个像Twitter 上的#100daysofcode这样的自我投入挑战，让全世界知道你的进步。这也有助于与志同道合的人建立联系，获得反馈，并激励自己继续前进。

你也应该记录你的学习成果。用任何适合你的形式都行。我建议用 Markdown (MD) 格式做笔记，这样更容易将草稿重新整理成博客文章。

记笔记，并时不时地回顾，就像随心所欲地更新你的学习成果一样。我希望你现在就开始这样做，如果你已经开始了，那就太棒了！

5.练习，练习，......，练习

要想学得更好，除了实践之外别无选择。Web 开发也是如此。你需要分配时间去练习。理论知识只能走几里路，但实践才能走得更远！

以下是我对任何新概念进行逻辑实践的五点原则，

选择一个主题来学习。如果能把它分解成更小的主题就更好了。
从所有你喜欢的资源中学习相关知识。如果有循序渐进的教程可以练习，那就照做吧。
根据学习成果创建示例。最小的最好。示例可以有多个。
为每个目标创建 GitHub 项目。开始实施。
遇到困难了吗？重新回顾主题，学习新知识，继续完成项目。然后前往下一个主题。

结论

Web 开发是一个令人着迷的技术领域。在探索、学习和创造的过程中，你会享受其中的乐趣。希望本文分享的技巧能对你有所帮助。请在下方评论区留言告诉我。如果您有任何疑问，也请随时提出。请点赞/分享这篇文章，以便让更多人看到。封面图片中的开发者插图使用了来自subpng的免费艺术作品。

让我们联系吧。我也在这些平台上分享我在 JavaScript、Web 开发和博客方面的学习经验。

祝您在 Web 开发之旅中一切顺利💪。

鏂囩珷鏉ユ簮锛�https://dev.to/atapas/5-tips-for-beginners-to-web-development-5bm0