热门标签 | HotTags
当前位置:  开发笔记 > 编程语言 > 正文

2021年自学前端的总结,送给正在自学的你们!

2021年自学前端的总结,送给正在自学的你们!,Go语言社区,Golang程序员人脉社

我是从不分HTML和HTML5,不懂CSS2和CSS3开始学的。然后学了一段时间后试着重构天猫淘宝,但是没有一次完整做出来的。页面写道轮播图就写不下去了。js更是碰都没有碰过。看书看到js,闭包什么的以为自己懂了,一做题就出错。做的最好的东西就是跟着黑马的小课做的一个小程序。

一度要放弃,因为学的太乱了。还好坚持下来了,我要把我学习的坑分享给大家。希望每一个学习前端的人都能看到本篇内容~


学习路线:


  • 基础:HTML+CSS页面搭建,CS核心和PC端页面开发,HTML5移动端页面开发;
  • 核心:web前端核心技术Javascript,ecnmasript,dom,ajax,json,正则,作用域,运动框架,核心算法,高级算法,
  • 高级:html5+高级Javascript开发,大数据可视化,webapp交互接口,lbs定位,微信sdk,es6标准,高级算法,数据结构,插件封装
  • 框架:bootstrap,vue、react、angular、sass企业开发应用;

看下图:

先来给大家推荐一本书,不是说最好的书,但是很适合入门。我建议大家的学习方法是,先看书理解概念,然后根据概念学习模块。看视频+敲代码;在这就多说两句,我是搜了好多家视频,什么关注公众号总推荐小课,我就花个几块钱报名集训营开始学,还找了慕课,w3c,还有千锋的各种课程,还有腾讯课堂上面的一些小机构的各种课,好多时候上个集训营就要被忽悠报大额课了,后来在B站找到好多很全的前端课。我下面都会分享出来的。一定要边看边写,最好是ipad看课,电脑敲代码。这样学习进度非常快,最好加一些靠谱的交流群,不然好多时候找不到自己的问题所在。

回归正题:

这本书,每天看个两个小时,大概一个月就可以看完了,他都是概念+案例+习题,有一些避坑大家理解就好。


第一个边学边理解边敲代码阶段:html5+css3;

课程:前端小白零基础入门HTML5+CSS3 

在这个阶段主要学习的知识点:


  • 浏览器与浏览器内核、语法以及使用、常用标签、语义化、表单元素、HTML、新增标签;
  • CSS基本语法规范、常用的选择器用法与技巧、复合选择器使用、数职与单位、文字文本样式、CSS新增选择器
  • CSS盒子模型、CSS背景技巧、圆角/阴影/过度、定位和浮动、伪类和伪元素、Chrome调式工具、CSS高级技、CSS常见布局技巧大全、网页开发规范以及流程、CSS企业级网页开发、网页开发常见问题以及解决方案、CSS常见兼容性问题以及解决方案、Css3新增属性、photoshop切图、cutterman插件的使用;
  • 代码组织原则、电商类复杂的页面布局规范、CSS初始化技术比如Normalize.css使用、复杂的网页结构排版技巧、常见动画过度特效等;

上述阶段学习的话,建议学习一个月的时间,其实之前我不喜欢用学习时间规范内容,因为我觉得个人学习程度不一样。但是小伙伴们切勿像我一样,有的学习时间过长,知识点补来补去,有的时候又过短并不扎实。


第二个阶段:Javascript高级程序设计


  • 课程:Javascript教程精讲(知识点精讲+贪吃蛇项目) 
  • 课程:Javascript全面深入教程
  • 课程:6天玩转Javascript基础教程

在这个阶段重点学习内容:


  • 原生Javascript交互功能开发项目、面向对象进阶与ES5/ES6引用项目,还有工具库的自主研发项目;
  • 基本的输入输出方法,变量、数据类型、类型转化、运算符、流程控制语句、数组、函数等等;
  • 获取获取页面元素的常见方法、页面中事件和时间机制、操作元素样式和属性、新增元素和移除元素、BOM操作大全‘
  • 常见的网页特效;JQuery的优势和选择器等内容;
  • 另外就是建立面向对象是想,创建对象,Javascript的对象深入理解,闭包原理和使用场景。

说点容易理解的,其实这个阶段就是我们输入账号密码之后是否匹配成功,还有一些网页的弹框和页面点击的特效,浏览器的前进后腿还有缓存是怎么实现的。JS+算法,学明白了就是一名合格的前端。推荐书籍:《JavaScrip DOM编程艺术精讲》《Javascript高级程序设计》;


第三个阶段PC端全栈项目开发之后学习移动端全栈


  • 课程:实战商城开发完整视频
  • 课程:前端与移动开发基础入门到精通

在这个全栈阶段重点学习内容:

内容包含:(jQuery经典交互特效开发、HTTP协议、Ajax进阶与PHP/JAVA开发项目、前端工程化与模块化应用项目、PC端网站开发项目、PC端管理信息系统前端开发项目)

移动端项目开发重点学习内容:

(Touch端项目、微信场景项目、应用Angular+Ionic开发WebApp项目、应用Vue.js开发WebApp项目、应用React.js开发WebApp项目)

项目实战这个阶段是可以放在前面学习的,毕竟找点满足感。


第四个阶段NODE.JS与AJAX学习阶段:


  • 课程:Vue.js + Node.js-构建音乐播放器新玩法 
  • 课程:AJAX视频教程

本阶段是可以构建客户端服务器交互模型熟悉网络通信相关概念;能够使用Node.js进行web端开发,基于Node.js开发web应用;Express·RESTFul API,原声AJAX、Jquery的AJAX相关API使用,跨域请求以及解决方案;前端模板引擎;


第五阶段:REACT.JS项目实战


  • 课程:Reactjs入门教程
  • 课程:Reactjs精品教程 

小程序开发、ReactNative、各类混合应用开发。


第六阶段:Vue.JS项目实战

课程:Spring Boot+Vue.js+FastDFS实现分布式图片服务器 


第七阶段:微信小程序

课程:6天从入门到实战玩转微信游戏小程序 

小程序其实要是学,大概商城的课很多。真的去找的话,也有好多好玩的小程序,简单的有跳一跳,难一点的有人脸识别的小程序。

以上就是前端学习路径,下面说一下需要准备的东西。首先就是浏览器,Chrome和火狐,简易版编辑器还有webstorm编辑器,visualstudio code编辑器,photoshop,Git开源的分布式版本控制系统、集成环境软件WampServer、MySQL、微信开发者工具、Postman;

学习之前你应该有的手册就是html和css手册,还有js手册所有你需要学的,都可以去找手册帮助学习。

另外git和github,需要会一点,不一定有多精通。可以翻翻墙,看看github,学会用google输入关键字。自学的话,学完上面内容怎么也要八个月了。只要坚持!对以后工作什么的,现在养成的自学习惯都非常好的。

 




推荐阅读
  • 本文介绍了多个关于JavaScript的书籍资源、实用工具和编程实例,涵盖从入门到进阶的各个阶段,帮助读者全面提升JavaScript编程能力。 ... [详细]
  • 本文探讨了2019年前端技术的发展趋势,包括工具化、配置化和泛前端化等方面,并提供了详细的学习路线和职业规划建议。 ... [详细]
  • 本文详细介绍如何使用Python进行配置文件的读写操作,涵盖常见的配置文件格式(如INI、JSON、TOML和YAML),并提供具体的代码示例。 ... [详细]
  • 深入理解C++中的KMP算法:高效字符串匹配的利器
    本文详细介绍C++中实现KMP算法的方法,探讨其在字符串匹配问题上的优势。通过对比暴力匹配(BF)算法,展示KMP算法如何利用前缀表优化匹配过程,显著提升效率。 ... [详细]
  • 自学编程与计算机专业背景者的差异分析
    本文探讨了自学编程者和计算机专业毕业生在技能、知识结构及职业发展上的不同之处,结合实际案例分析两者的优势与劣势。 ... [详细]
  • 网易严选Java开发面试:MySQL索引深度解析
    本文详细记录了网易严选Java开发岗位的面试经验,特别针对MySQL索引相关的技术问题进行了深入探讨。通过本文,读者可以了解面试官常问的索引问题及其背后的原理。 ... [详细]
  • 本文深入探讨了JavaScript中实现继承的四种常见方法,包括原型链继承、构造函数继承、组合继承和寄生组合继承。对于正在学习或从事Web前端开发的技术人员来说,理解这些继承模式对于提高代码质量和维护性至关重要。 ... [详细]
  • C++实现经典排序算法
    本文详细介绍了七种经典的排序算法及其性能分析。每种算法的平均、最坏和最好情况的时间复杂度、辅助空间需求以及稳定性都被列出,帮助读者全面了解这些排序方法的特点。 ... [详细]
  • 深入理解Cookie与Session会话管理
    本文详细介绍了如何通过HTTP响应和请求处理浏览器的Cookie信息,以及如何创建、设置和管理Cookie。同时探讨了会话跟踪技术中的Session机制,解释其原理及应用场景。 ... [详细]
  • 本文介绍了如何使用JQuery实现省市二级联动和表单验证。首先,通过change事件监听用户选择的省份,并动态加载对应的城市列表。其次,详细讲解了使用Validation插件进行表单验证的方法,包括内置规则、自定义规则及实时验证功能。 ... [详细]
  • 前言--页数多了以后需要指定到某一页(只做了功能,样式没有细调)html ... [详细]
  • 本文详细介绍了Java编程语言中的核心概念和常见面试问题,包括集合类、数据结构、线程处理、Java虚拟机(JVM)、HTTP协议以及Git操作等方面的内容。通过深入分析每个主题,帮助读者更好地理解Java的关键特性和最佳实践。 ... [详细]
  • 探讨在循环中调用$.post()时,回调函数为何会在循环结束后才开始执行,并提供解决方案和优化建议。 ... [详细]
  • 本文深入探讨了HTTP请求和响应对象的使用,详细介绍了如何通过响应对象向客户端发送数据、处理中文乱码问题以及常见的HTTP状态码。此外,还涵盖了文件下载、请求重定向、请求转发等高级功能。 ... [详细]
  • 本文探讨了在使用 Ajax 发送请求时,安卓浏览器出现的重复请求问题。该问题仅出现在安卓设备上,而 iOS 和 PC 端均无此现象。具体表现为服务端接收到多个重复的请求,导致操作逻辑混乱。 ... [详细]
author-avatar
东隅海纳堂_684
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有