Web 前端怎样入门？ |
您所在的位置：网站首页 › web入门教程 › Web 前端怎样入门？ |
Web 前端怎样入门？
|
写在前面的话，不想看的可以直接拉到原答案～ ========2021.5诈尸============= 我这次！！整了一个花活，下面我讲的内容，我整成了一个交互式学习的网站！！！而且完全免费！！玩着就能学那种，还能收集表情包！！！！ 赶紧来瞅一眼！！ 最近思考了很久，也看了下前端方面的资料，发现市面上免费的前端教程质量真的很参差不齐，所以准备尽最大的努力的把这篇文章写成极度干货，实操性极强，而且适应目前前端大环境的前端入门教程，并不是干货的罗列，而是会细致到实操流程，确保能帮助到大家 ==========2020.06.07更新========= 失踪人口回归？？？没啥毛病，今天更新了初学者需要掌握的调试技巧，至于每个阶段，学哪一块的调试技巧，文中都有附带了详细信息，总结起来就是这篇 也就是说这篇文章我已经嵌在这篇回答里了！！翻下去顺畅的学习吧！！！ 千万别再说，我看了很久没看出哪有错误这种话了！！！学会调试！！！ ==========2019.10.27更新========== 有人对聊天机器人那段有疑惑，而且提到了跨域问题，所以增加了一小段示例代码 ==========2019.10.20更新========== 之前留言或者私聊想加群的朋友们，现在准备建群啦～ qq群：948805468 微信群：加我微信吧，我拉你进群：a1127502049 群作用：前端朋友之间互助答疑～一起学习～，还有就是对文章，学习路径的建议反馈，建议反馈记得@我哈，可以随便皮，但是不要口吐芬芳=。=，也不要负能量之类的 目前正在写【前端学习路线--基础篇】，作为对入门篇的补充，本文说过前端完全入门的三个阶段，初步入门，基础打牢，能力进阶，基础篇就是针对的第二个阶段 后续可能会找些朋友免费带入门，验证下入门篇和基础篇的有效性，所以记得加群和活跃哈哈哈 禁止发任何广告！！维护群氛围，发广告的人会直接T！！ ==========2019.09.08更新========== 失踪人口回归了朋友们，今天更新了 3.5 fetch的教程，以及简单聊天机器人的做法 4.5 vue实战项目推荐 目前为止这个学完这个教程你已经可以做出这些东西了 简单的静态网站（劝退率：10%）2048游戏（劝退率:25%）聊天机器人（劝退率：15%）简易待办清单--todoList（项目劝退率：20%,vue加成劝退率：40%,总劝退率：60%）全民答题webapp（项目劝退率：30%,vue加成劝退率：40%,总劝退率：70%）以及获得持续更新的vue实战项目的收集以及推荐（更新在4.5部分） ==========2019.07.21更新========== 更新了vue入门前的坑相关的文章，说了vue入门前卡住&螺旋蒙逼的主要原因，这边文章什么时候看我也插在这个回答里了，跟着流程走的可以暂时先不用看 下次更新会补充一些vue自学的项目的推荐，然后根据最近帮助入门的朋友们的一些疑惑修改下这个回答 ==========2019.07.07更新========== 这篇文章仅仅讲怎么入门，入门不代表你会前端，只是让你知道前端这个体系是怎么样的，你还需要加固这个体系才能说自己“会前端”，也就是文中提到的基础打牢和能力进阶，这块知识我以后也会逐渐补充学习路径 这次我在文章里加了，vuex和vue-router怎么入门，稍微完善了点框架学习的路径 然后补充了git和github的学习方法和学习路径，以及什么时候开始学这俩玩意 下次更新会说下入门vue前的一个大坑，大多数0基础会在这里卡死一阵子=。=，但是有人指点的话会理解的很快，大概会在7.14日更新 ===========2019.07.04更新========= 收藏数是点赞数的三倍了，朋友们，点赞并且关注我吧，这样我才有持续更新的动力呀 ============以下是原答案========= 看了看高赞答案，总觉得高赞答案太干货了一些，如果确确实实做下去的话，确实可以入门，emmmm，但是总觉得只有很少一部分人能够坚持下去。 我认为入门的话一般是靠自学，而自学最重要的其实是驱动力 自学一件事情，如果没有持续的驱动力，兴趣都会慢慢减弱的。刚好前端这个体系又很庞大，就很容易出现这种局面： 看html，哎呦，挺简单呀，每天看一点，我很有进步啊（兴趣很高，一段时间过去了看css，好像难了一点，不过我好像抗的住（兴趣减弱了，又一段时间过去了看js，emmmmm（兴趣已经不足以让我学习了，摊手看框架，mmp，好累啊，凉透了（放弃治疗再见，我不适合编程……所以学以致用是关键，只学现阶段可以用到的一小部分知识，不至于兴趣磨灭的太严重，然后用项目驱动自己消化知识，用做完项目的成就感来加强自己的兴趣 入门之后再巩固基础，这样大概就能迈进前端的门槛了（说错别打我，毕竟上面都是我自学前端的真实感悟233333） 我在17年用大半年时间自学了前端，做了几个项目，然后进入了准一线互联网厂子。 在拿到offer之后，因为室友考研没去（对，是没去，不是失败……），又决定教一下他前端，帮他找找工作，结果他在两个月内入门了……找到了一份还不错的工作 他对前端可是0基础……而且是拿空闲时间学习……（要问我为什么的话，那可能是因为他聪明吧233333 所以我来分享下这个套路，能不能帮到大家，下面开始上干货啦 ============干货分割线========== 如果你还不太了解编程，或者想知道自己有没有编程的兴趣，请先看这篇文章，如果是奔着前端来的，跳过这个回答 正文开始 先说下需要的工具 版本控制：github和git（先不用学这个，后面我会讲到在哪个时期学） 编辑器：vscode（推荐，因为我是vscode党），webstorm，sublime…… 调试工具：chrome devtool 包管理：npm（这个在学习框架的时候再开始用吧，一开始看对新手还是有点劝退的） ================= 如果以找工作为目的的话，学习前端我把它分为三个阶段 兴趣启蒙+初步入门基础打牢（巩固基础知识，对写过的代码有深一点的理解能力进阶（说白了就是刷刷面试题吧23333，了解一下新一点，高级一点的技术然后这三个阶段的核心都是靠项目驱动，没有项目巩固的知识点，做了也记不住~~（一开始可能是通过自己的项目驱动，到之后也可以靠实习的项目来驱动 这个回答我会详细说说怎么入门，也就是第一个阶段，这个阶段的核心就是，学会一个前端生态的最小单元。 这句话是什么意思呢，就是只学习目前用的上的一小部分html，css，js和框架，完成一个基础项目 这时候就已经入门了，可以反过头来巩固基础知识了。 下面是学习这个最小单元的4个部分 1.学习html（1-2天，不要超过2天）教程：w3cschool，不推荐视频教程（因为视频教程讲的太多了，很多东西对于入门做东西用不上）推荐读物：不推荐只看我这张图上提到的部分（图上的大纲都是按照w3cschool的教程写的），要看到什么程度呢？大致有印象，知道这个标签是干啥的就行了 学习html大纲带着这几个问题去看教程，保证看完之后这几个问题都有自己的理解html是什么html的基本结构长什么样子标签是什么属性是什么看完之后用这个html自测表测一下自己，看看能记起多少标签，10个左右就可以进入下一阶段了 html自测表2.学习css（2-5天，不超过5天）还是那句话，学以致用，只学满足自己做小项目所需的最少知识 教程：推荐w3cschool，不推荐视频教程推荐读物：css权威指南（全部都学完了回过头来再看吧）只学我这张思维导图提到的部分，学到什么程度呢？有个大致印象，能对下面那些问题做出自己的理解就好了 学习css大纲带着这几个问题去看w3cshcool的教程css是什么css的语法是怎么样的结构怎么对一个标签增加简单的样式，自己尝试一下？css盒模型是什么display的值有哪几种，这几种值区别是什么css怎么实现垂直水平居中？你能使用几种方式实现？页面的常见布局有那几种，分别可以怎么实现？等等，在这里先学会调试的html+css部分，免得遇到各种样式问题无法解决 实现前端生涯里第一个小项目，做一个google首页你可能会遇到几个问题怎么垂直水平居中？？ 上面那几个问题你解决了的话就不会遇到这个问题了，这个属于页面的常见布局打不开google怎么办？？ emmmm，打不开google就做百度呀，长的没啥差别，我主要是觉得google好看用不用做的太精细？？ 不用，凭着感觉走，又没人催你交作业对吧，像那个小话筒icon懒得做就不做呗没思路怎么办？？这……私信我吧，我给你拆解下结构你再想…… google首页好了，到这你已经变成一个小白切图仔了，可以做一做简单的静态页面啥的了，现在你可能会在下面两种状态的其中一种 我的代码写的太丑了啊啊啊啊啊啊，怎么办啊？感觉过的去啊，并没有什么不适感233333如果你处在第一种状态，找一份看的过去的代码规范修一修（代码规范，借用了高赞大佬里面的那个链接，我懒得找了=0=） 如果你处在第二种状态，咱就甭废话了，继续吧 3.学习js（1周-3周）这大概是开始劝退的一个阶段了，因为开始复杂起来了呀~~很多人都在这溜了 好吧，这个还是看你又没有编程基础，如果你学过vb，c++这种东西，哪怕挂科了，只要脑子里有个概念，这里就比较好学 如果完全0基础，慢慢啃吧=0=，完全0基础还是看视频来的快 教程：w3cshcool的教程（适合有微弱编程基础的人，就是至少知道变量是啥，能看懂简单for循环的人）& 完全0基础的人，可以看视频了（我没看到啥合适的视频，慕课上的js入门视频可以看一看，主要还是按照下面的大纲来，和大纲无关的视频就可以跳过了）推荐读物：高级程序设计（全部学完了回过头来再看吧）只学这张思维导图提到的部分 js大纲带着这几个问题去学习js有哪些基本类型，每种基本类型是干啥的对象是什么，函数是什么，数组是什么数组，函数，对象的常用方法有哪些DOM是什么，我能用它做什么jquery是什么？在这里要学会js调试了，不然学起来真的会各种崩盘=。=来来来，学习调试的js阶段 实现前端生涯中第一个有趣的项目，做一个2048小游戏说到这你就有那么一定概率蒙逼了，我感觉啥都不会，就做游戏了？？扯淡呢吧？其实并不是呀23333，当然不是让你直接写，这个是有非常详细的视频教程的 写完你就会发现，好像也挺简单的呀，原来我学的这么点东西可以做小游戏了呢，到时候就很很有成就感~~（问我为啥？emmmm，我当时也是这样学前端的呀 游戏视频教程：2048教程地址（慕课上非常有年代感的一个教程了，但是我觉得对入门来说还蛮好，而且这个课程免费又详细！！如果当时不是这个教程我就被劝退了） 你可能会遇到一些问题现在jquery用这么少，为什么我要搞这出，学了也用不上啊？ 这个教程是为了让熟悉js的，jquery只是顺带，而且让到这个阶段的你用框架实现 你也没辙对吧，所以还是jquery实现靠谱点代码课程里都有了，我看懂课程复制粘贴不就得了 ？千万不要这样做！！！千万不要！！你要知道自己写和看代码是完全不同的两件事，你可以看完每节课程，然后把课程关掉，按照自己的理解写出这节课相关的代码，但是一个字母都不要复制粘贴！！好多语法不懂怎么办？？ 不懂就查，查了就记，这才叫项目驱动，学以致用嘛现在你做完2048了，开瓶香槟庆祝一下吧，然后……做个复盘吧2333333画出2048的游戏流程图想想自己重新写的话，每一步逻辑是不是还很清晰，脑子里模拟下重写~~学到这里，你可能觉得自己老厉害了，已经可以写小游戏了，那么我就告诉你一个好消息和一个坏消息吧 好消息：你已经开始入门前端了，已经可以看懂前端的初级知识了，已经可以通过代码解决问题了坏消息：同时还有一个坏消息，你现在大概是6年前的小白前端的水准（打个比方，别深究~~好的，现在你可能有下述三个状态其中之一 妈的好难啊！！脑细胞都快死完了，再写一遍不知道写不写的出来，好多语法不懂balabala…… 还好啊，就是有些语法不太懂，想巩固一下兴奋ing，继续干吧状态1的话：整理笔记，好好消化。然后再开始学习。状态2的话：买一般高级程序设计翻一翻看一看吧，觉得无聊了开始下一步。状态3的话：go on 稍微等等，你现在需要学习一个工具的使用那就是上面提到的git和github了~这个过程需要2天 教程：只看这张图中红框标注的部分 git大纲你可能会遇到一些问题蓝框标注的是什么？蓝框标注的内容也是git极端重要的一部分，尤其是在多人开发中，但是你现在可以暂时不用，这块可以在会使用git之后重新回来补学，标签管理也可以看看，但是重要性不如分支管理为什么老是提示命令不存在的情况？廖大大的教程是在mac上的，里面的命令是针对mac和linux系统的，所以你在window上用不了，遇到这种情况可以查：xx命令在window上对应的命令是什么说是学习两个工具，为什么这里只给了git的教程？因为github是个远程的代码仓库，你目前要学关于它的部分只是怎么创建仓库和怎么把代码放上去，这些东西一查就查到了然后解决这几个问题github是什么？怎么在github上创建一个仓库？怎么把github上自己创建的仓库克隆到本地？最后做一个练习：把你上面做好的2048用git提交到github你需要执行这些操作：（我没有把命令写出来是为了让你思考下=。=，所以你也不要直接按照网上的命令照搬，想清楚每条命令是干什么的，为什么要这样做）克隆远端一个空仓库到本地把2048复制到这个本地仓库里用add命令把新增的文件添加到git提交commit把更改同步到远程仓库欧克欧克，下一阶段~ 3.5.学习fetchemmmmmm,为啥子蹦出来一个3.5呢？？好的吧，我承认我之前把这玩意漏掉了 作为前端，和后端通信是必然的，因为需要从后端获取数据呀。 那么什么是通信呢？？通信简单来说就是从后端拿到前端需要的数据，这么来说吧，上面那个2048的游戏，数据就是那个二维矩阵，这种数据一般放在前端就可以了 但是有些数据，例如用户信息这种隐私型的数据，是需要放在后端的，放在服务器那集中储存和处理，要拿到这些数据，就要使用到一种约定好的通信方式，比如ajax和fetch，（ajax虽然也还在用，但是比起fetch已经是过去式了，所以这里只说fetch） promise教程（能查到大把入门教程）promise教程fetch教程（随便查就可以，很简单，推荐）fetch教程老规矩，带着这几个问题去学习 promise是什么，它为了解决什么问题？fetch是什么，为了解决什么问题？fetch和promise有什么关系？fetch和ajax有什么关系？其实上面那些问题很简单，不要查的太深入了，现在可以做项目了，可以做什么呢？？不要惊讶，你可以做一个聊天机器人了，没错，就是聊天机器人 hhhh，其实想简单做的话几行代码就搞定了，复杂做的话也有很多种玩法 说说是怎么做吧，之前在上面说了，前端是要从后端拿数据的，那么如果前端能传给后端自己想说的话，然后后端再答复回答是不是就好了，那么这个过程是怎样做的呢？ 利用一个神奇的api，这个api是某个开发团队提供的免费接口，用来做智能回答(http://api.qingyunke.com/api.php?key=free&appid=0&msg=关键词)上面那个链接是可以点的，点了之后浏览器会自动请求这个借口，并把数据展示出来，把“关键词”替换成你想说的话就可以聊天了~~你要做的事就是把这个过程移植到代码里~最简单的就是一个输入框输入你想说的话，然后请求，然后把回复展示出来，一个聊天机器人就做成了~示例js代码 fetch('http://www.xhxly.cn:8080/api.php?key=free&appid=0&msg=%E4%BD%A0%E5%A5%BD') .then(response=>response.json()) .then(data=>console.log(data))用上面的代码就可以获取到接口数据，至于链接为什么和上面不太一样，因为上面那个链接跨域了，我用自己的服务器做了下转发，没理解这段我说的是啥的话就跳过吧，用下面示例代码就成了～～ 其实还有很多种玩法，比如天气查询，美食查询等等等，比如做一个微信机器人或者公众号，把机器人移植进去？然后就变成了贴心暖男？？？（相关请搜索，图灵机器人，青云客智能聊天机器人API）(其实我也做了个简单的=。=，想要试试的话私我我给你机器人的微信，如果想要详细教程的人多的话我也会推荐或者写出来~~) 下一阶段把哈哈哈哈 4.学习框架（2周-1月）框架对入门越来越不友好了，功能越来越多了，各种东西层出不穷，如果你要学框架的话，咱就从vue开始吧，为什么用vue？中文社区完善呀，而且学习曲线不是很陡峭，而且公司里常用呀 学习vue之前，你得了解下前端的一个大杀器：node.js 先安装好node.js然后搞懂这几个事情 node和npm是什么，他们可以用来做什么npm init命令有什么作用node_modules和package.json有什么作用？好了，在学习vue前，你需要避开一个大坑，这个不然你会决定项目突然变得很复杂，不知所措，这个大坑我也梳理成文章了（可以先把这篇文章过一遍，之后可以解决你不少疑惑） 好了，开始学vue吧 教程：这里可以看视频了，但是我没发现特别适合入门的视频，慕课上那个免费的vue2入门的课程可以看下（走用npm安装vue，新建vue项目的流程，这个很重要） 推荐读物：不推荐读书=0=，多看文档，前端框架变化太快了这里就没有大纲了，把官方文档的基础部分看完就好了，其他的不用看，vuex和vue-router相关看到就跳过吧，暂时对你来说不需要带着这几个问题去学习使用vue-cli生成的项目，目录结构是怎么样的？其中的每个文件夹和每个文件的作用是什么？（vue-cli是有官方教程的，按照官方教程来生成项目！！！）什么是双向绑定？mvvm框架是什么意思？实现一个todolist，网上demo很多，找一个一步步来就好了，关键是要理解mvvm框架的意义，为什么要使用mvvm框架关于框架这一块我写的不太详细，有空再补充吧，我感觉这里一开始主要卡着的点应该就是关于项目的复杂结构（对新手而言），不清楚那么多文件是干什么的vuex和vue-router做好了todolist之后，你需要了解两个东西，也是工程化非常重要的两个东西vuex&&vue-router教程：同样，这两个教程只看基础部分，然后解答下面这些问题vuex和vue-router分别是什么？vuex和vue-router分别能做什么？vuex和vue-router的诞生是为了解决什么问题？什么情况下需要使用vuex，什么情况下需要使用vue-router？解决了这些问题之后，你需要实战，这里推荐一个github上对vuex，vue-router入门比较友善的项目：https://github.com/bailicangdu/vue2-happyfri实战要点：先看懂项目中vuex和vue-router的用法（第一步不是看懂项目，而是看vuex和vue-router怎么用）自己新搭建一个项目，配置好vuex和vue-router到能使用的地步看懂项目自己实现，实现的时候就不要看源码了，想不明白的地方可以回来看好了如果进行到这里，你大概也就入门了吧23333，这个时候你也就能利用前端的知识解决问题了，但是离一个前端还是有很长的路要走的~~比如上面说的基础打牢和能力进阶 4.5.项目推荐1.vue完成的饿了吗前后台webapp 2.一个vue完成的QQ音乐 基本上上面项目都能自己做出来之后，前端也就彻底入门了，补充基础知识之后，找找工作实习也没啥大问题（但是很多人卡死在vue门口=。=），加油吧朋友们 ========干货结束分割线====== 关键其实还是驱动力，如果项目驱动能给你足够的动力的话，那就不停的找项目做吧，走完上面的流程，再看看书的话，找个学校的工作室帮老师做项目就好了（应该到工作室的门槛了）~ 如果驱动力不够的话，那就关注我呗~我之后会发些之前从入门前端到现在遇到的一些事情，希望对你们有些帮助~ 如果有不懂的可以来问我~说不定你骨骼清奇，一下子就打通任督二脉，直接入门了呢 码字不易，各位观众姥爷点个赞再走呗=0=，这可是知乎首答呀~ |
【本文地址】
今日新闻 |
推荐新闻 |