第一篇-自学前端入门

作为一个完全不懂技术并且与生俱来的晕代码体质产品设计师，终于脑袋一热抽了个风，买了一套比较完整的前端入门课程，准备花3个月左右时间学习，进化成一个能看懂代码，没事还能coding的小能手！

在正式学习前，先需要对前端进行大致了解，之后再制定学习计划。于是打开课程第一章第一节第一段，看完之后梳理了一下几个核心信息：

第一，了解前端

一、前端是做什么的？

前端主要做的事情其实就是实现高保真设计稿，将所有页面交互、视觉等完成，使用户能直观感受并使用产品的一个技术岗位。

比如：大家使用知乎时，知乎网站上呈现的视觉效果（包括颜色、边距、字体大小等）、点击反馈（点击某个按钮出现一个弹框等），这些都是需要前端的参与完成的。

二、前端主要需要哪些技能？

前端在日常工作中，最常使用的几种技能包括：HTML、CSS、JavaScript、ps切图、DOM编程等

上面这些英文单词是不是经常看到，但根本不知道是干嘛用的。。。感觉不都是代码吗。。。然而并不是。。

三、每种技能有啥用？

1.HTML

全称：Hypertext Markup Language：超文本标记语言，主要是用来写页面结构，定义每个页面是什么；

HTML写出来的代码仅仅能将页面中的列表、输入框、图片、超链接、按钮等信息呈现出来，但效果也是很辣眼睛的。。

2.CSS

全称：Cascading Style Sheets：层叠样式表，用来表现HTML等文件样式。

用大白话解释，就是用来写页面样式，定义页面长什么样子的。将CSS的代码和HTML代码整合到一起后，就能将页面本身的样式呈现出来。但这是的页面是静态，无法点击和产生交互动作的。

静态页面

3.JavaScript

是一种直译式脚本语言，是一种动态类型、弱类型、基于原型的语言，内置支持类型。

通过HTML和CSS写出来静态页面后，再加入JavaScript代码，让页面动起来。比如，点击按钮时出现弹层。所以JavaScript其实就是用来呈现页面交互、动效等功能的语言；

页面交互

4.DOM

全称：Document Object Model：是处理可扩展标志语言的标准编程接口操作。

对网页上的内容进行操作，与服务器进行交互。比如：表单中输入信息后，点击登录就能验证，并进入新页面。这些都是通过DOM实现。

5.PS切图

是指将设计稿切成便于制作成页面的图片，并完成html+css布局的静态页面。其实就是通过ps切片工具，把图片切成小块，方便编程的一个方式。

PS切片

第二，制定学习计划

第一阶段：基础入门（共10天）

-HTML基础（3天）

-CSS基础（2天）

-JavaScript基础（5天）

第二阶段：进阶学习（共60天）

1、页面制作（11天）

2、JavaScript程序设计（11天）

3、DOM编程艺术（14天）

4、页面架构（12天）

5、产品前端架构（12天）

---

后话：

跟公司技术大神们沟通了一下，大致意思是就算学完这么多内容然而也还是看不懂别人的代码。。。让我先去哭一下。。。