2021 年成为一名前端 Web 开发人员 你在这里，所以你属于这里 ❤️

2025-06-10

2021 年成为一名前端 Web 开发人员

你在这里，所以你属于这里❤️

你在这里，所以你属于这里❤️

我知道很多人想学习网页开发或编程，或者认识一些想学习编程的人。也许你不敢迈出这个大胆的一步，也许你觉得编程很难，不确定自己是否适合。也许你不敢打开代码编辑器开始编程，因为你担心自己会卡住而失去动力，或者你不知道在浩瀚的知识​​海洋中该从何入手。我在这里告诉你——你一定可以！我们一起渡过难关！

在本文中，我将深入探讨相关资源、入门建议以及一系列资源，助您学习成为一名 Web 开发者。本计划将侧重于帮助您找到工作，因此会侧重于项目。

揭穿阻碍你前进的一些迷思

  1. 您不需要昂贵的笔记本电脑或设置。
  2. 您不需要花费大量金钱就可以开始。
  3. 您不必上大学就可以成为一名 Web 开发人员。
  4. 您不需要达到特定年龄才能开始。
  5. 在申请工作之前，您不需要了解所有技术。

入门：您需要的东西

  1. 设备
    • 电脑
    • 互联网连接
    • 代码编辑器。一些选项包括：
      • Sublime Text
      • 原子
      • Visual Studio
      • Webstorm
      • 括号
    • 网络浏览器。一些选项包括：
      • 谷歌浏览器
      • 火狐浏览器
      • Safari
      • 边缘
  2. 财政
    • 提供免费和付费选项
  3. 时间承诺
    • 随心所欲
    • 建议：每周 2 - 4 小时

  4. 自理

    • 写下你的肯定句清单。以下这些肯定句能帮助你度过这段旅程：
      • 你已经足够聪明，可以成为一名 Web 开发人员。
      • 你有能力做出令人惊奇的事情。
      • 你可以让事情发生。
      • 只要你下定决心，你就能做任何事。
      • 你很有能力。
      • 您的创造力将帮助您在这次旅程中取得成功。
    • 休息日：每周至少给自己一天时间休息充电。我爱休息日！这些天我会“滋养自己”，享受“我的时间”。我通常会画画、徒步旅行、做一些有创意的事情、做一个DIY项目、和朋友们出去玩、小憩、睡个懒觉、看《老友记》、喝一整天的印度奶茶，或者看一部温馨可爱的电影。

  5. 成就清单：随着你在这一旅程中不断进步，请记录下你已完成的成就。清单上的事情可以小到按时完成一个章节，或者解决一个棘手的编码问题。每件事都很重要！这份清单是你正在成长的证明！

  6. 灵感来源：

    • 激励您的人的列表。
    • 写下这些人的哪些方面给你带来了启发。
    • 联系几位这样的人，让他们知道你即将踏上的旅程，看看他们是否愿意伸出援手。大多数人都乐意提供力所能及的帮助和支持。

  7. “酷炫项目创意”列表：这些创意将激发您构建酷炫事物的灵感。创意可以是任何内容——您一直想开发的应用程序、您希望在应用程序中看到的改进，或者您想生成的搞笑表情包机器人。我们将使用此创意列表来构建项目。以下是一些示例：

    • 狗图像生成器
    • 音乐播放器应用
    • 番茄钟
    • 随机笑话生成器
    • 猫图片生成器
    • 一款显示世界各地时间的应用程序

  8. 支持小组：

资源

  1. 在线资源

  2. 训练营

  3. 图书

  4. 播客

  5. 拥有精彩文章的博客网站

  6. 清单和路线图

付费资源

  1. 在线资源

  2. 图书

训练营流程

  1. 技能：从您选择的资源中学习基础知识：

    1. HTML
    2. CSS
    3. JavaScript。

  2. 项目：使用你目前学到的技能（JS、HTML、CSS）创建一个作品集网页。该网页应包含以下内容：

    1. 使用语义 HTML 添加您的姓名、照片和简历
    2. 设置项目版块。我们会在进行过程中填写这些项目。项目将包含图片、描述和链接。目前，请使用lorem ipsum 文本进行设置。

  3. 技能：学习 Git 和版本控制。这里有一个教学视频

  4. 项目：

    1. 将您的作品集添加到 GitHub。
    2. 升级作业：设置 Github 页面来托管你的作品集。这里有一个教学视频

  5. 技能：提升你的 JS 和 CSS 知识

  6. 项目：让您的投资组合适合移动设备并做出响应。

  7. 项目：准备求职面试

    1. 在InterviewCake上练习面试问题。
    2. 在Leetcode上练习面试题。从简单的开始，慢慢提高难度。

  8. 技能：挑战自我——学习一个前端框架。React

    、Vue 和 Angular 是 2021 年最热门的前端框架。如果要选一个，我推荐React。很多公司在生产环境中使用 React。

  9. 项目：实施框架——激发灵感。将其添加到你的作品集。任务：

    1. 获取您选择的 API。
    2. 在您的应用中呈现数据。
    3. 实现搜索功能。
    4. 实现自动完成功能。

  10. 技能：加强挑战：学习框架的库。

    1. 学习一个状态管理库。Redux是一个值得学习的库。
    2. 学习 CSS 库，例如：SASS

  11. 项目：利用图书馆来实现你的下一个灵感创意。添加到你的作品集。

  12. 技能：学习一个测试框架：构建测试覆盖率。添加到你的作品集。例如：Jest

  13. 工作：利用你的作品集找一份自由职业。Upwork和Fiverr等平台可以找到自由职业机会。

  14. 寻找导师。获取关于你的技能和作品集的反馈。

  15. 工作：申请工作。你已经准备好了。

  16. 工作：准备面试

  17. 继续迭代。

课程

HTML

CSS

  • [ ] 使用以下方式将 CSS 样式表添加到 HTML 页面<link>
  • [ ] CSS 选择器文章
  • [ ] 彩色文章
    • [ ] 使用十六进制，例如：#ff0000
    • [ ] rgb 例如：rgb(0,0,255)
    • [ ] 常见颜色名称，例如：red, pink, brown
  • [ ] 字体文章
    • [ ] 家庭
    • [ ] 尺寸
    • [ ] 重量
  • [ ] 文本修饰文章
  • [ ] 文本转换文章
  • [ ] 行高文章
  • [ ] 字母间距文章
  • [ ] 字间距文章
  • [ ] 背景颜色文章
  • [ ] 背景图片文章
  • [ ] 边注文章
  • [ ] 填充文章 文章
  • [ ] 边界文章
  • [ ] 宽度文章
  • [ ] 高度文章
  • [ ] 百分比、像素、em
  • [ ] 盒子模型文章
  • [ ] 伪类文章
    • [ ] 悬停
    • [ ] 积极的
    • [ ] 访问过
  • [ ] 职位文章
    • [ ] 相对的
    • [ ] 绝对
    • [ ] 固定的
  • [ ] 显示文章
    • [ ] 堵塞
    • [ ] 排队
    • [ ] 网格
    • [ ] 没有任何
  • [ ] class 与 id文章

JavaScript

基础知识

网页和 JavaScript

  • [ ]document.getElementById
  • [ ]document.getElementsByTagName
  • [ ]document.getElementsByClassName
  • [ ]document.getElementsByName
  • [ ]document.querySelector
  • [ ]document.querySelectorAll
  • [ ].createElement
  • [ ].innerHTML
  • [ ].innerText
  • [ ].append()
  • [ ].remove()
  • [ ].appendChild
  • [ ].style
  • [ ]events
    • [ ].addEventListener
    • [ ].removeEventListener
    • [ ]event.preventDefault

Web 基础知识

  • [ ] 网络是如何运作的？文章
  • [ ] 网络浏览器是如何工作的？文章
  • [ ] HTTP 基础知识视频
    • [ ] 标题
    • [ ] 要求
    • [ ] 回复
    • [ ] 动词：PUT、POST、DELETE、PATCH、POST
  • [ ] 什么是 API？视频
    • [ ] 什么是 REST API？文章
    • [ ] 什么是 GraphQL API？文章 播客
    • [ ] 什么是 CRUD 操作？文章
    • [ ] 什么是cookies？
      • [ ] 获取和设置 Cookie
    • [ ] 什么是本地存储？
    • [ ] 什么是会话存储？
    • [ ] 什么是服务器与客户端？
    • [ ] 什么是域名？
    • [ ] 什么是 DNS 查找？
    • [ ] 什么是网络托管？
    • [ ] 什么是 CORS？文章 文章
    • [ ] ARIA - 什么是无障碍？文章 视频

升级：选择一个堆栈（前端 vs. 后端）

根据您的兴趣和热情，您可以选择专注于前端开发或后端开发。前端开发是指用户界面的开发，使用 HTML、CSS、JavaScript 等技术。如果您专注于前端开发，则可能需要关注 React、Redux、SASS 等框架和库。
后端开发是指开发用于简化用户界面（例如构建 API）的软件，并使用 NodeJS 等后端技术。对于后端开发，您可能需要关注 MongoDB 等数据库以及 NodeJS、Express 等框架和库。

要查看完整的升级课程列表，请在此处查看完整的 Web 开发清单

求职技巧

  1. 使用您的网络
    • 在 LinkedIn 上
    • 在推特上
    • 在聚会中
    • 朋友和家人
  2. 在求职申请中展示您的作品集。
  3. 申请那些你并非 100% 有资格胜任的工作。
  4. 为每个职位发布量身定制简历。

面试资源

  1. 采访蛋糕
  2. Pramp.com
  3. LeetCode

我是谁？我的故事是什么？

我是 Shruti Kapoor，在 PayPal 担任高级软件工程师。我从事 Web 开发工作已经超过 7 年。最初两年，我以自由开发者的身份工作，之后担任我的 Web 开发初创公司 World Web Warriors 的联合创始人兼首席技术官，之后在加拿大温哥华的 TELUS Communications 担任专业 Web 开发工程师三年。2017 年，我搬到了阳光明媚的美国加利福尼亚州，开始在旧金山的 PIX Systems 担任软件工程师。这 7 年对我来说意义非凡。这些年来，我仍然清楚地记得那些被眼前的技术问题弄得不知所措的时刻，那时我完全不知从何下手。

成为一名 Web 开发者真的很难，而且会感到非常孤独。有些时候你会觉得自己不属于这里。说实话，有些时候我会质疑自己成为软件工程师的决定，质疑自己是否足够优秀。但相信我，正是这些时刻会让你进步——不仅因为它能帮助你坚持下去，也正是这些时刻，让你体会到克服内心深处的恐惧、踏上深水的喜悦。

Shruti Kapoor
在 Twitter 上关注
在 Twitch 上闲逛
在您的收件箱中获取类似文章

鏂囩珷鏉由簮锛�https://dev.to/shrutikapoor08/free-bootcamp-becoming-a-front-end-web-developer-in-2021-and-getting-a-job-as-a-web-developer-1kk6
Devto 翻译
PREV
帮助 Web 开发人员保持更新的有用免费和付费资源
NEXT
✨ 如果您正在使用 Auth Provider，请先执行此操作🧙‍♂️🫵