【修真院“善良”系列之十八】WEB程序员从零开始到就业的全资料V1.0——只看这一篇就够了!...
前言
这是两年以来,修真院收集整理的学习资料顺序。
以CSS15个任务,JS15个任务为基础,分别依据要完成任务的不同的技能点,我们整理出来了这么一篇在学习的时候需要看到的资料。
这是Version 1.0,接下来会优化和更新到2.0.
现在只有WEB,接着会推出Java。
任务地址在这里。
任务体系是从简单到难,官网提供了更多更详细的资料。
资料
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代码规范
NEC : 更好的CSS样式解决方案
任务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 <audio> 标签
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 表单验证
表单验证<AngularJs> - Halower - 博客园
angular-umeditor
dylike/meta.umeditor
PS,本文由修真院前学员现正式员工美丽动人的小金超整理。
------------------------------------------------------------------------------------------------------------------------
“我们相信人人都可以成为一个工程师,现在开始,找个师兄,带你入门,学习的路上不再迷茫。
这里是技能树.IT修真院:http://www.jnshu.com,初学者转行到互联网行业的聚集地。"
欢迎加IT交流群565734203与大家一起讨论交流
转载于:https://www.cnblogs.com/jnshu/p/10118102.html
【修真院“善良”系列之十八】WEB程序员从零开始到就业的全资料V1.0——只看这一篇就够了!...相关推荐
- 【修真院“善良”系列之十八】WEB程序员从零开始到就业的全资料V1.0——只看这一篇就够了!
这里是修真院小课堂,本篇分析的主题是 [WEB程序员从零开始到就业的全资料V1.0] 前言 这是两年以来,修真院收集整理的学习资料顺序. 以CSS15个任务,JS15个任务为基础,分别依据要完成任务的 ...
- 【修真院“善良”系列之十】初级Java程序员的学习路线
知乎总是建议我修改内容,说我骗赞. 算了,直接发专栏好了. 说过很多遍这个话题了.重复一遍,再说一次. 第一. Java语法的学习. 3天 你需要会这些: String,Integer,Long,A ...
- 【修真院“善良”系列之四】怎么识别招聘中的传销公司?
这里是修真院小课堂,本篇分析的主题是 [怎么识别招聘中的传销公司?] 先说事情的经过,再说怎么鉴别. 第一章 原来传销公司现在都发展到这个地步了? 刚到武汉分院没多久,把小四姐姐依依不舍的送上火车,没 ...
- 【修真院“善良”系列之十七】请拿好这支时间之箭
这里是修真院前端小课堂,本篇分析的主题是 [请拿好这支时间之箭] 适用读者:3年以下的后端开发者 文章目录: 1.为什么要做性能优化 2.性能优化之前,先定位问题 3.Nginx和Tomcat 4.C ...
- 十六年开发经验的三十八岁程序员创业十年故事(一)
俺是一名北漂程序员,今年38岁,从第二次创业到今天已经走过整整十年:闲暇之余,把个人的创业经历整理出来与朋友们分享.见仁见智各有不同. 虽说俺是靠写代码生活,但是,骨子里还是更喜欢讲故事,讲讲自己在创 ...
- 十六年开发经验的三十八岁程序员创业十年故事(二)
经过一年的兼职,2005年迎来毕业,或许是头一年遇上的几个老板业务能力比较强.人脉比较广的原因,也不愿意继续上班,就想自己干.当时的一个老板,他是人大金融专业硕士毕业的,经过尽二十年的奋斗,他的一些同 ...
- Go入门系列(十八) 反射、包和测试工具
本系列文章目录 展开/收起 Go入门系列(一) 初识Go语言 Go入门系列(二) 变量.指针.数据类型简介和作用域 Go入门系列(三) 基础类型--整型.浮点型.布尔类型和字符串 Go入门系列(四) ...
- 【SQL开发实战技巧】系列(十八):数据仓库中时间类型操作(进阶)INTERVAL、EXTRACT以及如何确定一年是否为闰年及周的计算
系列文章目录 [SQL开发实战技巧]系列(一):关于SQL不得不说的那些事 [SQL开发实战技巧]系列(二):简单单表查询 [SQL开发实战技巧]系列(三):SQL排序的那些事 [SQL开发实战技巧] ...
- Reflex WMS入门系列二十八:空白标签打印
Reflex WMS入门系列二十八:空白标签打印 贴在托盘上的标签,因托盘上的货物的移动,使用等缘故可能会导致标签丢失.在很多场景下又需要扫描托盘标签,所以Reflex WMS系统提供了打印空白标签的 ...
最新文章
- QT,QVector 基本用法,遍历[实例讲解]
- 《廖雪峰 . Git 教程》学习总结
- 本地文件夹如何断开svn连接
- layui隐藏侧边栏_11个iPhone隐藏技能,好用但很少人知道,看完怀疑自己用的假手机...
- 有两个链表a,b,设结点包括学号,姓名。从a链表中删去与b链表中有相同学号的那些结点。
- ST_LINK/V2 SWIM和SWD、JTAG下载口说明
- yii mysql in,在Yii中从MySQL获取最后插入的ID
- SDUT 2766 小明传奇2
- 如何实现在已有代码之后添加逻辑之继承,组合(静态代理)实现方法
- 虚拟机centos7 git clone特别慢_从文件生命周期看GIT的提交流程
- anaconda装完没反应
- qt TCP 网络编程
- WinCE驱动之Touch Panel(开发详解)
- 五款交友APP对比评测,哪款交友app好用?
- 宾馆如何实现WiFi无线上网短信认证?
- CryEngine5 Shader调试
- 一门课程学习转录组调控分析和R可视化第十四期 (线上线下开课)
- 跨行入测绘,看航测小白如何实现纯免相控作业
- echarts生成图表的简单使用
- oracle10.21数据库安装,安装并创建数据库【Oracle Database 10g】(三)
热门文章
- java 折纸折成珠峰高度
- 虚拟机命令里面的光标不动了怎么办_Linux 11个炫酷的终端命令!你知道几个?
- 《Hyperledger Fabric官方文档》区块链的网络
- 何海涛100题(1)自己心得
- 从开始到现在······
- 开发者测评:相比 Harbor,我选择 ACR 的三点原因
- 2019性价比旗舰手机哪家强?联想Z6 Pro当仁不让
- 数据通信协议的简介(数据通信协议和网络协议有什么区别?)
- 云服务器怎么弄mac系统,mac如何开启云服务器配置
- 项目运营第一天——狂风暴雨