如何在2021年学习Web开发-Web开发人员路线图

2020年12月30日10:48:47 发表评论 54 次浏览

本文概述

有一些针对Web开发人员的出色路线图。但是有些选择会让你在上手之前就解决了一个"难题", 因为你必须做出多种选择。

当我开始学习Web开发时, 希望我能找到一个经验丰富的开发人员, 他会告诉我他们成为Web开发人员所做的事情。不幸的是, 我找不到任何人。

现在我已经在该行业工作了4年, 我想与你分享我将在2021年开始学习Web开发的方式。在本文中, 我将向你展示从初学者到成为一名新手的每个步骤。开发人员。

我将从一些开始基本工具你应该知道的, 然后覆盖编程语言和图书馆/框架你需要学习成为前端或全栈开发人员。

我也会谈论一些示例项目你可以建立以练习你的技能。

如果你喜欢视频, 可以在这里查看

你也可以找到更新的路线图在我的网站上。

成为Web开发人员所需的工具

如何在2021年学习Web开发-Web开发人员路线图1

我假设你是一个初学者。在这种情况下, 进入编程之前, 你需要了解一些工具。

VS Code(或其他代码编辑器)

首先, 你应该学习如何使用Visual Studio程式码, 这是源代码编辑器。它是一个免费而强大的工具。

一开始, 我建议你学习一些基本的快捷方式并安装一些扩展, 例如ESlint, Prettier或Live Server。

这是一个免费的全长课程在notlogy YouTube频道上进行操作。

命令行

接下来, 你需要了解命令行。你应该了解它是什么, 以及一些基本命令, 例如如何在目录中移动, 如何创建新目录或如何创建新文件。

这是一篇很棒的文章如何使用Bash, Linux命令行。这是一个可以帮助你的人更有效地使用命令行.

版本控制-Git和GitHub

无论你做什么, 作为开发人员, 你都需要了解吉特。 Git是用于跟踪更改的版本控制系统。通常与的GitHub, 这是一个代码托管平台。

刚开始时, 学习Git可能会让人不知所措, 因此你只需要了解一些基础知识, 例如如何创建新的Git。资料库, 如何克隆一个项目, 如何做一个新的承诺以及如何拉和推新的变化。

练习Git的最佳方法之一就是团队合作。在那里, 你需要知道如何创建一个新的科, 怎么做拉取请求, 以及如何解决冲突.

这很棒Git和GitHub速成班在notlogy YouTube频道上, 可以进行版本控制。

设计工具-Figma

最后一个工具是菲格玛。 Figma是一种设计工具, 可供个人免费使用。但是在这里我想谈谈如何使用Figma作为开发人员。

作为开发人员, 你可能会从团队中的设计师那里获得设计。使用Figma, 你可以检查元素的代码并测量布局。因此, 你需要了解如何阅读Figma设计, 例如如何正确设置颜色, 版式或间距。

这是一篇关于各种设计工具, 包括Figma。这是一个有趣的教程, 关于在Figma中创建3D草图.

好的, 这些是你入门时需要了解的工具。你不需要了解所有事情, 但请确保你了解基础知识, 以便在学习编码的同时可以进行改进。

Web开发人员应学习的编程语言

如何在2021年学习Web开发-Web开发人员路线图2

HTML和CSS

接下来, 让我们继续编程语言。让我们从谈论开始响应式网站.

自适应网站是看起来不错并且可以在所有设备或屏幕尺寸上使用的网站。你可能已经知道, 建立一个响应式网站非常重要, 因为如今人们使用了许多不同的设备。

因此, 让我们跳到构建网站需要了解的前两种语言:的HTML和的CSS.

的HTML代表超文本标记语言。它用于为你的网站构建框架。 HTML并不难学习, 但是你可能希望更多地关注HTML表单, 因为它们将在将来成为基础。

的CSS代表级联样式表。这是一种标记语言, 但我也认为它是一种编程语言。 CSS不一定难学, 但很难掌握。

你需要关注的主题很少:

  • 箱型-边距, 填充和边框如何协同工作。
  • CSS单位-用于表示长度(例如rem, vh和vw)。
  • 位置- 指定定位方法的类型。它还使许多人感到困惑, 因此请确保你花一些时间在上面。
  • 变量- 要么自定义属性是可以在整个文档中重复使用的实体。这是我在CSS中最喜欢的功能。它们使使用CSS变得非常有趣, 你只需几行代码即可创建主题。
  • 媒体查询-决定要在不同屏幕尺寸上显示的内容。它们是响应式设计.
  • 动画-让元素从一种样式更改为另一种样式。如果你知道如何正确使用动画, 那么它将使你的网站脱颖而出。否则, 它将使你的网站看起来不专业, 因此请小心。
  • Flexbox, CSS网格-用于构建自适应布局(我忘记在视频中提到这一点)。

这是完整的手册它将教你HTML的所有基础知识。这是一个完成CSS课程在notlogy YouTube频道上, 你可以开始美化自己的网站。

当你了解HTML和CSS的基础知识时, 下一步就是构建一些基本网站。例如, 你可以尝试主页, 表单例如登录页面或结帐页面。你甚至可以建立一个作品集。你可以在以下位置找到示例项目DevChallenges.io.

网站部署

建立网站后, 你需要将其放到互联网上, 以便人们可以看到它。部署是将代码部署到托管平台的过程。

在过去, 这要困难得多。但是现在, 这非常简单, 你可以使用诸如GitHub页面, Netlify, 要么Vercel.

这是一个完整的YouTube课程关于如何使你的网站在线涵盖从头到尾的整个过程的信息。

JavaScript-基础知识

好了下一个话题是的JavaScript。 JavaScript是一种流行的编程语言, 除其他外, 广泛用于Web开发。

你将需要学习该语言的一些基本功能, 例如资料类型, 循环和 有条件的.

然后, 你将要深入探讨一些主题。

首先, 我们有调试。这是查找和修复错误的过程。这是一个深入的bug压缩指南让你开始。

然后还有其他主题, 例如对象, 原语和数组。特别是在使用数组时, 你需要了解数组方法也一样

函数是程序中的主要构建块。因此, 请确保你不要忽略它们。

我最喜欢的JavaScript功能之一是 解构–它易于编写, 并且使该语言超级强大。

像C#, Java或其他编程语言一样, 在现代JavaScript中, 我们也有类。当涉及到面向对象编程和SOLID原理.

而且, 无论你的编程水平如何, 脚本中都会出现错误。这意味着你要知道关于错误处理以及.

异步编程很重要, 尤其是在需要与服务器通信时。所以花一些时间来学习承诺和异步/等待.

JavaScript-浏览器

让我们继续介绍如何在浏览器中使用JavaScript。

首先, 你需要知道文档对象模型orDOM是。然后, 你需要知道如何获取元素, 如何更改类或如何使用JavaScript更改样式。

这很好JS DOM简介, 这是关于如何操作DOM(你将通过构建项目来学习)。

你还需要了解不同用户界面事件例如点击, 鼠标悬停, 鼠标悬停等。

而且, 你还需要更多关注形式在JavaScript中因为它们有许多事件和属性

JavaScript-其他功能

的 提取API是一个重要的话题。它使你可以将网络请求发送到服务器。例如, 当我们需要提交表单或获取用户信息时, 这很有用。

另一个重要的话题是储存资料在浏览器中。在这里, 你需要了解Cookies, LocalStorage和sessionStorage之间的区别。

刚入门时, 其他不太重要的主题是正则表达式, Web组件和Websocket。

常用表达用于搜索和替换文本。Web组件, 是新事物, 但你应该彻底检查一下。

最后, 我们有网络套接字。当你需要像聊天应用程序中那样进行连续数据交换时, 它们很有用。

因此, 学习Javascript之后, 你可能需要花一些时间来学习关于TypeScript。我喜欢TypeScript, 因为它在编写代码时给了我安全的感觉。

TypeScript提供静态类型, 使你可以在调试过程的早期捕获错误。它还可以在代码运行之前发现错误, 从而节省你的时间。

这是关于TypeScript类型帮助你以正确的方式考虑它们。

你可以在这里停止并开始从事一些项目。但就我个人而言, 我将继续学习至少一个框架。然后, 你可以同时练习JavaScript。

好吧, 让我们继续前进。

需要了解的图书馆和框架

如何在2021年学习Web开发-Web开发人员路线图3

要成为前端开发人员或全栈开发人员, 你需要了解其中的一些库和框架。

前端开发人员的库和框架

因此, 让我们开始萨斯, 这是一种预处理器脚本语言。我几乎在每个项目中都使用Sass。它使CSS看起来更干净, 并且开发速度更快。

这是一个Sass的全部课程它将教你如何赋予CSS超能力。

接下来, 我们有NPM这是JavaScript编程的软件包管理器。这使你可以在计算机上快速安装不同的软件包。

这很好NMP初学者指南这将帮助你立即开始下载软件包。

我后悔之一是我不知道有满足感早点Contentful是无头内容管理系统或CMS。它与传统的CMS不同, 因为你可以将数据存储在Contentful中并将其用于前端。

要获得前端工作, 你需要至少了解一个前端框架。我个人会选择React。稍后我们将讨论其他框架。

除了学习React的基础, 你还想注意如何州在React应用程序中进行管理以及如何形式在React中工作。

一旦学习了一些基础知识, 就可以通过使用React构建大量项目来巩固自己的技能在本YouTube课程中.

我的另一个遗憾是我不知道Next.js早点Next.js用于服务器端渲染or生成静态网站。是的, Next.js仍然很新, 但是我确实相信这是我们的技能必须作为React开发人员。

你可以在中了解所有Next.js基础知识这本深入的手册.

学习完这些工具后, 你可能还想看看材质用户界面这是一个React组件库, 或者尾风CSS例如, 这是一个CSS框架, 可帮助你加快原型制作或自由职业的工作。

因此, 在学习JavaScript和框架之后, 你需要实践通过建设项目。

你可以从构建一些简单的可重用组件开始, 以了解React的工作方式。然后, 你可以构建更复杂的应用程序, 例如测验应用或一个待办事项.

之后, 你将需要构建更加困难的应用程序, 例如求职工具一种博客, 或一个文件页面。同样, 你可以在以下位置找到示例项目DevChallenges.io.

全栈开发人员

现在你已经准备好申请前端开发人员工作。如果你想继续成为全栈开发人员, 可以从学习Node.js和表现.

在这里, 你需要如何构建一个RESTful API你可以使用MongoDB使用数据库时。当你已经了解JavaScript时, 这很容易学习。

之后, 如果你想了解更多, 可以调查GraphQL这是API的数据查询和操作语言。我个人也会花一些时间学习PostgreSQL的。与MongoDB相比, 你需要学习起来有点困难了解SQL也一样

学习完这些工具后, 你可以通过构建诸如图片上传器, 认证方式, 要么聊天室。你也可以在以下位置找到这些项目开发挑战.

现在, 你可以申请全职职位了。如果你的工作需要你知道Vue.js, Angular甚至斯维尔特你也可以花一些时间来学习这些工具。一旦你已经了解了React, 它应该不会太困难。

路线图到此结束。希望对你有帮助。我2021年的目标之一是制作有关我们刚才谈到的每个主题的视频。因此, 别忘了检查我的YouTube频道和DevChallenges学习.

__________🐣关于我__________

  • 我是的创始人开发挑战
  • 订阅我的YouTube频道
  • 跟着我推特
  • 加入不和谐
一盏木

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: