本文概述
你想如何在世界领先的公司工作, 同时通过优美的前端开发产生影响？
对现代网络杰出艺术家的需求很高, 本指南将向你展示入门方法。
而且, 由于使用该软件的人员是最受好评的人, 因此你值得考虑使用这项新技能。你永远不会知道, 它最终可能会为你变成职业。
本指南的第一部分致力于回答有关前端开发的紧迫问题。如果你了解担任前端开发人员的职责, 薪水和其他方面, 则可以跳过第二部分。本指南的第二部分专门介绍资源, 教程和技巧。
什么是前端开发？
前端Web开发是使用HTML, CSS和JavaScript创建独特的Web应用程序的实践。网站, 移动网站等应用程序, 以及移动应用程序和渐进式Web应用程序。
你也可以这样想, 你浏览的每个网站(包括该网站)都是由前端开发人员以某种方式构建的。至少在客户端。
曾经需要大量工具和框架的现在可以使用本机规范来完成。
前端是网站开发中最容易访问的路径之一, 但它也可能是最具挑战性的路径之一。
创建网站的技术一直在变化, 这意味着开发人员必须定期使自己的技能适应最新的实践。对于初学者来说可能很累, 但经过一两年的可靠开发实践后会变得更好。
你可以免费学习前端开发吗？
你绝对可以！
学习网络开发变得越来越容易, 这主要归功于大量新资源, 教程和开源项目的涌入。
诸如freeCodeCamp之类的项目正在帮助数以百万计的人为其第一个程序编写代码。 freeCodeCamp博客中充满了激动人心的文章, 不仅涉及前端, 而且涉及Web开发的其他方面。值得收藏！
看起来复杂吗？实践变得更容易！
虽然本指南的目的是帮助你免费学习, 但我们不能忽视付费课程的好处。
那里有很多初创公司迎合了确定的人群, 我们将重点介绍一些令人惊叹的课程平台, 这些平台甚至最终都可以为你提供证书。
前端开发人员的平均工资是多少？
如果有经验, 那么有前端经验的前端开发人员如果居住在美国, 则可以每年带回家超过100, 000美元。
这个数字不错！
初级开发人员的期望收入为$ 60, 000以上。
欧洲的工资似乎也很合理。德国的平均年收入为50, 000美元。
值得一提的是, 近年来远程工作的普及率呈爆炸式增长, 这意味着开发人员正在寻求使他们的整体薪酬达到国际标准。这更是考虑成为前端开发人员的原因！
如何找到前端开发人员的工作？
从技术上讲, 工作应该是最后要谈论的事情。首先, 你必须积累技能, 然后考虑潜在的机会。但是, 由于本帖子仅供参考, 因此你可以随时回来查看本节以供参考。
远程工作正以前所未有的速度增长。毕竟, 谁不喜欢在家工作, 甚至更好地从海滩工作的想法？
以下是前端开发人员最受欢迎的工作板列表：
- 正宗的工作
- GitHub工作
- 前端开发人员职位
- CSS技巧工作委员会
- CodePen工作委员会
- 堆栈溢出作业
- 远程确认
- 远程友好的启动
- 工作游牧民族
- Jobspresso
- 黑客新闻招聘
这是一个简短的网站列表, 为你找到下一个前端工作提供了建议。你还有其他选择是进行个人项目, 以期使其盈利或花费时间从事自由演出。
资源：从哪里开始。
以下资源都是有关入门的。在这方面, 我们正在采取合理的线性方法。出于简单的原因, 那里有大量的资源。
为了让你快速入门, 我们的重点是编织在现代工作流程中的平台和前端工具。因此, 你可以在学习基本代码到中间编码语法的同时, 了解控制现代开发人员工作流程的工具。
强烈建议你花些时间使用这些资源, 因为它们将为你准备本指南第二部分中提供的课程和教程。
密码学
如果你花了几分钟来查找学习编码的资源, 那么Codecademy无疑将是你的第一选择。这个学习编码的平台是众所周知的, 在过去七年中已经为超过1亿人服务。
当时, Codecademy凭借其动态和交互式编码界面而具有革命性意义。尽管许多人都走同样的路, 但Codecademy保持了一致的记录。
如今, 你可以在完成时获得证书, 并且许多人已经使用了该证书来在顶级初创公司找到工作。作为初级开发人员, 不少。
一直以来, 有人认为Codecademy是不够的。
从经验丰富的开发人员的角度来看-当然, 这个平台可能太简单了。但是, 如果你只是在学习前端开发, 那么没有比按照逐步说明获得实时结果更令人满意的了。
Codecademy提供有关HTML5, CSS3, SASS, Python, JavaScript, Ruby, SQL和Java的类。
了解CSS布局
作为前端开发人员, 你将花费合理的时间来处理布局。布局是你用来构建网站的画布。此博客文本位于行内, 该行是较大容器的一部分。
这适用于所有网页设计。使用”学习CSS布局”, 你可以基本了解容器和行的工作方式, 以及如何将内容准确地定位在所需的位置。
你可以探索的其他工具分别是用于Flexbox基础的Flexbox Froggy和用于Grid基础的Grid Garden。
布局是一个相当重要的主题, 因此请花大量时间深入了解你的布局经验。最好的学习方法是通过练习。
Bootstrap
了解布局的工作原理之后, 就该进行一些具体的实验了。当然, 你可以继续尝试将自定义UI开发为你的第一个项目, 但是这可能会吓跑你, 而不是鼓励你继续。
因此, 你需要了解一两个框架。框架是开始任何类型的Web开发的简单方法。你将获得在第一天就开始构建交互式网站的工具和文档。 Bootstrap是有史以来最好的方法之一。
利用世界上最受欢迎的前端组件库, 在网络上构建响应式, 移动优先的项目。 Bootstrap是一个用于使用HTML, CSS和JS开发的开源工具包。
Bootstrap在整个Web上得到了广泛的使用, 毫无疑问, 它是世界上最流行的前端框架之一。
哎呀, 你每天访问的网站中有很大一部分都在使用某些Bootstrap功能。
关于Bootstrap的奇妙事情之一就是你可以快速入门。文档页面包含示例和用例。最重要的是, Bootstraps布局系统在设计时就考虑了响应式设计。因此, 基于Bootstrap的网站会自动移动友好。
并且, 如果你喜欢Bootstrap所提供的功能, 那么这里是流行的前端框架上的其他资源：
- 你应该知道的10个最佳JavaScript框架
- 适用于前端开发人员的10个最佳CSS框架
前端清单
尽管使用了构建网站的技术, 但仍必须遵守某些规则和规定。当然, 可以选择忽略这些要求, 但这是以用户体验和数字兼容性为代价的。
前端清单是一个出色的工具, 你可以在其中提供网站URL, 平台会审核你的网站以获取前端开发中的最佳实践。这包括检查你是否优化了图像或是否遵循最佳SEO做法。
只要你需要了解专业网站和应用程序的现代要求, 就应该尝试使用该应用程序。此外, 非侵入式且流畅的用户界面非常令人愉快。
Vue.js
Vue.js是一个很好的示例, 它显示了一个小想法/概念如何发展成为世界上最受认可的事物之一。确实, Vue.js席卷了前端社区。
这个渐进式框架可帮助开发人员使用HTML和JavaScript构建出色的用户界面。
该框架完全由社区支持-在财务和发展方面。
这是开源如何融合在一起并使伟大的事情发生的完美示例。而且, 作为前端开发人员, 你应该研究更多有关开源的知识以及它为什么如此重要。
以下是有关Vue.js的一些强烈推荐的读物：
- Vue.js初学者教程
- Vue.js：优点, 优点和缺点
- 与Vue.js相关的精选精彩清单
- Vue JS –完整指南
最后但并非最不重要的一点是, 在Vue.js Showcase网站上查看使用Vue.js构建的不同项目。
前端基础知识
到目前为止, 我们观察到的所有内容大部分都是免费和开源的。你所需要做的就是抓住自己的Sublime Text, 并且可以很好地进行前端实验, 而且绝对可以！阅读教程和框架文档只是成功的一半。
真正的学习发生在你的文本编辑器和浏览器中。这种方法的唯一缺点是, 它不是完全系统的。你采用的是”免费提供”模式, 结果可能会因你自律的能力而异。
除非你决定投资并通过投资, 否则, 我的意思是花象征性的金额从A Book Apart购买任何前端书籍。这些家伙是业内最好的一些, 资深的前端开发人员反复推荐他们的书。
前端基础知识部分有一本有关SVG, CSS, HTML, JavaScript和Sass的书, 这是现代前端工作流的理想起点。
的github
GitHub是你进行所有内容编码和开发的数字办公室。它是世界上最大的开源平台, 拥有世界上大多数最受欢迎的框架和工具。
使用GitHub, 你可以托管你的项目, 并欢迎其他人提交他们的文稿。你也可以自己向其他项目提交文稿。
你还可以浏览GitHub及其提供的所有内容。例如, GitHub是著名的Awesome列表的所在地, 这些列表是大量的教程, 资源, 工具以及针对特定框架和技术的其他内容的集合。
例如, 超棒的前端列表, 其中包含有关前端及其前进方向的最新信息。
堆栈溢出
Stack Overflow是世界上最严格的问答编程站点, 因此而臭名昭著。确实是这样。
Stack Overflow的用户不会轻易提出尚未研究或适当分析的问题。尽管这可能令人反感, 但它有助于营造强烈的目标感。
你会看到, 每当一个用户提交问题答案时, 其他用户都可以挺身而出并投票赞成该答案。最后, 你会获得几个”已验证”的答案, 可以彻底回答用户的问题。结果, 站点的层次结构保持清晰一致。
作为初学者的前端开发人员, 你将需要使用Stack Overflow来理解某些主题, 还可以询问是否必须这样做。但是, 对于大多数初学者来说, 你应该能够在几秒钟内找到简洁的答案。
教程和课程：掌握生态系统。
第一部分完全致力于可帮助你入门的资源和平台。你应该在我们列出的每个资源上花费合理的时间, 以便你可以对前端开发的期望有实际的了解。
完成所有这些操作后, 你就可以将注意力转向教程和课程。这些是组织更严格的资源, 非常注重学习。
前端开发是工具, 框架, 库, 测试软件等的集合。但是, 不要让它的范围吓到你！
值得注意的是, 以下一些课程不是免费提供的。但是, 我们向你保证, 以下建议绝对是最重要的。
此外, 像Frontend Masters这样的平台将帮助你掌握世界上最成功的初创企业所使用的所有技术。
这篇文章的目的不是要作为一种兴趣来促进前端开发, 而是要为你提供明显的资源, 以便你可以利用自己的所有知识来建立自己的职业。
MDN网络文档
MDN(Mozilla开发人员网络)将使你相识。该Web文档平台完全致力于推广Web的工作方式。在这里, 你可以了解开发人员工具, Web技术和Web开发本身。
当你搜索CSS或HTML上的某些详细信息时, 通常是MDN成为Google和其他搜索引擎上的第一个结果。指南, 规范和整体见解的结构对于前端开发人员来说是有意义的。
edX前端课程
如本指南前面所述, 遵循严格的课程是学习和适应性的线性方式。为了让你开始学习这些课程, 你必须查看edX提供的内容。你不仅可以在完成课程后获得证书, 还可以按照自己的喜好学习。
edX课程结构清晰, 重点明确地放在帮助学生理解每个课程主题的基础上。目前, 你可以学习JavaScript, HTML5, CSS3等技术。
如果你希望获得完整的前端证书, 则必须进行$ 500的少量投资-但这也使你可以直接与课程讲师联系, 甚至更多。许多公司已经使用edX将其员工注册为该特定程序。
前端大师
前端大师类似于训练营的经验。你可以在此平台上找到非常全面的课程, 重点是长篇内容和面向项目的学习。
在这里, 你可以了解React, Vue, Angular, Node.js等技术。生产质量非常高, 因此你可以享受与实际的Bootcamp课程类似的体验。
作为注册用户, 你可以在”学习”页面上跟踪进度。该页面跟踪你的学习进度, 分别显示每种技术的百分比, 以及整个堆栈的百分比。这是保持动力的有趣方式。
最后但并非最不重要的一点是, 在你的履历表上完成Frontend Masters课程的学习不会被雇主忽视。
蛋头
Egghead与上面提到的平台非常相似, 但是在更加坚定和精练的课程中脱颖而出。例如, “使用ListViews在Flutter中构建动态列表”课程只有2分钟, 尽管它为你提供了足够的学习材料来真正理解该概念。
Egghead提供有关框架, 库, 语言, 工具和平台的教程和课程。想了解移动开发吗？没问题, Egghead的课程材料适用于iOS, Android和其他平台。
每年的定价是适中的250美元, 但这使你可以访问网站上发现的每门课程和教程。你还可以与其他社区成员讨论每节课。非常值得投资！
CSS技巧
Chris Coyier是CSS社区中的绝对传奇人物。他不仅与CSS-Tricks保持了10多年的合作关系, 而且还是CodePen的共同创始人。CodePen是Web开发人员的流行代码共享平台。
关于CSS-Tricks, 你可以指望的一件事是, 它始终保持更新, 并且根据当前流行的主题和技术来发布故事。因此, 你可以使用网站的许多作者提供的教程来快速提高技能。
简而言之, 这是一个有用的网站, 可保存你的书签并每天检查一次。你将从教程本身中获得巨大的价值, 并从中获得建议。
苏格兰人
Scotch既是学习资源, 又是Web开发最新动态的场所。自2014年以来一直存在-该网站吸引了成千上万的追随者, 以及成千上万的免费Web开发教程。
苏格兰作家非常关注Vue, React, Laravel, Angular, JavaScript, Node.js等技术。而且也不认为这些是一些入门教程。
在大多数情况下, 你将要构建真实且有形的应用程序。例如。你是否想学习如何构建Twitter克隆Vue和Adonis？没问题, 只要注册免费课程, 就可以开始了。
很棒的网站, 不能为任何新的和现有的前端开发人员推荐它！
提示：如果没有奋斗, 就没有进步。
既然你已经做到了这一点, 那么你不妨沉迷于以下一些技巧。尽管前端是一种有利可图的职业选择, 但它涉及到相当陡峭的学习曲线, 并且在围绕当前时间轴转动头时会感到相当头痛。
不过, 为了吸引你的机会, 这是值得的艰苦奋斗！
在理性中学习。
为什么要学习编程？你想找到更好的工作吗？你想建立创意网站吗？找出你的原因, 因为它将派上用场。当你将头撞在墙上时, 即使在几天甚至几周内, 它也会派上用场-质疑其中的任何一项是否值得。
找到你的部落。
你将需要与志趣相投的人至少建立一些联系, 甚至可能与导师建立联系。当我从旧学校的CS老师那里借了一本Pascal的书时, 他非常友好, 乐于接受帮助我解决可能遇到的任何问题的想法。通过查找本地社区或在线社区中的其他开发人员, 考虑类似的路线。当有人将手指指向你需要看的地方时, 学习起来会容易得多。
避免学习一切。
不必承担必须自己了解所有事情的负担。说到前端, 从HTML5和CSS3开始已经绰绰有余。 JavaScript就像锦上添花, 所以要小心获得多少糖衣, 因为这可能会might肿自己！熟悉基础知识后, 探索新领域, 主题和框架。小而紧凑的学习咬是这里的关键。
如果你想了解更多信息, 请阅读Ali Spittel的这篇文章, 其中她为新开发者分享了25多个技巧。
走出去
你在等什么？出去那里, 开始学习！确保每隔几个月复查一次有关前端开发的指南, 以获取新的更新和提示。
祝好运！
