零基础学习web前端开发应该先学习什么

这是两年以来，修真院收集整理的学习资料顺序。以CSS15个任务，JS15个任务为基础，分别依据要完成任务的不同的技能点，我们整理出来了这么一篇在学习的时候需要看到的资料。

推荐一个web前端学习 QQ群606721798，欢迎大家加入，每天晚上在腾讯课堂都有一个技术学习课,会有老师分享干货,帮助大家分析解答问题

。

资料

css部分 任务1:九宫格——用html+css制作一个网页 通过这个任务能学到：

1.网页是由什么组成的；

2.如何生成一个网页；

3.如何访问一个网页；

4.html和css如何搭配工作；

5.页面基础的布局方式；

6.如何用一行代码兼容不同浏览设备；

7.页面和想象的不一样时如何进行调试

HTML基本知识【图文】第1章 HTML的基本概念_百度文库 CSS概念 CSS 教程盒子模型，浮动对CSS中的Position、Float属性的一些深入探讨 - CoffeeDeveloper - 博客园 chrome开发者工具神器--Chrome开发者工具(一) - Just For Fun - SegmentFault 媒体查询 Media Queries详解 - lines - 博客园

任务2:认识开发必备工具 通过这个任务能学到：

1.学习版本管理工具;

2.学习使用服务器;

3.学习如何将自己的代码放到网上去

nginx windows上 nginx 配置代理服务，配置多域名，以及最简单实现跨域配置 git Git教程 github 知乎 - 知乎 svn SVN服务器搭建和使用（一） - xjbest - 博客园

任务3:魔镜介绍页——一个最简单的移动端页面 通过这个任务能学到：

1.如何运用布局知识进行更复杂的布局；

2.如何让布局更好地适应移动端；

3.如何合理使用rem作长度单位；

4.如何使用photoshop切图；

5.如何处理不同dpi下的图片

PhotoShop http://jingyan.baidu.com/article/19020a0a149b71529d2842bb.html absolute CSS深入理解之absolute-慕课网自适应单位彻底弄懂css中单位px和em,rem的区别 - leejersey - 博客园 css类选择器 CSS 类选择器详解

任务4:登录页——一个最常见的移动端页面 通过这个任务能学到：

1.处理常见的移动端页面；

2.学会改变表单元素样式

input 了解HTML表单之input元素的30个元素属性 - 推酷 Smart checkbox and radio 绝对定位和相对定位 CSS中的绝对定位与相对定位 - TBHacker - 博客园

任务5:护工个人主页——一个最常见的移动端页面 通过这个任务能学到：

1.处理更复杂的移动端页面；

2.同样是左中右的布局，可以用很多不同的方法来完成；

3.用css3的方法更好地拉伸背景图

自适应布局总结这可能是史上最全的 CSS 自适应布局总结 Html，CSS代码规范 http://nec.netease.com/

任务6:护工列表页——一个最常见的移动端页面，需要使用bootstrap

1.解决垂直居中；

2.模拟下拉选框；

3.做出复杂的列表页

雪碧图 background-position和雪碧图(CSS Sprites)用法 bootstrap栅格系统 Bootstrap 栅格系统的精妙之处 bootstrap官方文档 Bootstrap中文网

任务7:桌游精灵——一个完整的webApp，以bootstrap为基础满足更多不同的需求 收获什么：

1.HTML5的audio定义音频流；

2.处理半透明；

3.CSS3动画

input range 的样式设置使用CSS来扩展增强Input Range的示例 html5web存储 HTML 5 Web 存储 html<audio>标签 HTML &lt;audio&gt; 标签 css3动画 CSS3 Animation_Animation, css3属性详解教程_w3cplus css处理半透明 CSS属性小结之--半透明处理 - 子纯不语 - 博客园

任务8:修真院——一个PC端的企业网站，以bootstrap为基础满足更多不同的需求 收获什么：完成一个比较完整的PC端项目 html和css实现常见布局利用HTML和CSS实现常见的布局 - 眼睛大大的 - SegmentFault

任务9:修真院——一个响应式的企业网站 收获什么：增加网站布局开发的熟练度；获得一个响应式的网站 meta标签中http-equiv属性使用介绍 meta标签中的http-equiv属性使用介绍_HTML/Xhtml_网页制作_脚本之家

任务10:51包装——一个常见的表单页面 收获什么： CSS制作流程图； CSS模拟表单元素；熟练响应式布局 css改变select下拉列表样式用纯css改变下拉列表select框的默认样式 - OurJS

任务11:基于css的更高级语言——使用less/sass重写任务4（登录页），并编译 收获什么：使用SASS或LESS sass入门 sass入门 - sass教程 less文档 Less 中文网

任务12:标准化——阅读html和css规范，不使用bs重写任务5和6（护工） 收获什么：使用SASS或LESS重构页面 css重置样式表 css 重置样式表 - 前端小白 - 博客频道 - CSDN.NET

任务13:组织样式表——按照任务12的标准，不使用bs重写任务7样式，并且阅读样式表组织规范，拆分样式表 收获什么：css架构如何进行css架构（张鑫旭） http://www.zhangxinxu.com/wordpress/2010/07/我是如何对网站css进行架构的/

任务14:自己的组件库——将修真院拆出属于自己的组件库 收获什么：提取PC端的组件库前端为什么要组件化前端为什么一定要做组件化 css画三角 css3画三角形的原理 - 这算什么艾迪 - 博客园

任务15:综合性的总结——按照任务12，13学到的规范，重写一遍任务9，不用其他框架，使用less/sass并编译 收获什么：综合能力综合之前所学

js部分基础语法积累菜鸟教程 JavaScript 教程 | 菜鸟教程 w3c 浏览器脚本教程阮一峰 JavaScript 标准参考教程（alpha）廖雪峰 JavaScript教程 js秘密花园 JavaScript 秘密花园选一个刷一遍 jq教程 jQuery 教程 | 菜鸟教程 angular插件集合 angular好用的插件集合（持续更新中） - angular - SegmentFault

任务1:九宫格 收获什么： javascript是什么？掌握javascript的基本语法；了解javascript的全局函数；学习使用javascript的自定义函数； javascript如何操作DOM； javascript如何修改CSS；

js字符串转数字 js 字符串转换成数字的三种方法 - 疯狂的胖鱼 - 博客频道 - CSDN.NET js随机数 JS产生随机数的几个用法！ - banbu - 博客园

任务2:桌游精灵身份发放 收获什么：如何使用JS进行页面跳转和传参；使用JS对input等页面元素进行更复杂的操作；进一步理解JS的数组；了解JS正则表达式

dom操作 JavaScript的DOM操作(节点操作) - 西西爸de札记 - 博客频道 - CSDN.NET 正则（RegExp对象） JavaScript 标准参考教程（alpha）控制台调试 Chrome 控制台console的用法

任务3:桌游精灵查看身份 收获什么：进一步学习页面间数据传递；如何根据需要显示和隐藏视图； JS对DOM样式和内容进行更复杂的操作 Json JSON_百度百科 localStorage和sessionStorage详解 HTMl5的存储方式sessionStorage和localStorage详解_html5教程技巧_脚本之家

任务4:桌游精灵法官日志和游戏结果 收获什么：综合运用jquery完成更复杂的业务逻辑；使用有限状态机来存放对象的不同状态

js有限状态机 JavaScript与有限状态机 - 阮一峰的网络日志

任务5:ajax登录/退出 ajax JavaScript 标准参考教程（alpha） rest 深入浅出REST_知识库_博客园 json和jsonp 【原创】说说JSON和JSONP，也许你会豁然开朗，含jQuery用例 - 随它去吧 - 博客园

任务6:后台系统--angular初尝 收获什么：单页应用开发；学习使用框架开发项目 angularjs中文网 AngularJS中文网 angular常用功能 AngularJS 最常用的八种功能 angular ui-router AngularJS ui-router (嵌套路由)

任务7:后台系统--angular登录和列表 收获什么：用angular进行数据交互；双向绑定；表单验证

理解angularjs的作用域scope AngularJS中文社区 http服务简介AngularJS中$http服务的用法_AngularJS_脚本之家 $http服务细节设置 AngularJs $http 请求服务

任务8:后台系统--angular传参和指令 收获什么：在单页应用里如何通过url传参； angular的指令是什么；如何去自定义一个指令

angular中几种传参 Angular 中几种参数传递方式 angular自定义指令 AngularJS中的指令全面解析(必看)_AngularJS_脚本之家 angular服务 AngularJS 之 Factory vs Service vs Provider

任务9:后台系统--angular图片上传 收获什么：基于HTML5的图片预览和上传

angular实现图片上传（参考实现） AngularJS图片上传功能的实现 - OPEN 开发经验库 ng-file-upload的使用 angularJs中上传图片/文件功能：ng-file-upload - csdnmmcl的博客 - 博客频道 - CSDN.NET

任务10:后台系统--angular表单验证交互 收获什么：进一步熟悉表单验证；学习使用三方插件：富文本编辑器

angular 表单验证表单验证&lt;AngularJs&gt; - Halower - 博客园 angular-umeditor dylike/meta.umeditor

零基础学习web前端开发应该先学习什么相关推荐

零基础转行Web前端开发自学靠谱吗？菜鸟学习前端的方法分享
Web 前端开发行业长期处于供不应求的状态,薪资待遇也随之水涨船高,因此吸引了不少零基础转业者.那么,可能会有人问了:零基础转行Web 前端开发自学靠谱吗?这个问题没有确切的答案,毕竟每个人的情况都不 ...
学习web前端开发，需要学习什么？
如果要学习web前端开发,需要学习什么? 遇到很多新手,都会问,如果要学习web前端开发,需要学习什么?难不难?多久能入门?怎么能快速建一个网站?工资能拿到多少?还有些让我推荐一些培训机构什么的要去学 ...
如何迅速有效学习web前端开发？在学习中你更应该注重哪些东西
什么是高效率学习? 一:追求学习的性价比学习性价比 = 所学到的有用的知识 ÷ 花费的时间 **ps:**如果你用了一年时间,还不能仿站,显然效率是低的. 想要学习性价比高,就尽力向这两点努力: * ...
零基础转行web前端，如何高效的去学习web前端?
web前端开发要学的知识内容涉及的会很宽泛,虽然说主要是html.css和JavaScript这些基础知识点,但学前端开发除了要学这些基础知识外,学员还要在这之上进行延伸和深入的去学,而且互联网时代不 ...
零基础怎么学习web前端开发
零基础怎么学习web前端开发?web前端在移动互联网行业的运用是非常广泛的,而且web前端开发技术所涵盖的知识有很多,具体要怎么学习,来看看小编下面的详细介绍吧. 零基础怎么学习web前端开发?对零基 ...
零基础能不能学习web前端开发？【爱创课堂专业前端培训】
web前端日趋火热,不只招聘市场需求量大,还有一个重要的原因便是,入行门槛低,入门简单.单是关于许多小白同学来说还是有点担心,不知道零基础能不能学习web前端开发? 以为没那么简单.其实web前端是一 ...
女孩子零基础学习web前端开发怎么…
· 网页开发工具: 学习web前端开发,网页开发工具有FrontPage,会用 Word 的人很容易学会FrontPage.还有一个常用的是Dreamweaver.这两种都是使用最多的HTML网页制 ...
关于零基础学习web前端开发，有些过来经验分享
大家好,今天给大家分享一下我从事WEB前行业一些自己的学习经验分享也希望通过这篇文章,可以帮助到更多正在学习但是又不知道从哪里学习学习的前端的小伙伴,还有一些想要去转行的,但是不知道不知道如何去学习 ...
学习web前端开发要注意什么
web前端的发展前景有目共睹,越来越多的人都对web前端这门编程语言非常感兴趣,想要学习web前端技术,那么学习web前端开发要注意什么呢?大家在学习之前是否有做好这些功课呢?来看看下面的详细介绍吧. ...

零基础学习web前端开发应该先学习什么

资料

零基础学习web前端开发应该先学习什么相关推荐

最新文章

热门文章