2022年Web 前端怎样入门?最新Web前端入门的学习路线

🍅 联系作者:技术交流,定期分享Java硬核技术干货 ;
🍅Java架构师:免费领取200G架构师学习资源;
🍅 添加公众号:滴石编程

2022年Web 前端怎样入门?最新Web前端入门的学习路线

 

 2022年最新Web前端入门的自学路线

> 新手入门前端,需要学习的基础内容有很多,如下。

一、HTML、CSS基础、JavaScript语法基础。学完基础后,可以仿照电商网站(例如京东、小米)做首页的布局。

二、JavaScript语法进阶。包括:作用域和闭包、this和对象原型等。相信我,JS语法,永远是面试中最重要的部分。

三、jQuery、Ajax等。jQuery没有过时,它仍然是前端基础的一部分。

四、ES6语法。这部分属于JS新增的语法,面试必问。其中,关于 promise、async 等内容要尤其关注。

五、HTML5和CSS3。要熟悉其中的新特性。

六、canvas。面试时,有的公司不一定会问canvas,靠运气。如果时间不够,这部分的内容可以先不学。但如果你会,绝对属于加分项。

七、移动Web开发、Bootstrap等。要注意移动开发中的适配和兼容性问题。

八、前端框架:Vue.js和React。这两个框架至少要会一个。入门时,建议先学Vue.js,上手相对容易。但无论如何,同时掌握 Vue 和 React 才是合格的前端同学。

九、Node.js。属于加分项,如果时间不够,可以先不学,但至少要知道 node 环境的配置。

十、自动化工具:构建工具 Webpack、构建工具 gulp、CSS 预处理器 Sass 等。注意,Sass 比 Less 用得多,gulp 比 grunt 用得多。

十一、前端综合:HTTP协议、跨域通信、安全问题(CSRF、XSS)、浏览器渲染机制、异步和单线程、页面性能优化、防抖动(Debouncing)和节流阀(Throtting)、lazyload、前端错误监控、虚拟DOM等。

十二、编辑器相关。Sublime Text 是每个学前端的人都要用到的编辑器。另外,前端常见的IDE有两个:WebStorm 和 Visual Studio Code。WebStorm 什么都好,可就是太卡顿;VS Code就相对轻量很多。个人总结一下:用VS Code 的人越来越多,用 WebStorm 的人越来越少。

十三、TypeScript(简称TS)。ES 是 JS 的标准,TS 是 JS 的超集。TS属于进阶内容,建议把上面的基础掌握之后,再学TS。

## 推荐的前端图文教程

我这里有前端进阶架构vip学习资料,包含内容有:HTML、css3、JavaScript、Vue,移动端web开发,Ajax、jQuery、canvas、等多个知识点。需要获取这些内容的朋友可以点击 [“前端”](https://docs.qq.com/doc/DYm9VT2h3ZUp0V29l) 两个字领取


[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-maVwpk59-1667138897504)(https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/2a38fbb03a364644be2957f3b353b880~tplv-k3u1fbpfcp-zoom-1.image)]

编辑切换为居中

添加图片注释,不超过 140 字(可选)


非常详细和贴心,你值得star。这个前端教程主要有三个作用:

1.  网上的大部分入门教程,都不太适合初学者,本项目争取照顾到每一位入门者的同理心。
1.  帮助前端同学提供一个精品学习路线和资源,提高学习效率,少走很多弯路。
1.  可以当做前端字典,随时翻阅,查漏补缺。

## 推荐的书籍

-   《你不知道的JavaScript》

上面这套书有上、中、下三本,你都可以读一读。如果时间不够,那就先读第一本。

-   《网络是怎样连接的》

程序员面试的时候,经常会被问的一个问题是:“在浏览器的地址栏输入url,按下回车后,发生了什么?”

为了弄清楚这个问题,看上面这本书,足够了。如果你想入门计算机网络,这本书也是必读的。评价非常高。

关于这个问题,也可以看下面这篇文章:浏览器输入 URL 后发生了什么?

-   《CSS世界》

关于 CSS 的书籍,首先推荐这本书,我身边的大佬们都说这本书好。虽然我不是大牛,但我也觉得这本书很好。

如果 js 熟练,说明你是有技术深度的前端;如果 css 熟练,说明你是有经验的前端。

框架对入门越来越不友好了,功能越来越多了,各种东西层出不穷,如果你要学框架的话,咱就从vue开始吧,为什么用vue?中文社区完善呀,而且学习曲线不是很陡峭,而且公司里常用呀

学习vue之前,你得了解下前端的一个大杀器:node.js

先安装好node.js然后搞懂这几个事情

1.  node和npm是什么,他们可以用来做什么
1.  npm init命令有什么作用
1.  node_modules和package.json有什么作用?

-   推荐读物:不推荐读书=0=,多看文档,前端框架变化太快了
-   这里就没有大纲了,把官方文档的基础部分看完就好了,其他的不用看,vuex和vue-router相关看到就跳过吧,暂时对你来说不需要
-   带着这几个问题去学习

1.  使用vue-cli生成的项目,目录结构是怎么样的?其中的每个文件夹和每个文件的作用是什么?(vue-cli是有官方教程的,按照官方教程来生成项目!!!)
1.  什么是双向绑定?
1.  mvvm框架是什么意思?
1.  实现一个todolist,网上demo很多,找一个一步步来就好了,关键是要理解mvvm框架的意义,为什么要使用mvvm框架
1.  关于框架这一块我写的不太详细,有空再补充吧,我感觉这里一开始主要卡着的点应该就是关于项目的复杂结构(对新手而言),不清楚那么多文件是干什么的

## vuex和vue-router

-   做好了todolist之后,你需要了解两个东西,也是工程化非常重要的两个东西
-   vuex&&vue-router
-
-   同样,这两个教程只看基础部分,然后解答下面这些问题

1.  vuex和vue-router分别是什么?
1.  vuex和vue-router分别能做什么?
1.  vuex和vue-router的诞生是为了解决什么问题?
1.  什么情况下需要使用vuex,什么情况下需要使用vue-router?

-   解决了这些问题之后,你需要实战,这里推荐一个github上对vuex,vue-router入门比较友善的项目:https://github.com/bailicangdu/vue2-happyfri
-   实战要点:

1.  先看懂项目中vuex和vue-router的用法(第一步不是看懂项目,而是看vuex和vue-router怎么用)
1.  自己新搭建一个项目,配置好vuex和vue-router到能使用的地步
1.  看懂项目
1.  自己实现,实现的时候就不要看源码了,想不明白的地方可以回来看


好了如果进行到这里,你大概也就入门了吧23333,这个时候你也就能利用前端的知识解决问题了,但是离一个前端还是有很长的路要走的~~比如上面说的基础打牢和能力进阶

## 项目推荐

1.vue完成的饿了吗前后台webapp

https://link.zhihu.com/?target=https%3A//github.com/bailicangdu/node-elm/blob/master/API.md

2.一个vue完成的QQ音乐

https://link.zhihu.com/?target=https%3A//github.com/timelessover/vue-QQmusic

基本上上面项目都能自己做出来之后,前端也就彻底入门了,补充基础知识之后,找找工作实习也没啥大问题(但是很多人卡死在vue门口=。=),加油吧朋友们


========干货结束分割线======


关键其实还是驱动力,如果项目驱动能给你足够的动力的话,那就不停的找项目做吧,走完上面的流程,再看看书的话,找个学校的工作室帮老师做项目就好了(应该到工作室的门槛了)~

如果驱动力不够的话,那就关注我呗~ 我之后会发些之前从入门前端到现在遇到的一些事情,希望对你们有些帮助~

如果有不懂的可以来问我~说不定你骨骼清奇,一下子就打通任督二脉,直接入门了呢


如果你觉得这篇内容对你还蛮有帮助,我想邀请你帮我三个小忙:

1.  点赞,转发,有你们的 『点赞和评论』,才是我创造的动力。
1.  私信后台回复【前端】有惊喜!
1.  同时可以期待后续文章ing

    <div id="blogExtensionBox" style="width:400px;margin:auto;margin-top:12px" class="blog-extension-box"><div class="blog_extension blog_extension_type1" id="blog_extension">
      <div class="blog_extension_card" data-report-click="{&quot;spm&quot;:&quot;1001.2101.3001.6470&quot;}" data-report-view="{&quot;spm&quot;:&quot;1001.2101.3001.6470&quot;}">
        <div class="blog_extension_card_left">
        <img src="https://img-blog.csdnimg.cn/2006b4b2f5ee47cfa965047cb371e754.png" alt="">
      </div>
        <div class="blog_extension_card_cont">
          <div class="blog_extension_card_cont_l">
            <span class="text">小柴学Java</span>
            <div class="blog_extension_card_cont_r">
              <img class="weixin" src="https://g.csdnimg.cn/extension-box/1.1.6/image/weixin.png" alt="">
              <span>微信公众号</span>
              <img class="go" src="https://g.csdnimg.cn/extension-box/1.1.6/image/ic_move.png" alt="">
            </div>
          </div>
          <span class="style">专注Java领域干货分享,不限于面试技巧、JV</span>
        </div>
      </div></div></div>
</article>
  • 0
    点赞
  • 0
    收藏
  • 打赏
    打赏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
©️2022 CSDN 皮肤主题:大白 设计师:CSDN官方博客 返回首页
评论

打赏作者

滴石编程

你的鼓励将是我创作的最大动力

¥2 ¥4 ¥6 ¥10 ¥20
输入1-500的整数
余额支付 (余额:-- )
扫码支付
扫码支付:¥2
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值