登录 注册

WEB 程序员从零开始到就业的全资料 V1.0——只看这一篇就够了！

本贴最后更新于 2494 天前，其中的信息可能已经沧海桑田

这是两年以来，修真院收集整理的学习资料顺序。
以 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 标签
HTML 标签
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 表单验证
表单验证 - Halower - 博客园
angular-umeditor
dylike/meta.umeditor

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

对修真院有兴趣的，请点击这个链接去注册，首页 | IT 修真院 | 更快更高效的免费 Java,CSS,JS,运维技术培训 必须用这个链接，拿我做推荐人可是有好处的~

  • 程序员

    程序员是从事程序开发、程序维护的专业人员。

    531 引用 • 3528 回帖
  • 前端

    前端技术一般分为前端设计和前端开发，前端设计可以理解为网站的视觉设计，前端开发则是网站的前台代码实现，包括 HTML、CSS 以及 JavaScript 等。

    247 引用 • 1347 回帖
  • com
    1 引用 • 1 回帖
长春 位置
1 关注
3 收藏
1 回帖
938 7 54 173 230 101 53 310

相关帖子

1 回帖
WEB 程序员从零开始到就业的全资料 V1.0——只看这一篇就够了！

欢迎来到这里！

我们正在构建一个小众社区，大家在这里相互信任，以平等 • 自由 • 奔放的价值观进行分享交流。最终，希望大家能够找到与自己志同道合的伙伴，共同成长。

注册 关于
请输入回帖内容 ...
  • zxh008 •

    好的东西往往是走了 N 多弯路之后才发现~😂

ptteng
长春
回帖
4
 帖子
6
 积分
454

近期热议

推荐标签 标签

  • 阿里云

    阿里云是阿里巴巴集团旗下公司，是全球领先的云计算及人工智能科技公司。提供云服务器、云数据库、云安全等云计算服务，以及大数据、人工智能服务、精准定制基于场景的行业解决方案。

    89 引用 • 345 回帖 • 1 关注
  • 禅道

    禅道是一款国产的开源项目管理软件，她的核心管理思想基于敏捷方法 scrum，内置了产品管理和项目管理，同时又根据国内研发现状补充了测试管理、计划管理、发布管理、文档管理、事务管理等功能，在一个软件中就可以将软件研发中的需求、任务、bug、用例、计划、发布等要素有序的跟踪管理起来，完整地覆盖了项目管理的核心流程。

    5 引用 • 15 回帖 • 224 关注
  • 游戏

    沉迷游戏伤身，强撸灰飞烟灭。

    169 引用 • 799 回帖
  • Mac

    Mac 是苹果公司自 1984 年起以“Macintosh”开始开发的个人消费型计算机，如：iMac、Mac mini、Macbook Air、Macbook Pro、Macbook、Mac Pro 等计算机。

    164 引用 • 594 回帖 • 1 关注
  • Swagger

    Swagger 是一款非常流行的 API 开发工具，它遵循 OpenAPI Specification（这是一种通用的、和编程语言无关的 API 描述规范）。Swagger 贯穿整个 API 生命周期，如 API 的设计、编写文档、测试和部署。

    26 引用 • 35 回帖 • 12 关注
  • 大数据

    大数据（big data）是指无法在一定时间范围内用常规软件工具进行捕捉、管理和处理的数据集合，是需要新处理模式才能具有更强的决策力、洞察发现力和流程优化能力的海量、高增长率和多样化的信息资产。

    89 引用 • 113 回帖 • 1 关注
  • 智能合约

    智能合约（Smart contract）是一种旨在以信息化方式传播、验证或执行合同的计算机协议。智能合约允许在没有第三方的情况下进行可信交易，这些交易可追踪且不可逆转。智能合约概念于 1994 年由 Nick Szabo 首次提出。

    1 引用 • 11 回帖 • 10 关注
  • 正则表达式

    正则表达式（Regular Expression）使用单个字符串来描述、匹配一系列遵循某个句法规则的字符串。

    31 引用 • 94 回帖
  • 锤子科技

    锤子科技（Smartisan）成立于 2012 年 5 月，是一家制造移动互联网终端设备的公司，公司的使命是用完美主义的工匠精神，打造用户体验一流的数码消费类产品（智能手机为主），改善人们的生活质量。

    4 引用 • 31 回帖 • 11 关注
  • 微服务

    微服务架构是一种架构模式，它提倡将单一应用划分成一组小的服务。服务之间互相协调，互相配合，为用户提供最终价值。每个服务运行在独立的进程中。服务于服务之间才用轻量级的通信机制互相沟通。每个服务都围绕着具体业务构建，能够被独立的部署。

    96 引用 • 155 回帖
  • C

    C 语言是一门通用计算机编程语言，应用广泛。C 语言的设计目标是提供一种能以简易的方式编译、处理低级存储器、产生少量的机器码以及不需要任何运行环境支持便能运行的编程语言。

    83 引用 • 165 回帖 • 46 关注
  • PHP

    PHP（Hypertext Preprocessor）是一种开源脚本语言。语法吸收了 C 语言、 Java 和 Perl 的特点，主要适用于 Web 开发领域，据说是世界上最好的编程语言。

    164 引用 • 407 回帖 • 526 关注
  • abitmean

    有点意思就行了

    • 21 关注
  • CSS

    CSS（Cascading Style Sheet）“层叠样式表”是用于控制网页样式并允许将样式信息与网页内容分离的一种标记性语言。

    180 引用 • 447 回帖 • 2 关注
  • Thymeleaf

    Thymeleaf 是一款用于渲染 XML/XHTML/HTML5 内容的模板引擎。类似 Velocity、 FreeMarker 等，它也可以轻易的与 Spring 等 Web 框架进行集成作为 Web 应用的模板引擎。与其它模板引擎相比，Thymeleaf 最大的特点是能够直接在浏览器中打开并正确显示模板页面，而不需要启动整个 Web 应用。

    11 引用 • 19 回帖 • 317 关注
  • VirtualBox

    VirtualBox 是一款开源虚拟机软件，最早由德国 Innotek 公司开发，由 Sun Microsystems 公司出品的软件，使用 Qt 编写，在 Sun 被 Oracle 收购后正式更名成 Oracle VM VirtualBox。

    10 引用 • 2 回帖 • 7 关注
  • danl
    • 61 关注
  • 尊园地产

    昆明尊园房地产经纪有限公司，即：Kunming Zunyuan Property Agency Company Limited（简称“尊园地产”）于 2007 年 6 月开始筹备，2007 年 8 月 18 日正式成立，注册资本 200 万元，公司性质为股份经纪有限公司，主营业务为：代租、代售、代办产权过户、办理银行按揭、担保、抵押、评估等。

    1 引用 • 22 回帖 • 682 关注
  • InfluxDB

    InfluxDB 是一个开源的没有外部依赖的时间序列数据库。适用于记录度量，事件及实时分析。

    2 引用 • 53 关注
  • HTML

    HTML5 是 HTML 下一个的主要修订版本，现在仍处于发展阶段。广义论及 HTML5 时，实际指的是包括 HTML、CSS 和 JavaScript 在内的一套技术组合。

    103 引用 • 294 回帖
  • 微软

    微软是一家美国跨国科技公司，也是世界 PC 软件开发的先导，由比尔·盖茨与保罗·艾伦创办于 1975 年，公司总部设立在华盛顿州的雷德蒙德（Redmond，邻近西雅图）。以研发、制造、授权和提供广泛的电脑软件服务业务为主。

    8 引用 • 44 回帖 • 1 关注
  • JetBrains

    JetBrains 是一家捷克的软件开发公司，该公司位于捷克的布拉格，并在俄国的圣彼得堡及美国麻州波士顿都设有办公室，该公司最为人所熟知的产品是 Java 编程语言开发撰写时所用的集成开发环境：IntelliJ IDEA。

    18 引用 • 54 回帖
  • PWA

    PWA（Progressive Web App）是 Google 在 2015 年提出、2016 年 6 月开始推广的项目。它结合了一系列现代 Web 技术，在网页应用中实现和原生应用相近的用户体验。

    14 引用 • 69 回帖 • 132 关注
  • 大疆创新

    深圳市大疆创新科技有限公司(DJI-Innovations，简称 DJI)，成立于 2006 年，是全球领先的无人飞行器控制系统及无人机解决方案的研发和生产商，客户遍布全球 100 多个国家。通过持续的创新，大疆致力于为无人机工业、行业用户以及专业航拍应用提供性能最强、体验最佳的革命性智能飞控产品和解决方案。

    2 引用 • 14 回帖
  • Kafka

    Kafka 是一种高吞吐量的分布式发布订阅消息系统，它可以处理消费者规模的网站中的所有动作流数据。 这种动作（网页浏览，搜索和其他用户的行动）是现代系统中许多功能的基础。 这些数据通常是由于吞吐量的要求而通过处理日志和日志聚合来解决。

    35 引用 • 35 回帖
  • sts
    2 引用 • 2 回帖 • 146 关注
  • Spring

    Spring 是一个开源框架，是于 2003 年兴起的一个轻量级的 Java 开发框架，由 Rod Johnson 在其著作《Expert One-On-One J2EE Development and Design》中阐述的部分理念和原型衍生而来。它是为了解决企业应用开发的复杂性而创建的。框架的主要优势之一就是其分层架构，分层架构允许使用者选择使用哪一个组件，同时为 JavaEE 应用程序开发提供集成的框架。

    940 引用 • 1458 回帖 • 156 关注

最新标签