作为一个完全不懂技术并且与生俱来的晕代码体质产品设计师，终于脑袋一热抽了个风，买了一套比较完整的前端入门课程，准备花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天）
后话：
跟公司技术大神们沟通了一下，大致意思是就算学完这么多内容然而也还是看不懂别人的代码。。。让我先去哭一下。。。
网友评论