什么是前端Web开发?

想想你最喜欢的网站。这可能是一个新闻网站,一个购物电子商务网站,一个艺术家的作品集网站,一个社交媒体平台,或者像树屋这样的学习网站。

不管你最喜欢的网站属于哪一类,它肯定与其他网站有很多共同之处。要访问任何网站,首先必须将其加载到Google Chrome、Firefox或Safari等浏览器中。一旦加载,该网站通常包含一种访问方式,即导航链接或搜索栏。除了导航,您还可以找到要阅读的文本、要查看的图像、要观看的视频以及要单击的链接。

所有这些不同类型的网站都有一个共同点:仅仅设计它们是不够的。设计师使用草图和线框创建网页结构,并在创建实体模型时决定颜色、排版和摄影。但在开发人员介入之前,模型只是一张图片。开发人员通过编写代码将该图片转化为交互式网站,该代码指示web浏览器显示该文本、显示这些图片、在用户单击链接后将其带到新页面,等等。

前端与后端开发

前端开发人员有时被称为客户端开发人员,因为我们编写的所有代码都可以被客户端直接查看,换句话说,就是我们网站或应用程序的访问者。

我现在在Treehouse的网站上,观看一个叫做HTML基础使用谷歌浏览器。

有一个带有绿色树屋标志的导航栏,以及名为Home、Tracks、Library、Community和Support的链接。导航使用深灰色背景上的浅色文本和看起来相当圆的字体。导航下方有一点空白,然后主页内容开始,包括金沙棋牌麻将一个突出的按钮,邀请我开始课程。

所有这些内容是如何显示在我的浏览器中的?Treehouse是如何创建一个导航栏,其中包含这些精确的单词、颜色和排版的精确组合,以及下面到底有多少空间?为什么当我把浏览器缩小到屏幕像移动设备一样大时,这些内容会重新排列?答案是,前端开发人员通过编写HTML、CSS和JavaScript的组合,使用代码实现这些决策。

那么,如果前端开发人员像这样控制网页的内容和显示,那么后端开发人员会做什么呢?您可能已经注意到,导航栏的右上角会记住一些关于我作为用户的信息。

看起来我在复习树屋课程时得了15000分,如果我点击下拉箭头,就会看到一张我的小照片,还有我的名字。为了让web应用程序记住有关我的数据,它需要将这些信息存储在数据库的某个位置。后端开发人员构建存储信息的数据库。

HTML、CSS、JavaScript

每个网页由三个不同的层组成,它们共同工作,为用户提供体验。有一个内容层、一个表示层和一个行为层。

内容层是HTML,是超文本标记语言的缩写。HTML提供了网页的结构基础。标题、段落、项目符号列表、链接和图像等内容由HTML定义。

前端开发人员使用HTML标记将web内容转换为HTML元素。例如,如果我们想让浏览器显示短语“Hello world”,我们需要用HTML标记包围该短语,告诉浏览器它是什么类型的内容。是航向吗?或者是一段?

表示层是CSS,是级联样式表的缩写。CSS控制HTML的外观。我们使用样式表为HTML设置颜色、字体大小、背景、布局等样式。CSS还允许我们根据各种设备、屏幕大小和分辨率调整内容。

前端开发人员编写CSS代码来更改HTML元素的外观。因为我们的短语“Hello,world!”是一个段落,所以我们可以编写代码将该文本从默认的黑色更改为红色。或者蓝色。

行为层通常由JavaScript,提供实时用户交互。前端开发人员使用JavaScript响应用户输入并动态更新web内容。

后端开发人员在与数据库通信时也使用JavaScript。因此,JavaScript肯定会比HTML和CSS复杂得多。

在Treehouse掌握前端Web开发

那么,什么样的学生才能成为优秀的前端开发人员呢?您需要对学习、探索和实践代码感到兴奋,因为前端开发人员编写了大量代码。你会想不断地寻找灵感——前端开发人员总是查看其他网站,看看它们是如何工作的。

虽然前端开发人员不需要是用户体验设计方面的专家,但至少对可用性原则有一些兴趣是有帮助的。用户将直接与您构建的所有内容进行交互,并且由于您将与设计师保持经常性的联系,所以说他们的语言会有所帮助。

前端Web开发技术在Treehouse,您将学习本文介绍的技能,并将其应用于八个不同的项目,从个人资料页面到交互式照片库,从游戏展示应用程序到交互式员工目录。这些项目将一起形成一个在线投资组合,用于在寻找前端Web开发工作的同时宣传自己。

使用Treehouse学习每月只需25美元。如果你认为你已经准备好开始探索科技是否适合你,那就注册你的免费七天试用.

使Treehouse与众不同的是,他们致力于帮助您找到理想的工作或发展自己的业务SwitchUp.org

跟我们走啁啾,一款图片分享应用脸谱网获取我们最喜欢的提示,并分享您的学习进展。我们在那儿见!

如果你喜欢读这篇文章,你还应该看看以下两个:

留话

你一定是登录发表评论。

想了解更多关于HTML的信息吗?

HTML是互联网的基础。了解如何从头开始构建您的第一个网站。

了解更多