这个阶段主要目的是熟练掌握HTML/CSS，并能用JS开发简单的交互；主要目标是复刻大部分网页，故而本阶段称为“Copy忍者”。

阶段目标概述

HTML主要作用是搭建页面骨架。本阶段最后开发者拿到一张设计图，就应该能根据设计图编写出HTML结构。
需重点掌握标签如下：

  • <html> ， <head> ，<body>
  • <div> 重点掌握
  • <link> 外联CSS， <style> 内联CSS， <script> 外联或内联JS
  • 语义化标签 <main>， <footer> ， <header> ， <nav> ，<section> ， <article> 及相关的 <h1> ， <strong> 等标签， <detail>
  • <meta> 元数据标签，主要描述网页的基本信息。具体的类型也很多，可根据项目需求添加。

CSS则是骨架的“血肉毛皮”。本阶段最后开发者拿到一个设计图，就应该大致清楚应该使用何种布局。
CSS学习中最最重要的是布局，学习CSS应该以布局属性为主线展开。
常用的布局方法有以下几种：

  • float 浮动布局（此布局方法可兼容到IE6，如果开发网站需要兼容IE8，则可使用此种布局方法。目前主流还是使用flex布局，可以跳过此部分学习。）
  • flex 布局（目前最最重要的布局方法）
  • grid 布局（兼容性还不太好，可以扩展学习）

补充的布局方法（非主要布局方法，但很常用）

  • position定位布局（很常见，需要掌握）
  • inline-block（很常见，需要掌握）

JS则是网页的灵魂所在。这是最难也是最重要的一部分。本阶段最后要求开发者能够大致掌握JS的原生语法，并能了解浏览器的主要JS API。

另外作为前端工程师我们将不可避免地接收来自设计师的设计稿，有来自PS的，有来自Sketch的，有来自Figma的，甚至有来自png/jpg的。请至少掌握PS及Sketch的简单操作。**

基础

基础教程推荐

可快速通过Web入门，对网页开发有个大概感受，Head First HTML与CSS（第2版）可能会让你感受更深点，然后可以做点小作业，继续专研CSS权威指南（第3版）及JavaScript权威指南第一部分。

日常作业

  • 入门读书笔记，请公开在语雀上

基础小作业

进阶

该子阶段，我们除了熟悉浏览器的JS API，还需要全面了解响应式web和移动web。

进阶教程推荐

JavaScript DOM编程艺术可以让你掌握DOM API，BOM API，让你更加了解浏览器中的JavaScript。响应式的开发则需要学习响应式Web设计 HTML5和CSS3实战（第2版）。移动端前端开发，其实和PC的差异不是很大，看HTML5触摸界面设计与开发的同时，重点掌握移动端的适配方案，具体可以看看这篇文章移动端Web页面适配方案（整理版）。

日常作业