作为一个完全不懂技术并且与生俱来的晕代码体质产品设计师,终于脑袋一热抽了个风,买了一套比较完整的前端入门课程,准备花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切片工具,把图片切成小块,方便编程的一个方式。
第二,制定学习计划
第一阶段:基础入门(共10天)
-HTML基础(3天)
-CSS基础(2天)
-JavaScript基础(5天)
第二阶段:进阶学习(共60天)
1、页面制作(11天)
2、JavaScript程序设计(11天)
3、DOM编程艺术(14天)
4、页面架构(12天)
5、产品前端架构(12天)
后话:
跟公司技术大神们沟通了一下,大致意思是就算学完这么多内容然而也还是看不懂别人的代码。。。让我先去哭一下。。。