相关咨询

FULLY MATCH ENTE

最新文章

推荐文章

零基础该如何学习web前端?

目前,web前端越来越受大众的欢迎,因为其入门门槛相对较低,薪资待遇高等优点吸引众多小白前来学习web前端,那么,零基础该如何学习web前端?下面爱创课堂前端培训的老师就为大家详细的介绍一下。


一、什么是Web开发?


Web开发是软件工程的一个特定领域,专注于构建网页。网页或Web应用程序是每次用户导航到网站地址时都在我们的Web浏览器(例如Google Chrome)中下载并运行的代码库。这不同于通常下载一次并在电脑或手机上作为独立应用程序运行的其他软件。Web开发使你的职业生涯令人振奋,因为Web开发周期通常要短得多,并且你可以以更快的速度遍历软件。


Web的主要构建部分是HTML,CSS和JavaScript。我们将讨论这三种语言。我们还可以将Web开发分为两个主要类别:web前端和web后端。我们将详细讨论前端。


二、术语前端是什么意思?


你在网络上看到的所有内容都被视为“前端”。


前端是打开网页或应用程序时看到的内容。代码是从服务器下载的,并通过Web浏览器呈现在屏幕上。当我们与代码交互时发生的事情也被认为是前端。在软件开发术语中,这通常被称为“演示层”或“客户端”。


三、前端开发语言


我们将从一张前端学习路线思维导图开始。

web前端学习路线

前端开发是指创建Web用户界面,即用户看到并与之交互的应用程序部分。


前端开发坚定地站在三个支柱上:HTML用于标记,CSS用于样式以及JavaScript用于逻辑和交互。尽管这三种技术经受了时间的考验,但基础工具和框架却在不断变化。本节将为你提供开始探索前端生态系统的起点。


前端开发还与Web设计和用户体验紧密相关,并且两者之间的界限在每个公司中可能不同。通常,前端开发人员专注于技术问题,而Web设计师(UI设计师)则关注美学和用户体验。


1、HTML


HTML是一种超文本标记语言,可以构造显示给用户的信息。


它是一个HTML文档,其中包含每个元素都由HTML标记表示的元素,例如标题,文本段落或文本输入字段。HTML文档也可以使用超链接链接到其他文档。每个标签都具有自己的内容类型,具有一定的外观和附加行为。一旦掌握了HTML,就可以创建非常简单的静态HTML页面。


2、CSS


CSS是一种样式语言(层叠样式表),用于描述HTML元素的视觉外观。


它可以用于控制各个方面,例如元素的位置,其尺寸,文本样式或颜色,或网站的几乎任何其他视觉方面。样式定义为一组规则,可以应用于页面上元素子集的单个元素。最新的CSS功能使您可以超越基本样式,并控制更复杂的视觉效果,例如动画。


3、JavaScript


JavaScript(JS)是用于开发Web用户界面的最常用的编程语言。


它允许你向网站添加自定义行为,例如对用户事件做出反应,从Web服务加载数据以及在页面上显示或隐藏元素。它还允许您通过各种API与浏览器进行交互。您可以使用它来将单独的交互式元素添加到您的网站或创建复杂的Web应用程序。


你也可能会遇到的另一个与JavaScript有关的术语是ECMAScript,它实际上是JavaScript的语言规范。在大多数情况下,它们可以被视为同义词。


4、框架


JavaScript是一种功能强大的语言,但是如果你要创建一个复杂的应用程序,则在没有框架的情况下使用它会导致大量复杂的样板代码。


为了简化起见,有许多框架可以帮助实现基本功能,例如HTML操作,数据加载,整体应用程序体系结构等。目前,三个最受欢迎的框架是React,Angular和Vue.js。


React是一个用于构建由Facebook开发的用户界面的库。


React基于创建可以输入参数呈现HTML的组件(例如按钮或侧面菜单)为基础的。React组件是使用JavaScript的扩展名JSX编写的,该扩展名使您可以方便地将JavaScript代码和HTML结合起来。组件可以组合在一起以创建复杂的UI元素和整个应用程序。React本身并不是一个框架,它仅提供视图层,但是,其丰富的工具和库生态系统提供了创建复杂应用程序所需的一切。React很容易上手,但是随着时间的流逝,你将期望学习新的知识来填补缺失的空白。


Angular-由Google开发的面向组件的“含电池”类型的框架。


Angular应用程序通常用TypeScript编写。它提供了构建Web应用程序所需的大多数功能,包括用于引导,开发和构建项目的CLI工具以及用于管理表单,数据加载,路由等的库。尽管它提供了大多数功能开箱即用,它具有更高的抽象度和复杂度,并且需要学习TypeScript作为主要的开发语言,这使初始学习曲线更加陡峭。


Vue.js是由尤雨溪开发,是一个旨在模块化且可逐步采用的框架。你可以开始将其用作视图层,并根据需要添加其他库。与其他框架相比,最重要的库由核心Vue.js团队维护。

组件库


组件库是可用于组装应用程序的组件的集合。其中一些实现了最常见的组件,例如按钮和下拉菜单,而其他一些还提供了用于创建复杂的响应式布局的实用程序。尽管它们每个都有自己独特的视觉风格,但通常可以对其进行自定义以匹配项目的设计和品牌。它们中的大多数都可以通过纯CSS和JavaScript获得,但是,它们通常被移植为与其他流行的JavaScript框架一起使用。一些比较流行的词汇是:


Bootstrap是用于创建响应式Web应用程序的强大框架。它带有大量的组件以及用于创建布局和主题引擎的实用程序。您可以将用户交互添加到组件中,例如下拉菜单,对JavaScript的最低了解。使用Bootstrap构建的现成网站主题也有很多选择。


四、前端开发工具


前端生态系统以其大量有用的工具而闻名,每种工具都是针对自己的目的而设计的。由于它们太多了,因此我们无法涵盖本指南中的所有内容,因此,我们将专注于入门的重要内容。


1、NPM


Npm实际上意味着两件事:


一个软件注册表,其中包含可以在项目中安装和使用的数千个开源库和工具。


一个CLI工具,可用于从注册表中安装,更新和删除软件包。


使用npm允许你安装项目将使用的库,并将它们记录在JSON文件中。将这个文件与代码库一起存储意味着你可以显示声明项目的依赖项,并快速将它们安装在不同的环境中。你也可以使用它来发布自己的库并与其他开发人员共享。


npm CLI工具还允许你运行可用于执行测试,编译代码或执行代码分析的脚本。


npm的一个类似物是Yarn,它提供了一些性能改进和对库开发的更好支持,并且与npm包注册表兼容


2、前端开发工具有哪些?


可以直接在文本编辑器中编写代码。我推荐一些很棒的免费文本编辑器,例如VSCode,Atom,Sublime Text 3等。webstorm也很奈斯,但他是收费的。


五、Web开发人员面临的独特挑战是什么?


虽然开发用于网络的软件有很多优点,但也有一些缺点。这些对于Web开发人员而言可能是独特的挑战。


1、加载时间


你是否曾经访问过网站并且需要永久加载?你对此有何反应?我们通常会直接开骂垃圾网站。实际上,如果大多数用户在15秒或更短时间内没有为网站加载,就会离开该网站!如前所述,连接速度是处理Web开发时要克服的一大障碍。用户的速度范围可以从非常快(光纤)到很慢(移动3G或卫星)。作为Web开发人员,我们的工作是考虑所有用户。因此,我们学习了一些技巧,以使用户在下载我们的代码时保持参与度,并学会使代码保持较小,以便可以轻松下载。


2、不同的浏览器


我们不仅要担心加载时间,而且还要担心浏览器技术的差异。移动浏览器不同于台式机(或笔记本电脑)浏览器。较旧的浏览器(许多计算机仍使用Windows XP和IE9)与较新的浏览器有很大的不同,为每种浏览器进行开发都带来了独特的挑战。最终,你将需要做出牺牲,并且不支持某些浏览器(这是市场营销部门会做的事情),但是你应该能够为所支持的浏览器编写代码。


3、辅助功能


如果你不是使用辅助功能设备来开发Web上软件的人,那么你可能不知道这些软件是否存在。屏幕阅读器,替代的键盘/导航设备,听力障碍的设备,色盲,视障人士的字体大小都是我们往往不会想到的概念。作为Web开发人员,你不仅需要从人的礼节角度开始考虑这些用户,而且还因为这些用户所占的市场份额微不足道。还有一些法律问题要求可访问性。


这应该足以使你都走上前端开发轨道。如果你觉得这是你想更详细地学习的东西,那么你将有很多有趣的东西在等你。