如何系统的学习web前端?

html-css018

如何系统的学习web前端?,第1张

对于零基础的人而言,要怎么学习web前端呢?

1、 前端页面重构。主要内容为PC端网站布局、Photoshop 工具及切图、H5移动端网页布局、HTML5+CSS3新特性与交互。学习目标是完成PC端网站布局,可实现响应式布局,一套代码适配 PC 端、移动端、平板设备等。

2、 前后端网页交互。主要内容为JavaScript语法全面进阶、ES6 到 ES10 新语法实践、jQuery 应用及插件使用、设计模式及插件编写、封装JS工具库及Web APIS、AJAX+PHP+MySQL前后端交互、前端工程化与模块化应用以及PC 端全栈开发项目等。学习目标是可以掌握前端工程化工具,如 git、gulp、webpack 等,搭建项目及开发项目。

3、 Node.js + 前端框架。主要内容为Node.js 全面进阶、Koa2+MongoDB搭建服务、Vue.js 框架、React.js 框架、小程序云开发与小程序框架、原生APP与混合APP、数据可视化与桌面应用等。学习目标是掌握桌面应用及可视化大数据,实现复杂数据展示类项目,能够独立完成前后台相关功能,胜任HTML5全栈开发工程师职位。

很多学习web前端的朋友都希望在学成后能找到一份满意的工作,所以我们在学习过程中一定要注意实战经验的积累,如果你所学的东西对企业没有用,那你所做的一切都是无用功。

互联网的发展,使得Web前端开发工程师对于大多数人来说是个全新的职业,在国内乃至国际上真正开始受到关注和发展的时间不到10年。Web前端开发作为网页制作的一个细分行业,在名称上有很明显的时代特征。

网页开发工具

学习web前端开发,网页开发工具有FrontPage,会用 Word 的人很容易学会FrontPage。还有一个常用的是Dreamweaver。这两种都是使用最多的HTML网页制作工具,我使用的是Dreamweaver cs6,因为这套软件提供了一套直观的可视界面,融合了html5一些新的内容。包括网格布局什么的。

学习内容

HTML、CSS和JavaScript。html是内容,css是表现,javascript是行为。前端开发的门槛其实非常低,与服务器端语言先慢后快的学习曲线相比,前端开发的学习曲线是先快后慢。所以,对于从事IT工作的人来说,前端开发是个不错的初入点。也正因为如此,前端开发的领域有很多自学成“才”的同行。html是最基础的,现在流行的是html5设计,先学会网页布局。css是用来美化html页面的为页面提供布局和格式。最后再学javascript。如果你把每天看电影、看电视剧的时间用来学习,我想一个星期入门是没有问题的。

基础知识:

1. html + css。这部分建议在www.w3school.com.cn 上学习,边学边练,每章后还有小测试。之后可以模仿一些网站做些页面。本站提供的个人博客模板www.yangqq.com/download/都是比较简单的单页,可以下载下来模仿自己做一个。理解css每个元素的属性,样式的实现不一定只有一种写法,多想一想还有没有什么需要改进的地方。

《10条HTML代码编写技巧》

《CSS简明教程》

《Div+CSS 规则整理 以及注意问题》

2、JavaScript。不是所有的网页都必须有js,但是要想实现一些超酷的功能和界面的时候,就需要涉及到js。如果没有其他编程语言的基础的话,学起来可能要费些力,还是建议先在 w3school上学习。之后建议马上看《javascript语言精粹》

《JS经典实例》

3、Photoshop、flash。熟悉会一点儿就行了,没必要全部都学得精通,当然如果你在学习的过程中,发现你ps或者flash比较感兴趣的话,也可以尝试做美工这一行。

4、html5和css3。可以先了解一下,然后再入手。毕竟IE的浏览器大多还不支持。

《学习Html5建站教程(一)Html5简介》

《学习Html5建站教程(二)Html5 语法与规则》

《学习Html5建站教程(三)Html5博客页面设计之理论》

《学习Html5建站教程(四)用HTML5做个人的网站》

5、浏览器兼容。懂web标准,熟练手写 xhtml css3 并符合 符合w3c标准。代码能兼容主流浏览器Firfox,Chrome、Safari、IE、Opera。虽然IE6很多都不兼容,但现在还使用的人还是有的。W3C验证地址:http://jigsaw.w3.org/css-validator/ 通过验证指定URI的CSS内容,可以帮我们检查一下有没有错误。

6、熟悉一门后台编程语言 asp、php、jsp等《关于asp、php、asp.net、jsp的学习心得、介绍及优缺点比较》

web前端设计师前景

遇到很多想换行的朋友,第一句就问,这行赚钱吗?我相信一句话,没有付出,是没有回报的!前面已经说过了,咱们这行门槛是很低的,所以薪资阶段也不一样。2000初入这行的现在还普遍,工作经验2年以上,有很多代表性作品的时候,工资在4000左右高手级别的估计在6000左右,大师级别这个阶段的薪资参考:10000以上(上海北京深圳为例)网页设计师课程一般包括:Photoshop、Fireworks、用户界面设计实操,xhtml、css、dreamweaver、网站架构与网站策划、flash动画制作,域名与空间、ftp、dhtml、javascript、动态交互网站(asp、php、aja)

解决这个问题的方法如下:

1、新建一个html文件,命名为test.html,用于讲解div+css布局的基本流程。

2、在test.html文件内,对body进行样式初始化,设置外边距margin为0,内边距padding为0,同时使用text-align设置文字居中。

3、在test.html文件内,为了讲解方便,设置所有的div高度为200px,内容的颜色为红色。

4、在test.html文件内,使用div创建网页的头部,使用margin:0 auto设置div居中,同时设置其宽度为800px,背景颜色为灰色。

5、在test.html文件内,使用div创建网页的中部,使用margin:0 auto设置div居中,同时设置其宽度为800px。

6、在test.html文件内,在网页的中部,创建两个div,用于将中部为两部分,每一个部分宽度为50%,左部分使用float:left设置左浮动,右部分使用float:right设置右浮动。

7、在test.html文件内,使用div创建网页的底部,使用clear:both清除上面div的浮动,避免影响底部的布局。同时,使用margin:0 auto设置div居中,同时设置其宽度为800px,背景颜色为#000fff。

8、在浏览器打开test.html文件,查看实现的效果,这样问题就解决了。