前端、零基础

怼烎@ 2022-05-27 04:25 269阅读 0赞

以下文章转载自知乎,暗灭-京华九月秋近寒，浮沉半生影长单.

【修真院“善良”系列之十八】WEB程序员从零开始到就业的全资料V1.0——只看这一篇就够了！

![1240][]

[暗灭][Link 1]

京华九月秋近寒，浮沉半生影长单

已关注

134 人赞了该文章

前言

这是两年以来，修真院收集整理的学习资料顺序。

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

这是Version 1.0，接下来会优化和更新到2.0.

现在只有WEB，接着会推出Java。

任务地址在[这里][Link 2]。

任务体系是从简单到难，官网提供了更多更详细的资料。

资料

**css部分**

**任务1:九宫格——用html+css制作一个网页**

通过这个任务能学到：1.网页是由什么组成的；2.如何生成一个网页；3.如何访问一个网页；4.html和css如何搭配工作；5.页面基础的布局方式；6.如何用一行代码兼容不同浏览设备；7.页面和想象的不一样时如何进行调试

HTML基本知识

[【图文】第1章 HTML的基本概念\_百度文库][1_ HTML]

CSS概念

[CSS 教程][CSS]

盒子模型，浮动

[对CSS中的Position、Float属性的一些深入探讨 - CoffeeDeveloper - 博客园][CSS_Position_Float_ - CoffeeDeveloper -]

chrome开发者工具

[神器--Chrome开发者工具(一) - Just For Fun - SegmentFault][--Chrome_ - Just For Fun - SegmentFault]

媒体查询

[Media Queries详解 - lines - 博客园][Media Queries_ - lines -]

**任务2:认识开发必备工具**

通过这个任务能学到：1.学习版本管理工具; 2.学习使用服务器; 3.学习如何将自己的代码放到网上去

nginx

[windows上 nginx 配置代理服务，配置多域名，以及最简单实现跨域配置][windows_ nginx]

git

[Git教程][Git]

github

[知乎 - 知乎][-]

svn

[SVN服务器搭建和使用（一） - xjbest - 博客园][SVN_ - xjbest -]

**任务3:魔镜介绍页——一个最简单的移动端页面**

通过这个任务能学到：1.如何运用布局知识进行更复杂的布局；2.如何让布局更好地适应移动端；3.如何合理使用rem作长度单位；4.如何使用photoshop切图；5.如何处理不同dpi下的图片

PhotoShop

[http://jingyan.baidu.com/article/19020a0a149b71529d2842bb.html][http_jingyan.baidu.com_article_19020a0a149b71529d2842bb.html]

absolute

[CSS深入理解之absolute-慕课网][CSS_absolute-]

自适应单位

[彻底弄懂css中单位px和em,rem的区别 - leejersey - 博客园][css_px_em_rem_ - leejersey -]

css类选择器

[CSS 类选择器详解][CSS 1]

**任务4:登录页——一个最常见的移动端页面**

通过这个任务能学到： 1.处理常见的移动端页面； 2.学会改变表单元素样式

input

[了解HTML表单之input元素的30个元素属性 - 推酷][HTML_input_30_ -]

[Smart checkbox and radio][]

绝对定位和相对定位

[CSS中的绝对定位与相对定位 - TBHacker - 博客园][CSS_ - TBHacker -]

**任务5:护工个人主页——一个最常见的移动端页面**

通过这个任务能学到： 1.处理更复杂的移动端页面； 2.同样是左中右的布局，可以用很多不同的方法来完成； 3.用css3的方法更好地拉伸背景图

自适应布局总结

[这可能是史上最全的 CSS 自适应布局总结][CSS 2]

Html，CSS代码规范

[NEC : 更好的CSS样式解决方案][NEC _ _CSS]

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

1.解决垂直居中； 2.模拟下拉选框； 3.做出复杂的列表页

雪碧图

[background-position和雪碧图(CSS Sprites)用法][background-position_CSS Sprites]

bootstrap栅格系统

[Bootstrap 栅格系统的精妙之处][Bootstrap]

bootstrap官方文档

[Bootstrap中文网][Bootstrap 1]

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

收获什么： 1.HTML5的audio定义音频流； 2.处理半透明； 3.CSS3动画

input range 的样式设置

[使用CSS来扩展增强Input Range的示例][CSS_Input Range]

html5web存储

[HTML 5 Web 存储][HTML 5 Web]

html标签

[HTML 标签][HTML]

css3动画

[CSS3 Animation\_Animation, css3属性详解 教程\_w3cplus][CSS3 Animation_Animation_ css3_ _w3cplus]

css处理半透明

[CSS属性小结之--半透明处理 - 子纯不语 - 博客园][CSS_--_ - _ -]

**任务8:修真院——一个PC端的企业网站，以bootstrap为基础满足更多不同的需求**

收获什么： 完成一个比较完整的PC端项目

html和css实现常见布局

[利用HTML和CSS实现常见的布局 - 眼睛大大的 - SegmentFault][HTML_CSS_ - _ - SegmentFault]

**任务9:修真院——一个响应式的企业网站**

收获什么： 增加网站布局开发的熟练度； 获得一个响应式的网站

meta标签中http-equiv属性使用介绍

[meta标签中的http-equiv属性使用介绍\_HTML/Xhtml\_网页制作\_脚本之家][meta_http-equiv_HTML_Xhtml]

**任务10:51包装——一个常见的表单页面**

收获什么： CSS制作流程图； CSS模拟表单元素； 熟练响应式布局

css改变select下拉列表样式

[用纯css改变下拉列表select框的默认样式 - OurJS][css_select_ - OurJS]

**任务11:基于css的更高级语言——使用less/sass重写任务4（登录页），并编译**

收获什么： 使用SASS或LESS

sass入门

[sass入门 - sass教程][sass_ - sass]

less文档

[Less 中文网][Less]

**任务12:标准化——阅读html和css规范，不使用bs重写任务5和6（护工）**

收获什么： 使用SASS或LESS重构页面

css重置样式表

[css 重置样式表 - 前端小白 - 博客频道 - CSDN.NET][css _ - _ - _ - CSDN.NET]

**任务13:组织样式表——按照任务12的标准，不使用bs重写任务7样式，并且阅读样式表组织规范，拆分样式表**

收获什么：css架构

如何进行css架构（张鑫旭）

[http://www.zhangxinxu.com/wordpress/2010/07/我是如何对网站css进行架构的/][http_www.zhangxinxu.com_wordpress_2010_07_css]

**任务14:自己的组件库——将修真院拆出属于自己的组件库**

收获什么： 提取PC端的组件库

前端为什么要组件化

[前端为什么一定要做组件化][Link 3]

css画三角

[css3画三角形的原理 - 这算什么艾迪 - 博客园][css3_ - _ -]

**任务15:综合性的总结——按照任务12，13学到的规范，重写一遍任务9，不用其他框架，使用less/sass并编译**

收获什么：综合能力

综合之前所学

j**s部分**

基础语法积累

菜鸟教程

[JavaScript 教程 | 菜鸟教程][JavaScript _ _]

w3c

[浏览器脚本教程][Link 4]

阮一峰

[JavaScript 标准参考教程（alpha）][JavaScript _alpha]

廖雪峰

[JavaScript教程][JavaScript]

js秘密花园

[JavaScript 秘密花园][JavaScript 1]

选一个刷一遍

jq教程

[jQuery 教程 | 菜鸟教程][jQuery _ _]

angular插件集合

[angular好用的插件集合（持续更新中） - angular - SegmentFault][angular_ - angular - SegmentFault]

**任务1:九宫格**

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

js字符串转数字

[js 字符串转换成数字的三种方法 - 疯狂的胖鱼 - 博客频道 - CSDN.NET][js _ - _ - _ - CSDN.NET]

js随机数

[JS产生随机数的几个用法！ - banbu - 博客园][JS_ - banbu -]

**任务2:桌游精灵身份发放**

收获什么： 如何使用JS进行页面跳转和传参； 使用JS对input等页面元素进行更复杂的操作； 进一步理解JS的数组； 了解JS正则表达式

dom操作

[JavaScript的DOM操作(节点操作) - 西西爸de札记 - 博客频道 - CSDN.NET][JavaScript_DOM_ - _de_ - _ - CSDN.NET]

正则（RegExp对象）

[JavaScript 标准参考教程（alpha）][JavaScript _alpha 1]

控制台调试

[Chrome 控制台console的用法][Chrome _console]

**任务3:桌游精灵查看身份**

收获什么： 进一步学习页面间数据传递； 如何根据需要显示和隐藏视图； JS对DOM样式和内容进行更复杂的操作

Json

[JSON\_百度百科][JSON]

localStorage和sessionStorage详解

[HTMl5的存储方式sessionStorage和localStorage详解\_html5教程技巧\_脚本之家][HTMl5_sessionStorage_localStorage_html5]

**任务4:桌游精灵法官日志和游戏结果**

收获什么： 综合运用jquery完成更复杂的业务逻辑； 使用有限状态机来存放对象的不同状态

js有限状态机

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

**任务5:ajax登录/退出**

ajax

[JavaScript 标准参考教程（alpha）][JavaScript _alpha 2]

rest

[深入浅出REST\_知识库\_博客园][REST]

json和jsonp

[【原创】说说JSON和JSONP，也许你会豁然开朗，含jQuery用例 - 随它去吧 - 博客园][JSON_JSONP_jQuery_ - _ -]

**任务6:后台系统--angular初尝**

收获什么： 单页应用开发； 学习使用框架开发项目

angularjs中文网

[AngularJS中文网][AngularJS]

angular常用功能

[AngularJS 最常用的八种功能][AngularJS 1]

angular ui-router

[AngularJS ui-router (嵌套路由)][AngularJS ui-router]

**任务7:后台系统--angular登录和列表**

收获什么： 用angular进行数据交互； 双向绑定； 表单验证

理解angularjs的作用域scope

[AngularJS中文社区][AngularJS 2]

http服务

[简介AngularJS中$http服务的用法\_AngularJS\_脚本之家][AngularJS_http_AngularJS]

$http服务细节设置

[AngularJs $http 请求服务][AngularJs _http]

**任务8:后台系统--angular传参和指令**

收获什么： 在单页应用里如何通过url传参； angular的指令是什么； 如何去自定义一个指令

angular中几种传参

[Angular 中几种参数传递方式][Angular]

angular自定义指令

[AngularJS中的指令全面解析(必看)\_AngularJS\_脚本之家][AngularJS_AngularJS]

angular服务

[AngularJS 之 Factory vs Service vs Provider][AngularJS _ Factory vs Service vs Provider]

**任务9:后台系统--angular图片上传**

收获什么： 基于HTML5的图片预览和上传

angular实现图片上传（参考实现）

[AngularJS图片上传功能的实现 - OPEN 开发经验库][AngularJS_ - OPEN]

ng-file-upload的使用

[angularJs中上传图片/文件功能：ng-file-upload - csdnmmcl的博客 - 博客频道 - CSDN.NET][angularJs_ng-file-upload - csdnmmcl_ - _ - CSDN.NET]

**任务10:后台系统--angular表单验证交互**

收获什么： 进一步熟悉表单验证； 学习使用三方插件：富文本编辑器

angular 表单验证

[表单验证 - Halower - 博客园][- Halower -]

angular-umeditor

[dylike/meta.umeditor][dylike_meta.umeditor]

PS，本文由修真院前学员现正式员工美丽动人的小金超整理。

**今天的分享就到这里啦，欢迎大家点赞、转发、留言、拍砖~**

技能树.IT修真院

“我们相信人人都可以成为一个工程师，现在开始，找个师兄，带你入门，掌控自己学习的节奏，学习的路上不再迷茫”。

这里是技能树.IT修真院，成千上万的师兄在这里找到了自己的学习路线，学习透明化，成长可见化，师兄1对1免费指导。快来与我一起学习吧~

我的邀请码：[17742750][]，或者你可以直接点击此链接：[http://www.jnshu.com/login/1/17742750][17742750]

[1240]: /images/20220527/56cd7d10a576445cad97eab90c8f752f.png
[Link 1]: https://www.zhihu.com/people/ptteng
[Link 2]: https://link.zhihu.com/?target=http%3A//www.jnshu.com/occupation/1/task
[1_ HTML]: https://link.zhihu.com/?target=https%3A//wenku.baidu.com/view/ed8eb3c44028915f804dc2bf.html
[CSS]: https://link.zhihu.com/?target=http%3A//www.w3school.com.cn/css/index.asp
[CSS_Position_Float_ - CoffeeDeveloper -]: https://link.zhihu.com/?target=http%3A//www.cnblogs.com/coffeedeveloper/p/3145790.html%23float
[--Chrome_ - Just For Fun - SegmentFault]: https://link.zhihu.com/?target=https%3A//segmentfault.com/a/1190000000683599
[Media Queries_ - lines -]: https://link.zhihu.com/?target=http%3A//www.cnblogs.com/asqq/archive/2012/04/13/2445912.html
[windows_ nginx]: https://link.zhihu.com/?target=http%3A//blog.csdn.net/aixiaoyang168/article/details/51203097
[Git]: https://link.zhihu.com/?target=http%3A//www.liaoxuefeng.com/wiki/0013739516305929606dd18361248578c67b8067c8c017b000
[-]: https://www.zhihu.com/question/20070065
[SVN_ - xjbest -]: https://link.zhihu.com/?target=http%3A//www.cnblogs.com/xiaobaihome/archive/2012/03/20/2407610.html
[http_jingyan.baidu.com_article_19020a0a149b71529d2842bb.html]: https://link.zhihu.com/?target=http%3A//jingyan.baidu.com/article/19020a0a149b71529d2842bb.html
[CSS_absolute-]: https://link.zhihu.com/?target=http%3A//www.imooc.com/learn/192
[css_px_em_rem_ - leejersey -]: https://link.zhihu.com/?target=http%3A//www.cnblogs.com/leejersey/p/3662612.html
[CSS 1]: https://link.zhihu.com/?target=http%3A//www.w3school.com.cn/css/css_selector_class.asp
[HTML_input_30_ -]: https://link.zhihu.com/?target=http%3A//www.tuicool.com/articles/7V3eqan
[Smart checkbox and radio]: https://link.zhihu.com/?target=http%3A//codepen.io/jcpplus/pen/ukvps
[CSS_ - TBHacker -]: https://link.zhihu.com/?target=http%3A//www.cnblogs.com/jiqing9006/archive/2012/07/26/2610586.html
[CSS 2]: https://link.zhihu.com/?target=https%3A//juejin.im/entry/573d168049830c006121bb2c
[NEC _ _CSS]: https://link.zhihu.com/?target=http%3A//nec.netease.com/
[background-position_CSS Sprites]: https://link.zhihu.com/?target=http%3A//blog.csdn.net/bingkingboy/article/details/51059209
[Bootstrap]: https://link.zhihu.com/?target=https%3A//segmentfault.com/a/1190000000743553
[Bootstrap 1]: https://link.zhihu.com/?target=http%3A//www.bootcss.com/
[CSS_Input Range]: https://link.zhihu.com/?target=http%3A//www.jb51.net/css/365028.html
[HTML 5 Web]: https://link.zhihu.com/?target=http%3A//www.w3school.com.cn/html5/html_5_webstorage.asp
[HTML]: https://link.zhihu.com/?target=http%3A//www.w3school.com.cn/tags/tag_audio.asp
[CSS3 Animation_Animation_ css3_ _w3cplus]: https://link.zhihu.com/?target=http%3A//www.w3cplus.com/content/css3-animation
[CSS_--_ - _ -]: https://link.zhihu.com/?target=http%3A//www.cnblogs.com/zichun/p/4725926.html
[HTML_CSS_ - _ - SegmentFault]: https://link.zhihu.com/?target=https%3A//segmentfault.com/a/1190000003931851
[meta_http-equiv_HTML_Xhtml]: https://link.zhihu.com/?target=http%3A//www.jb51.net/web/70787.html
[css_select_ - OurJS]: https://link.zhihu.com/?target=http%3A//ourjs.com/detail/551b9b0529c8d81960000007
[sass_ - sass]: https://link.zhihu.com/?target=http%3A//www.w3cplus.com/sassguide/
[Less]: https://link.zhihu.com/?target=http%3A//lesscss.cn/
[css _ - _ - _ - CSDN.NET]: https://link.zhihu.com/?target=http%3A//blog.csdn.net/u014516981/article/details/52141451
[http_www.zhangxinxu.com_wordpress_2010_07_css]: https://link.zhihu.com/?target=http%3A//www.zhangxinxu.com/wordpress/2010/07/%25E6%2588%2591%25E6%2598%25AF%25E5%25A6%2582%25E4%25BD%2595%25E5%25AF%25B9%25E7%25BD%2591%25E7%25AB%2599css%25E8%25BF%259B%25E8%25A1%258C%25E6%259E%25B6%25E6%259E%2584%25E7%259A%2584/
[Link 3]: https://link.zhihu.com/?target=http%3A//www.10tiao.com/html/184/201611/2247484505/1.html
[css3_ - _ -]: https://link.zhihu.com/?target=http%3A//www.cnblogs.com/huangzhilong/p/5030659.html
[JavaScript _ _]: https://link.zhihu.com/?target=http%3A//www.runoob.com/js/js-tutorial.html
[Link 4]: https://link.zhihu.com/?target=http%3A//www.w3school.com.cn/b.asp
[JavaScript _alpha]: https://link.zhihu.com/?target=http%3A//javascript.ruanyifeng.com/%23introduction
[JavaScript]: https://link.zhihu.com/?target=http%3A//www.liaoxuefeng.com/wiki/001434446689867b27157e896e74d51a89c25cc8b43bdb3000
[JavaScript 1]: https://link.zhihu.com/?target=http%3A//bonsaiden.github.io/JavaScript-Garden/zh/
[jQuery _ _]: https://link.zhihu.com/?target=http%3A//www.runoob.com/jquery/jquery-tutorial.html
[angular_ - angular - SegmentFault]: https://link.zhihu.com/?target=https%3A//segmentfault.com/a/1190000003858219
[js _ - _ - _ - CSDN.NET]: https://link.zhihu.com/?target=http%3A//blog.csdn.net/ufo2910628/article/details/40735691
[JS_ - banbu -]: https://link.zhihu.com/?target=http%3A//www.cnblogs.com/banbu/archive/2012/07/25/2607880.html
[JavaScript_DOM_ - _de_ - _ - CSDN.NET]: https://link.zhihu.com/?target=http%3A//blog.csdn.net/terrychinaz/article/details/8492092
[JavaScript _alpha 1]: https://link.zhihu.com/?target=http%3A//javascript.ruanyifeng.com/stdlib/regexp.html
[Chrome _console]: https://link.zhihu.com/?target=http%3A//www.open-open.com/lib/view/open1421131601390.html
[JSON]: https://link.zhihu.com/?target=http%3A//baike.baidu.com/item/JSON%3Ffr%3Daladdin
[HTMl5_sessionStorage_localStorage_html5]: https://link.zhihu.com/?target=http%3A//www.jb51.net/html5/144597.html
[JavaScript_ -]: https://link.zhihu.com/?target=http%3A//www.ruanyifeng.com/blog/2013/09/finite-state_machine_for_javascript.html
[JavaScript _alpha 2]: https://link.zhihu.com/?target=http%3A//javascript.ruanyifeng.com/bom/ajax.html
[REST]: https://link.zhihu.com/?target=http%3A//kb.cnblogs.com/page/132129/
[JSON_JSONP_jQuery_ - _ -]: https://link.zhihu.com/?target=http%3A//www.cnblogs.com/dowinning/archive/2012/04/19/json-jsonp-jquery.html
[AngularJS]: https://link.zhihu.com/?target=http%3A//www.apjs.net/
[AngularJS 1]: https://link.zhihu.com/?target=http%3A//zhaoyanblog.com/archives/99.html
[AngularJS ui-router]: https://link.zhihu.com/?target=http%3A//www.open-open.com/lib/view/open1416878937309.html
[AngularJS 2]: https://link.zhihu.com/?target=http%3A//www.angularjs.cn/A09C
[AngularJS_http_AngularJS]: https://link.zhihu.com/?target=http%3A//www.jb51.net/article/79243.htm
[AngularJs _http]: https://link.zhihu.com/?target=http%3A//www.cnblogs.com/ys-ys/p/4984639.html%3Futm_source%3Dtuicool%26utm_medium%3Dreferral
[Angular]: https://link.zhihu.com/?target=http%3A//www.open-open.com/lib/view/open1487850197812.html
[AngularJS_AngularJS]: https://link.zhihu.com/?target=http%3A//www.jb51.net/article/84665.htm
[AngularJS _ Factory vs Service vs Provider]: https://link.zhihu.com/?target=https%3A//www.oschina.net/translate/angularjs-factory-vs-service-vs-provider%3Flang%3Dchs%26page%3D1%23
[AngularJS_ - OPEN]: https://link.zhihu.com/?target=http%3A//www.open-open.com/lib/view/open1437920172156.html
[angularJs_ng-file-upload - csdnmmcl_ - _ - CSDN.NET]: https://link.zhihu.com/?target=http%3A//blog.csdn.net/csdnmmcl/article/details/51033954
[- Halower -]: https://link.zhihu.com/?target=http%3A//www.cnblogs.com/rohelm/p/4033513.html
[dylike_meta.umeditor]: https://link.zhihu.com/?target=https%3A//github.com/dylike/meta.umeditor
[17742750]: https://link.jianshu.com/?t=http%3A%2F%2Fwww.jnshu.com%2Flogin%2F1%2F22140638