Grow with AppMaster Grow with AppMaster.
Become our partner arrow ico

前端开发的基础是什么?学习完整指南

前端开发的基础是什么?学习完整指南

在现代世界中,越来越多的人想要学习如何编程,虽然他们不知道从哪里开始,但与此同时,IT 行业是他们梦寐以求的,因为当一名网络程序员现在很流行。对于很多人来说,它定位了进入这个奇妙世界的第一步,比如Web开发人员或初级前端开发人员,基础前端开发。但是,您需要先从某个地方开始,然后才能找到理想的工作。这里有一本初学者的知识书,让你得到一些答案:前端开发者有免费的课程吗?如何在线自学,在哪里可以找到掌握 HTML、CSS 和 JavaScript 的学习材料。如果您了解 HTML 和 CSS,您已经可以申请网页布局设计师的职位。

前端开发的基础是什么?

对于全新的人来说,进入网络编程世界可能很困难。如此多的概念听起来很奇怪,并且在写作阶段变得有问题。怎么写:软件开发者还是前端开发者?也许是前端开发人员,或者更确切地说是前端软件工程师?但是,最常见的是连字符条目。前端开发人员——负责应用程序视觉部分的人(我们所看到的,我们 = 网站的用户)。

通常,前端开发人员与提供图形设计的图形设计师(网页设计师)合作。通常,前端开发人员有机会与 UX 设计师合作,他们提出并创建将在网站上发生的交互原型。前端开发人员的角色是将它们放在一起。人们普遍认为,前端开发人员的任务是切割图形设计——将设计分成更小的部分,并将代码(HTML 和 CSS)编码成用户最终使用的网站。

然后,使用 JavaScript,添加了前面提到的交互。虽然 HTML 和 CSS3 允许我们创建平滑过渡和基本动画,但 JavaScript 引入了所有高级页面用户交互。使用 JavaScript,我们将添加下拉菜单、页面上的滑块、表单验证、子页面之间的转换或高级动画以及 3D 游戏(例如,使用 Babylon-JavaScript)。来自应用程序后端的 JavaScript 逻辑数据,因此是前端合作 - 后端开发人员。

前端开发人员职位会有很大差异。交互和创意机构的前端开发人员,软件开发公司的前端开发人员的工作看起来会有所不同,对于从事初创企业前端开发的人来说,工作也会有所不同.

一个前端开发者从切割图形项目可以发展为一个 JavaScript 开发者——一个主要处理编写应用程序逻辑和高级 JavaScript 操作的 web 程序员。此外,前端开发人员(以及后端开发人员)通常必须规划应用程序的 JavaScript 架构,并有意识地为项目选择框架和库。

前端开发容易吗?

  • 可以很快看到效果;与学习 Web 开发/后端开发不同,即使在纯 HTML 中创建代码片段也会立即给我们带来视觉效果,这会激励我们继续工作。
  • 入门门槛低——从一开始就在实习或初级职位开始职业生涯所需的前端技能相对较少。
  • 为大三学生提供了很多工作机会——尤其是在假期快到的时候,并且有很多暑期实习机会。
  • 独立——我们可以为自己创建网站,然后以自由职业者的身份接单。毕竟,在基本范围内,我们应该可以建立从头到尾的简单网站。

Front-end development无论如何,学习基础知识以达到令人满意的水平开始您的职业生涯将花费您几天到几周的时间。例如,如果你没有每天 5 个小时,而周末只有几个小时,那么至少六个月会派上用场。您将收到面向前端开发人员的课程。是的,这足以正确理解该主题。

前端开发需要什么?

这是成功的秘诀。要创建网站,您需要:

HTML + CSS

这些是构建网站的基本要素。 HTML 提供了网站的结构——所描述的元素,而 CSS 告诉浏览器这些元素应该是什么样子。一旦你掌握了 HTML 和 CSS,你就可以重新创建任何(图形)设计并将其变成一个网站。

JavaScript

一种用于创建网站的 Web 编程前端开发语言。多亏了 JavaScript,您为您的网站添加了交互性,即您开发了响应用户操作的网站。您甚至可以构建游戏。我们建议至少掌握基本的 JavaScript 代码以了解该语言的工作原理或 Web 编程语言逻辑。然后你可以去jQuery。

jQuery

从技术上讲,它不是一种语言,而是一个 JavaScript 库。就像一个中介,可以让您更轻松、更快地编写 JavaScript。你输入jQuery代码;该库担心您并与翻译器一起玩,将稍微复杂的 JavaScript 的含义传递给浏览器。虽然今天 jQuery “有点老了”,但我们建议“按需”学习它,它可以更容易地学习 Web 编程逻辑和 Bootstrap(使用 CSS 框架),并且仍然出现在工作机会中。

构架

他们的任务是通过为最常见的问题提供现成的解决方案来简化创建网站和应用程序的过程。此外,它们还提供了如何以整洁的方式开发代码的模式。对于初学者,我们建议选择一个 CSS 框架,例如 Bootstrap(其他选项有:Foundation、Pure、YAML CSS),然后添加当前流行的JavaScript 框架之一:Angular 4、ReactJS、Vue.js、Ember.js、流星.js。

吉特

这与网络编码没有直接关系,我们理解这通常会延迟到最后。错误地,越早开始使用版本控制系统Git越好。这就是我们提出的顺序。当然,你也可以完全不同:跳过 jQuery,在掌握 HTML 和 CSS 的基础知识后立即学习 Bootstrap;但是,我们建议您不要在简化方面走得太远,并且不要让自己从寻找手工编写的解决方案中走出来,不要使用框架中的预制件或学习 JavaScript 框架,而在纯 JavaScript 中几乎无法获得一行。

我从哪里开始前端开发?

定期学习,并尝试在实践中应用每一项新技能,即使是在只有一个目的的一小段代码中——展示你刚刚掌握的东西。在网络上分享它们。限制你在 Facebook 上的激励小组。仅仅阅读了 3 个小时的励志故事后,你的动力通常不会提高 3 倍。你的学习时间通常会少 3 小时。

观察市场,阅读工作机会中的要求。他们正在改变!我们今天正在写这篇文章,随着技术的变化,可能需要在一年内对其进行更新。一旦你掌握了基础知识:HTML CSS JavaScript,一些新的东西必然会成为趋势——更新你的“学习”列表。尽快寻找免费的研讨会(向导师学习并同时建立有趣的联系)和行业实习机会。这份工作将成为最好的老师。

什么是前端开发示例?

HTML + CSS

其中三个可能是最著名的提供交互式 Web 前端开发课程的网站。免费,组织良好,他们很容易向初学者传达知识。他们在浏览器中举办互动课程。我们不需要在家里安装任何东西,我们只需完成课程,我们的进度就会立即得到衡量。

可汗学院、Codecademy 和家庭学校

可汗学院拥有完全免费的材料,还可以选择使用其他网络语言。这是一个教育平台,不仅仅是关于网络开发。您可以完成各种任务,从基本元素(包括 HTML 和 CSS)到更高级的 JavaScript 脚本。

Codecademy有很多免费的东西和有趣的预构建前端开发路径,这些路径只对专业用户开放。

Code School -在我们看来,最有组织的课程。它们由视频 + 带有前端开发任务的交互部分组成。每门课程的第一级是免费的,但不幸的是,您必须为其余的课程付费。然而,即使是免费的部分(通常大约 1 小时)也值得一看。

如何选择要参加的课程?

查看所有三个网络平台。主题重叠,但值得通过一些重复的主题。首先,重复巩固知识,其次,每个前端平台的教学方式略有不同。这是你的选择。很多人想为每月的 Bootcamp 或 Web 开发课程付费,因为他们可以免费获得一切。没有什么不寻常的。

最糟糕的是,我们有很多材料,想要快速学习我们需要的所有东西,而不需要检查或选择——把所有东西都放在托盘上,比基础材料更进一步。因此,我们知道,如果您没有时间学习所有前端课程并且决策不是您的强项,请查看可汗学院:HTML CSS 简介——Web 开发。

JavaScript

如果不使用 JavaScript,我们的前端开发课程会是什么?上面的互动网站很棒。他们为我们准备了 JavaScript 课程——很好,很简单,不幸的是不是很全面,但是很适合热身。如果您已经具备 HTML 和 CSS 的基础知识,则无需从前面的建议开始。

要开始介绍中的 9 个简短开发练习:通过 JavaScript,您可以在 Udacity: JavaScript Intro 中的相同主题上进行构建,然后(或立即)继续执行更大的任务集:HTML / JavaScript:创建交互式 Web页。

jQuery

在我们的前端方式上又迈出了一步,但非常可选。目前,前端开发课程可以不用jQuery。尤其是由于今天有许多令人兴奋的前端开发人员新选择,我们已经查看了工作机会,并且仍然值得拥有。

是的,可汗学院和 Codecademy 都有 jQuery 课程。但是,在这种情况下,我想推荐一小时完全免费的 jQuery Pluralsight(前 Code School)前端开发课程。

学习框架

在这个阶段,您可以自己选择前端材料并评估它们是否适合您的知识。谈到 Bootstrap 框架,构建网站是基于 12 列网格的,而这些知识是在实践中理解其余部分的基础。 Bootstrap 允许您快速创建响应式网站 (RWD),即适用于移动设备。如果您更喜欢以教程的形式学习:Code academy 提供引导课程,使用 Daily Web,您将在 30 分钟内创建您的第一个引导滑块。

框架 JavaScript

目前,一门像样的前端开发课程当然应该介绍当前使用的 JavaScript 框架,并且至少教一个。您可以在 Pluralsight(前身为 Code School)上找到带有框架的交互式课程,免费 14 天。您可以在 scotch.io 上找到非常丰富的免费材料集合。另一方面,取消订阅可以找到每个框架的免费前端开发课程的地方是一个单独的帖子的主题。

其中有很多。选择是困难的,了解他们是不可能的。无论您选择从哪个开始,只要坚持下去。不要因为学习了一周的 Web 开发而从一朵花跳到另一朵花;有人会告诉你另一个更好。学习第一个并在其上编写一个简单的 Web 应用程序。通常,建议初学者使用计划器、待办事项列表和排名新闻等应用程序。您所需要的只是框架的名称和您要创建的 Web 应用程序的名称。

免费课程示例:

  • AngularJS
  • Angular 2+(目前为 6——但 4/5 只是另一个前端开发版本)
  • 反应JS
  • Vue.js
  • Ember.js

结束了吗?不是!对于初级前端开发人员来说,这是一个良好的开端和坚实的基础。

frontend course

这些课程之后的下一步是什么?

从处理您的网络项目开始。正如我们在开头所写的那样,从最初的前端开发步骤开始记录您的工作,并将代码放在 GitHub 上,即使它远非理想。

你想测试一下自己吗?

巩固所学知识的最佳方法是通过练习。完成前端课程是一回事,但只有在你的网络项目上工作才能教你编码——自己解决问题。创建一个表单(登录页面),您可以通过该表单向页面的作者发送电子邮件。

创建您的名片网站 - 投资组合- 考虑使用 JavaScript 从头开始用斐波那契数列、滑块或简单游戏填充表格。认为你已经有编码技能但没有图形技能,所以你做的开发是“丑陋”的?不客气!选择一个现成的图形设计,例如,从 Weekly Dev Challenge 中,并尝试创建它。

学习基础知识需要多长时间?

这取决于你。纪律是最重要的。大多数人发现学习网络编程语言更难,但要花时间参加免费的课程。掌握建立您的第一个网站的基础知识可能需要大约 1-3 个月,这取决于您在前端开发中的雄心壮志。

要精通 JavaScript,我还要再加上 3 个月的艰苦学习。我假设您正在工作,因此您每周将花费大约 5-10 小时来学习,即每天至少 1 小时。你不会在六个月内成为前端专家,但这足以为进一步的学习打下基础。

在线寻求帮助

不止一次在学习的过程中,你会遇到问题:如何让一个元素居中?为什么这个脚本不起作用? HTML 和 CSS 在 Chrome 上的外观与在 Firefox 上的外观不同。如何成为前端开发专家?

这很正常,但问的人不会犯错。

  • 谷歌——问谷叔叔,最好用英语。
  • Stack Overflow — 可能是第一个从 Stack Overflow 弹出响应的人。这是一个 Web 开发人员门户,用户可以在其中发布与 Web 编程语言相关的问题,而其他人(通常是更有经验的 Web 程序员)试图为您提供有关前端开发的答案。以前的最佳解决方案是积分,问题的作者可以标记解决了他的问题的评论。有时有几个或十几个解决方案,因此值得阅读所有解决方案并在您所在的位置检查它们。如果任何解决方案对您有所帮助,请投票——给它一个向上的箭头。
  • Facebook — FB 上面向初学者的前端开发小组可以为您提供很多帮助,尤其是当您不知道如何询问您的问题时。上传屏幕和您的代码。不要指望有人为你写它,但评论肯定会引导你走上正确的道路。不幸的是,对于琐碎简单的问题,人们总是会写一些不愉快的东西——很难,要有耐心。我们推荐网络小组——创业支持最适合解决与创业相关的问题,版主确保没有仇恨。
  • CanIUse — 如果您的问题与 CSS 无法在您的某个浏览器上运行有关,请确保您正在检查的版本支持您使用的内容。这样,您将避免对幽灵前端问题进行冗长乏味的搜索。

结论

因此,在本文中,您已经了解了有关 IT 世界的更多信息,如果我们能帮助您指导方向,我们将很高兴。前端世界很大,初学者很容易迷失在其中,但我们专注于帮助人们走上正确的道路。但还要注意,除了传统的网络语言之外,还有一种无代码网络编程语言。在无代码工具被广泛使用之前,Web 应用程序开发完全由 Web 程序员完成。

幸运的是,时间不多了,现在任何精通该材料的学生都可以创建自己的 Web 应用程序或登录页面。在学习了基础知识之后,即使是在知识、HTML 和 CSS 的水平上,你也已经可以找到你梦寐以求的工作了。许多科学家已经注意到,网络编程语言提高了人类的能力并有助于发展软技能。最后,这是你的经济独立。我们认识来自前端世界的不同人,他们创办了自己的初创公司,并为我们的星球做出了必要的事情。

而且,当然,这种方法具有以下优点:

  • 易于使用且功能强大。
  • 很棒的模板库。
  • 支持设置各种参数。

无代码或可视化编程语言是一种全新的方法,您不必从头开始编写代码。我们鼓励您使用带有图形界面的工具,这是 Web 开发的未来。传统的前端 Web 应用程序是很酷的东西,但我们认为您需要创新,所以我们的产品可能对您有用。我们真诚地希望找到掌握程序员职业的正确途径。这条路是荆棘的,但如果你掌握了它,它会满足你在这段时间度过的一生。

相关帖子

PWA 如何增强用户参与度并提高转化率
PWA 如何增强用户参与度并提高转化率
了解渐进式 Web 应用程序 (PWA) 如何通过跨设备提供无缝体验来提升用户参与度并提高转化率,从而实现业务成功。
PWAs 与原生应用:哪个更适合您的项目?
PWAs 与原生应用:哪个更适合您的项目?
了解 PWAs 与原生应用之间的差异,并学习如何根据性能、用户体验、成本和部署为您的项目选择最佳选项。
在您的商业应用中使用 PWA 的好处
在您的商业应用中使用 PWA 的好处
探索渐进式 Web 应用 (PWA) 对商业应用的好处。了解 PWA 如何提高用户参与度、成本效益和无缝体验。
免费开始
有灵感自己尝试一下吗?

了解 AppMaster 强大功能的最佳方式是亲身体验。免费订阅,在几分钟内制作您自己的应用程序

将您的想法变为现实