零基础转行web前端,要学习多久?需要掌握些什么?菜鸟攻略_前端菜鸟教程

web前端开发技术人才越来越吃香,而且web前端领域划分越来越细,对技术的需求越来越高,想学习web前端的人也是越来越多。那么,如何学习web前端知识?从哪开始?转型成为web前端工程师需要学些什么?小白到高手需要多久?1、转型web前端需要学什么第一阶段:你要从最基础的HTML/CSS开始,简单地说,HTML就是一堆非常简单的标签,而CSS则是把你画画的流

零基础转行web前端,要学习多久?需要掌握些什么?菜鸟攻略

web前端开发技术人才越来越吃香,而且web前端领域划分越来越细,对技术的需求越来越高,想学习web前端的人也是越来越多。那么,如何学习web前端知识?从哪开始?转型成为web前端工程师需要学些什么?小白到高手需要多久?

零基础转行web前端,要学习多久?需要掌握些什么?菜鸟攻略_前端菜鸟教程

1、转型web前端需要学什么

第一阶段:你要从最基础的HTML/CSS开始,简单地说,HTML就是一堆非常简单的标签,而CSS则是把你画画的流程用英语按一定的格式写出来。然后你需要理解常用HTML标签的意思,学会各种CSS的属性,还有CSS的盒模型、优先级、选择器……

第二阶段:JavaScript学习,你要是想在网页上实现交互效果,比如轮播图、点击按钮后播放动画等等,那么就必须学会JavaScript。JavaScript是一门完整、强大、热门的编程语言,浏览器的各种交互效果都由它来做到的。然后学习jQuery,并且通过jQuery继续使用CSS的选择器。

2、转职成为web前端

专精HTML/CSS的前端从业人员也就是前端重构。这里要提一下,有一个职业对于这块很有优势,那就是设计师。不管是UI设计师,还是平面设计师,在页面上如何写页面,也知道怎么做的更好,并且更加理解Web世界,做出更“系统化”的设计。关于CSS的知识,你需要理解文档流、浮动流等各种定位的方式与原理,理解CSS 的继承复用思想、理解浏览器的差异、兼容等。关于HTML的知识,你需要学习语义化、可访问性与结构的合理,以及“结构与样式的分离”等。

你会爱上CSS 3的酷炫属性,可以做出响应式网页设计,用transiton和animation做补间动画与关键帧动画,用transform做缩放、旋转、3D变换,还有圆角、渐变、阴影、弹性盒……掌握了以上的这些,你完全可以利用你的设计功底和web前端知识,做出微信的H5页面、一些有趣的网页,或者个人的网站。

3、如何提升前端技能

如果你还想做出更厉害的交互效果,越来越喜欢编程,建议你成为一个前端工程师/全栈式UI设计师。这时,你必须学会以软件工程师的角度思考。你需要踏踏实实学习编程语言,深入理解作用域、对象、类、封装、继承、面向对象编程、事件侦听、事件冒泡等一大堆编程概念,需要了解浏览器,学习DOM、BOM、CSSOM的API,甚至还有学习一些网络原理,包括域名、URL、DNS、HTTP请求……

如果你还处于迷茫阶段或者是一个小白,那你不要着急着手开始学习,因为没有目的和方法的学习,只会走弯路。这时候,建议你先深入了解有关前端方面的所有资讯,包括前景、就业、行业发展、技术囊括、职业等等,这样才能有目的和方向的学习。

海计划公众号
(0)
上一篇 2020/03/24 05:40
下一篇 2020/03/24 05:40

您可能感兴趣的内容

  • Darkmode.js使用攻略_一键为网站添加黑暗模式

    Darkmode.js使用攻略 官方网址:https://darkmodejs.learn.uno/ 简介描述:一键为网站添加黑暗模式 Darkmode.Js 是一款开源项目,只需…

    2020/03/12
  • v-distpicker使用帮助_一个灵活的,高可用的 vue 省市区选择插件

    v-distpicker使用帮助 官方网址:https://distpicker.pigjian.com/ GitHub:https://github.com/jcc/v-dist…

    2020/03/06
  • liunx如何重启nodejs?入门攻略_liunx入门教程

    想要重启node server 进入相应的项目执行npm stop发现没用 server仍然在,于是要杀掉相应进程。使用命令启动和停止node:1、ps -ef | grep node查看node对应的pid,然后kill pid,再进入对应项目,使用npm start2、如果以上方法不行可以这样:kill node 或者kilall node使用脚本启动和

    2020/03/24
  • node为什么不支持import?指南攻略_import基础入门

    nodejs采用的是CommonJS的模块化规范,使用require引入模块;而import是ES6的模块化规范关键字。想要使用import,必须引入babel转义支持,通过babel进行编译,使其变成node的模块化代码。node编程中最重要的思想之一就是模块,而正是这个思想,让JavaScript的大规模工程成为可能。模块化编程在js界流行,也是基于此,

    2020/03/24
  • CSS Module基础入门_模块小白指南

    CSS Module产生背景在软件工程里面模块指的是可组合、分解和更换的单元。下面是一张css树,项目里面总的css文件是由一系列小的单元组成,比如下面的reset.css就是一个单元。模块化的概念不光在css里面,在JS里面也是同样适用的,我们把代码按照一定的规则和逻辑拆分,分解成可组合可更换的单元,这样就实现了一个最大限度的代码复用。在css中,代码复用

    2020/03/29
  • 高级架构设计师 推荐书籍使用说明_架构基础教程

    关于程序员类的技术书籍有很多,但是往往没有时间阅读,下面的这些书籍,是由John Sonmez(《软技能》作者)精选的架构经典书籍,可以帮助你提高技术技能,让你成为一名更好的程序员。1、《领域驱动设计》丑话说在前头,这是一本难懂的书,我第一次读这本书的时候,也没有完全搞懂,第二次读的时候,就明白多了,直到第三遍通读这本书,才终于读透,本书将教你如何创建领域驱

    2020/03/29
  • 一个网站的开发步骤入门百科_网站菜鸟知识

    经常有朋友说”我想做个网站”、“网站上放个什么什么”、”对你来说应该很容易,帮个忙吧”等等。怎么说呢,大部分非互联网行业的人是不了解网站的开发流程的,他们可能以为就是个简单的页面,顺手拈来,分分钟搞定的,其实不然。今天就来简单聊一聊一个网站的开发步骤,尽量做到简单易懂,希望能让非相关行业的人也能弄懂。准备服务器服务器是运行网站程序的电脑。公网IP每台电脑都有

    2020/04/03
  • 20个值得关注的 Vue开源项目攻略教程_开源新手入门

    Vue 相对不于 React 的一个优点是它易于理解和学习,且在国内占大多数。咱们可以在 Vue 的帮助下创建任何 Web 应用程序。 因此,时时了解一些新出现又好用的Vue 开源项目也是挺重要,一方面可以帮助咱们更加高效的开发,另一方面,咱们也可以模范学习其精华部分。接下来看看新出的有哪些好用的开源项目。uiGradients网址: http://uigr

    2020/03/23
  • Shoelace.css基础知识入门一个超级轻量的CSS入门套件

    Shoelace.css基础入门 官方网址:https://shoelace.style/ GitHub:https://github.com/claviska/shoelace-…

    2020/03/05
  • 如何给网页划分结构?菜鸟知识_网页小白常识

    学习前端第一步:划分网页结构,网页的结构的划分应该遵循哪些原则,如何去划分网页的结构呢?对于一个前端初学者,第一步就是要学会如何划分一个网页的结构。当设计师给到你一张设计图,你需要根据这张图做出一个符合标准的页面,这里所说的标准,即w3c标准,参考w3school在线教程。那么做出一个完整的符合标准的网页第一步就是要划分网页的结构。一般来讲,网页结构的划分需

    2020/03/23
  • js模块化总结小白知识_模块化零基础入门

    从前端打包的历史谈起在很长的一段前端历史里,是不存在打包这个说法的。那个时候页面基本是纯静态的或者服务端输出的, 没有 AJAX,也没有 jQuery。Google 推出 Gmail 的时候(2004 年),XMLHttpRequest, 也就是我们俗称的 AJAX被拾起的时候,前端开发者开始往页面里插入各种库和插件,我们的 js 文件程指数倍的开始增加了。

    2020/03/30
  • 如何给div、p添加onload事件?基础知识_事件基础知识

    前提其实只有 、、、、、、 这些标签才有onload事件,而div、p等标签是没有的。但如果我们还是想在div append到DOM时做一些事情该怎么办呢?有人会说那就在append到DOM的代码后面加不就行了,但这样会每个append地方后面都得一一写上,好麻烦。

    2020/03/22
  • vue自定义指令:防抖与节流使用攻略_指令小白攻略

    防抖解释:触发事件后,一段时间内没有再次触发则执行,若此时间段内再次触发重新延时!v-antiShake// 实现Vue.directive(‘antiShake’, {// 被绑定元素插入父节点时调用 (仅保证父节点存在,但不一定已被插入文档中)。/*** el 指令所绑定的元素,可以用来直接操作 DOM 。* binding 一个对象,包含绑定的值*/i

    2020/03/24
  • jquery分页插件pagination.js报错pagination is not a function的bug解决方法攻略教程_jquery入门攻略

    在使用jquery.pagination.js插件的时候,会出现pagination is not a function的错误,这是什么原因导致的呢?这里为大家整理一下,请对比自己的代码参考!1、重复引用jQuery如果第一次初始化时分页可用,后续再次调用分页则报错$(.).pagination is not a function。这可能是由于你首先引入了一

    2020/04/05
  • Windows/Linux 系统中获取端口被哪个应用程序占用小白攻略_Linux小白攻略

    Windows/Linux 系统中获取端口被哪个应用程序占用小白攻略 管理服务程序的时候,可能会查询某个端口当前被哪个进程占用。不仅能找出有问题的进程将其处理掉,也可以用来辅助检查…

    2020/03/20
  • 常用SQL语句分享使用教程_sql基础知识

    前言:日常工作或学习过程中,我们可能会经常用到某些SQL,建议大家多多整理记录下这些常用的SQL,这样后续用到会方便很多。笔者在工作及学习过程中也整理了下个人常用的SQL,现在分享给你!可能有些SQL你还不常用,但还是希望对你有所帮助,说不定某日有需求就可以用到。注:下文分享的SQL适用于MySQL 5.7 版本,低版本可能稍许不同。有些SQL可能执行需要较

    2020/03/24