新手应该如何入门前端

  7月1日的时候参加豪情大神组织的群内个人经历分享,总结了一下个人入门前端的一个过程,现整理成文,希望对后来者有帮助。

  一.个人自我介绍

      本人是14年飞行器制造专业毕业,之后在深圳的一家研究院从事航天方面的工作,之后跟随当时的领导跳槽到了一家新公司, 担任软件工程师,刚来的时候恰好公司官网出现问题, 领导就把这个事情交给我, 当时还根本没有接触前端, 只能硬着头皮上了。 然后就入坑了。

  二.个人推荐的入门最佳实践

      我入门的时候就是在网上找了一个帖子然后一头扎进去,按照帖子给的路线去学习, 现在看来,其实是走了弯路了。 希望看到这篇帖子的人能够少走一点点弯路。

    1 第一阶段:

      推荐菜鸟教程 讲里面HTML和CSS JS部分全部过一遍, 里面的例子也照着写一遍。 这样你就对HTML CSS JS有大概的了解了。

    2 第二阶段:

      这个阶段你就应该去大量的买书了。(不推荐看视频, 知识点太杂, 不成体系)个人推荐几本书:

         2.1 HTML : 个人没有买HTML的书本,感觉菜鸟教程上的已经够了。

         2.2 CSS  :《精通CSS》(人民邮电出版社) 这本书将里面的CSS的概念讲的很清楚了。有一本书就够了。

         2.3 JS     : 《JavaScript》(人民邮电出版社) 这本书需要反复看, 不过这个阶段你先通读一遍, 理解里面的一些重点概念。

         2.4 DOM  :  《JavsScript DOM编程艺术》(人民邮电出版社)  这个里面都是很几本很浅显的DOM操作,但是入门绝对神器。

    3 第三阶段:

      当你看完上面的基本书, 跟着上面书的例子敲一遍之后, 这个时候就应该大量的练习了。推荐几个比较好的项目:

         3.1 freeCodeCamp国外的一个项目,能够很好的锻炼你的英文能力。(需要FQ)

           3.2百度前端技术学院里面学生居多,有很好的讨论氛围。

      提一点, 在做这个项目的过程中可能会碰到不知道如何下手的情况, 建议除了查手册以为不要去百度找答案,去你在第二阶段看到的书里面找。那些书都是经典, 都是大师写的代码, 不知道比网上的高多少。

      在这个过程中, 你还需要做的是大量的看前端的书, 这里推荐几本:

         3.3《JavaScript语言精粹》、《编写可维护的JavaScript》、《高性能JavaScript》

    4 第四阶段:

        如果这个时候你还没有放弃前端的话, 恭喜你, 你算入门前端了。 但是离前端开发还有距离, 不过已经可以跟上现代前端的开发步伐了这个时候要做的就是:

        4.1 入门一个前端开发框架, 这里推荐最火的react

        4.2 入门一个前端自动化工具 , webpack

        4.3 入门一个CSS预处理语言,sass

     5 第五阶段:

        这个时候就可以自己开发项目了。 准备自己的求职作品。 那么要做的事情:

        5.1 用上述的知识去做项目。大量的做,坚实基础

        5.2 空闲时间看看大牛博客, 博客都是对某个问题有很深入的研究。这个才是追随大牛博客的意义,这里推荐几个常去的网站:

             豪情前辈 张鑫旭前辈  叶小钗前辈 简书 segmentfault 前端乱炖

  三 个人的一点小建议(不一定对)

      学技术是一件枯燥的事情,希望能够耐的住寂寞。给大家一点小建议:

        1.目前来看, 前端还是英文世界主导, 所以尽量让自己能看得懂英文技术文献

        2.了解基础知识的时候一定要看书, 不要去看视频或者网上的博客, 因为那样你的知识太零散了, 不成体系。

        3.做项目可以看看视频, 因为一个项目往往对经验要求高, 这个时候,视频才是最直观,信息量最大的表达方式,表现手法。

        4.如果你觉得本文对你有一点帮助。那么欢迎大家加入 豪情大神 JS前端开发跳板3群:570259839  这里有最好的技术交流氛围,对新人的成长很有帮助。

  以上,祺。

          

时间: 2024-12-26 06:41:04

新手应该如何入门前端的相关文章

webpack入门--前端必备

webpack入门--前端必备 什么是 webpack? webpack是一款模块加载器兼打包工具,它能把各种资源,例如JS(含JSX).coffee.样式(含less/sass).图片等都作为模块来使用和处理.我们可以直接使用 require(XXX) 的形式来引入各模块,即使它们可能需要经过编译(比如JSX和sass),但这不用我们理会,因为 webpack 有着各种健全的加载器(loader)在处理这些事情. 为什么要使用 webpack? 很简单的一个道理,难道写react的同学会不用它

WebSocket.之.基础入门-前端发送消息

WebSocket.之.基础入门-前端发送消息 在<WebSocket.之.基础入门-建立连接>的代码基础之上,进行添加代码.代码只改动了:TestSocket.java 和 index.jsp 两个文件. 项目结构如下图: TestSocket.java 1 package com.charles.socket; 2 3 import javax.websocket.OnMessage; 4 import javax.websocket.OnOpen; 5 import javax.webs

深圳汇道科技:新手不知道的入门编程的技术路线!速码!

不会设计的编程不是好前端,看着我们汇道科技的设计大神小哲与前端小宇又在为项目争执不下,小编不禁发出如此感慨,其实一个团队里面,项目都是环环相扣的,上一环节的参与者必须要懂得一些下一环节的相关知识,这样大家沟通起来才会更好更快!这就要求我们必须掌握多方面知识! 把编程单独拿出来说,编程不是一件无趣的事,它会给你带来无尽的欢乐.如果掌握不了多方面知识,那么我们可以把专业技能练到:精.致.特! 可是如何以最快的速度入门,这才是广大新手最关心的问题.本文就来谈谈编程入门的学习路线. 一.技术路线介绍 技

新手写给更新的新手的编程入门建议(python)

引文 我是从去年开始学习编程(python)的,到现在仍然还在入门阶段.之所以我的入门阶段如此之长,我想大概有以下几个原因: 一.没有选对教材 一开始我看了<python简明教程>,书中大部分概念都很简单,只能算是有了一个基本的了解.然后做了某个网络在线教程,一味的强调语法规则,反觉枯燥乏味,像是做填空题.再后来,看了udacity上的教程,发现python原来能做这么多有趣的事情,这才有了更大的兴趣.但udacity上的课程仅仅是几个小项目,适合刚开始学习时培养兴趣.然后,我有发现了<

正确入门前端的过程--方向式学习

随着一年一年飞速发展,互联网行业也逐渐开始大众化,越来越多的人选择计算机这个行业 大部分共同目标都是"拿高薪,提升技术,团队协合作" 当然,对于很多初学者来说,如何正确的入门并快速走向成熟化,成了一个偏难的过程,很多初学者认为这们技术就是多学多练,其实不完全对.多学多练是必然的,但是又有多少人能够做到一遍成功,一次通过呢? 这个过程对于初学者来说很重要,要真正确实的去体会这个过程,去感受这个过程的走向,自己知道这个走向到底是走上坡还是下坡,自己心里应该很明白.没有一个零基础者学习一门技

10 分钟,带你快速入门前端三大技术(HTML、CSS、JavaScript)

听到前端技术,不少朋友一定会感到有些陌生.但其实,前端,你每天都在接触. 你正在使用的APP,你正在浏览的网页,这些你能看到的界面,都属于前端. 而前端最重要的三大技术,HTML,CSS,JavaScript,则是每一个前端开发者必须具备的技能. 掌握这些技能,你可以快速地做出一个酷炫的APP界面或者一个简单大方的网站页面.因此,就让我们一起来快速学习一下这三门技术吧. 以下内容节选自课程<Vue.js 和 Node.js 构建内容发布系统>. 大家也可以点击课程链接,在实验楼提供的虚拟机环境

一张思维导图,告诉你Android新手如何快速入门

本博客出自公众号安卓应用频道:http://mp.weixin.qq.com/s?__biz=MzA3MDMyMjkzNg==&mid=2652261947&idx=1&sn=80ab40c249105108e0a03a3aa160eb2e&scene=0#wechat_redirect ↓↓ Android知识体系框架 ↓↓ 接下来,我们具体讲一讲各个部分的内容. 四大组件 UI 设计 常见View的使用 网络 线程和进程 数据存储 进阶学习 编程基础 网络协议 数据库

一起入门前端(一)

初入web前端,一些学习知识同大家分享下: 首先,web前端主要学习三个部分:HTML.CSS.JavaScript.今天要讲的主角是HTML: 先po出一张HTML文件结构图: 接着,咱们聊聊HTML是个what? HTML是用来描述网页的一种语言,指的是超文本标记语言(Hyper Text Markup Language),它不是一种编程语言,而是一种标记语言,使用标记标签来描述语言.标签是由尖括号包围的关键词,通常是成对出现的. 介绍下常用的关键词:         HTML标题:是通过H

spring boot + vue + element-ui全栈开发入门——前端编辑数据对话框

 需求 1.点击“添加”按钮,弹出录入数据的对话框窗口,并录入数据,如果数据有误则不允许提交.数据填写完毕后,点击“保存”按钮,调用http协议提交数据,提交完毕刷新页面数据.点击“取消”按钮关闭对话框. 2.点击列表中的“修改”按钮,弹出数据修改对话框窗口,功能同上. 3.点击列表中的“删除”按钮,弹出删除数据的询问窗口,功能以此类推. 一.添加 在“src\mock\member.js”中,增加模拟保存数据的方法: adapters.push( (mockAdapter) => mockAd