javascript速成—网页左下角出现javascript 收藏 0

我是如何零基础入门前端开发的（2021 版）

大家好，我是山山而川，一位零基础转行前端的小白，很荣幸受 freeCodeCamp邀请给大家分享一下有关零基础学习前端的内容。

我是95年的，非CS专业，很早之前就接触到了编程这一块（当14年IOS开发特别火），但是那个时候并没有太多意向或兴趣去学深入了解，只是觉得看着挺有意思看过几眼就没后续了，现在想想挺遗憾的。如果当时身边有个人可以指点一下，说不定现在也是个六七年的“老程序员”了。

不过现在也不算太迟，现在正在学习前端转行中，完完全全的零基础，所以踩过的坑有很多。相信有不少跟我类似经历的伙伴在这个过程中应该会有不少困惑，比如：网上教程这么多，到底该学哪个？看不懂怎么办？学到什么程度才能找到第一份工作呢？那么我们今天的主题就是给大家分享一下我总结的学习路线。

首先说明一下，前端学习是一个螺旋上升的过程，既要反复地看书，也要抓紧时间进行实战。只看书，看了就会忘，所以必须将看书和写代码相结合。

然后大家最关心的入门前端开发到找工作3～6个月左右就可以了，主要需要学习 HTML、CSS 和 JavaScript 三大件。之后学习前端主流框架的使用，并基于已学内容开发一个小项目进行实战。以上内容学习并理解透彻以后，就算真正地入门前端了。

当然如果是全职学习，那么时间可以缩短为3-4个月，反之零零散散的学习可能6-8个月，甚至一年之后，具体的学习时间大家自己去规划，重要的是合理计划时间及坚持不懈执行（这点很重要，很多人就是死在了这里）。

我这篇教程是从有想法转前端开始就从各种渠道汇总总结的，期间不知道入了多少坑，比如百度随便搜索下前端教程、前端怎么学，然后立马一大推营销号推荐免费领取基础课程，其实多看几家你就知道本质上都是给你卖课的；另外有很多大佬推荐的教程要么是时间比较久了（意味着教程老了），要么就是比较零散，不系统（作为正在学习的我来说，能稳定找到第一份工作就是好教程），所以一下内容都是我整理了好久才总结的，综合了微信公众号作者“技术漫谈”丁哥、“若川视野”川哥、运营转前端成功的年年、网上各种资源等总结而成的，希望可以帮助到大家（几位大佬和公司前端同事一致认为，以下内容好好学，全部学完，找到一份工作不难。前提是你坚持下去）。

首先是前端三大件 HTML、CSS 部分的学习，入门阶段不需要学的多深入，只需要抓住几块核心内容，快速过一遍就行，例如选择器、层叠、继承、盒模型、Flex 页面布局和网格等。太细节的内容不用记，之后需要了再回来查。

1、《Head First HTML and CSS》：这本书比较简单，适合新手入门

2、MDN：学习 HTML 学习路径部分，整体浏览一遍，不需要死记硬背

3、W3school：学习 HTML 部分，整体浏览一遍，不需要死记硬背

4、《HTML5 与 CSS3 基础教程》（第8版）：这本书里面有非常多 HTML 标签，整体浏览一遍，不需要死记硬背，知道有哪些标签以及各自的作用是什么，整体有一个印象即可。

5、《精通CSS（第3版）》 或 《深入解析CSS》：第一本书是目前最适合 CSS 入门的书，大家可以优先考虑看这个；第二本书是2020年的新书，内容和第一本差不多，奇虎团工程师翻译质量也有保证，讲得也非常详细，不想看第一本看这本也行。

学习完了 HTML、CSS，下面就进入到代码实际练习和巩固阶段了，freeCodeCamp可以很好的帮我们实现，在freeCodeCamp的“响应式网页设计”部分，可以把前面学到的知识整体练习一遍，最后还有五个小项目练习来确认基础掌握情况。

在做项目练习的时候如果发现静态页面写不出来很正常，可以先去看别人写的代码，看完后就知道怎么写了。

全部写完之后可以根据百度前端代码规范，重写这五个项目的代码。重写之后，再跟原网页代码对比对比，看看还有哪方面的不足。

学习完HTML、CSS之后我们就可以进入JavaScript的学习了，JS非常重要，也有一定的学习难度，同学们在这里花费的时间可能会有点多，JS主要包括语言基础（ECMAScript）、DOM 和 BOM。这个时候我们肯定不清楚这到底是是什么东西，可以用作什么，没关系，先学就是咯。

1、现代 JavaScript 教程：JS 推荐从这个教程学起，这是我无意间发现的一个宝藏网站，这个网站是依托于 learn.javascript.ru 而来的（中文翻译的主要主要负责人是leviding，阿里前端工程师，很强），而 learn.javascript.ru 是俄罗斯最大的 JavaScript 教程和学习平台之一，质量有保障，而且是在线学习，教程都是实时更新且免费的，不像书籍可能存在看的技术过时的问题。现代 JavaScript 教程是 React 官方文档中与 MDN 并列推荐的 JavaScript 学习教程，学完整个教程，相当于已经学完了所有JavaScript内容。

2、《JavaScript 高级程序设计（第 4 版）》：这本是速成红宝书，很经典，推荐先看现代 JavaScript 教程再看这本红宝书，或者搭配着看。红宝书可以和现代 js 教程相互补充取长补短，同时还可以巩固知识点，加深对 JavaScript 的理解。书中有大量 API 的章节，不用死记硬背，浏览一下就行，用到再回来查。

（1）第 1~11 章讲的是语言特性，必须掌握；

（2）第 12、14-17 和 23-26 章是重点内容重点看；

（3）第 13、19 和 21 章是次重点内容，尽量看一下；

（4）第 28 章是最佳实践，看完前面内容后来学习如何写出更好的代码；

（5）第 18 章 Canvas、第 20 章 API、第 22 章 XML 和第 27 章工作者线程，可以在学有余力或者用到的时候看一下，不是初期重点内容。

3、《JavaScript DOM 编程艺术》：DOM 学习书籍，主要讲 DOM 知识，以及通过实战深入理解相关知识，其实这本书的内容现代JS和红宝书都讲过了，有时间的同学可以考虑看一下。

又到了我们的代码实战环节，学以致用理论和实践相结合才是王道，这个时候fCC依然是我们的首选。

1、freeCodeCamp：练习“JavaScript 算法和数据结构”部分，做完后同样有5个练习项目实战，希望大家可以完成。

2、百度前端技术学院 2021：这是百度前几年推出的免费前端入门教程，里面有非常详细的HTML、CSS和JavaScript教程，不过现在正在内容更新，暂时还打不开，练习到这一步的同学发现还不能打开的话可以去Github上找（GitHub上有20年前的内容）

前端的主流框架目前主要为 React，Vue 和 Angular。一般是在 React 和 Vue 中选一个。

React 的开发体验更偏向于通过写原生 JS 的那种方式写页面，使得逻辑和页面分离开来，要求你有较好的 JavaScript 基础。

Vue 则引入了模版，相对来讲偏向通过模板的方式也就是调用 API 来写页面（当然现在 Vue 3.0 也正在跟进 Vue 的 JSX 写法，类似于 React），将很多实现封装成了 API，需要记住并调用 API 来进行开发，因为很多都是封装好的，所以学习起来较为简单，相对的编程的感觉会弱一些。

推荐先学React，对找第一份工作比较友好，下面是详细的教程

在这个过程中你会学到很多知识，会用到 React 的高阶知识，把 React 官方文档中的高级指引，API Reference，Hooks 等部分的内容学完。

还会学到 React Router，Redux 等内容。会学到从零开发一个完整项目，从项目配置到组件拆分，到项目打包和上线的完整流程，还会学到 React 框架的一些底层源码级知识。

1、入门：入门推荐学习哔哩哔哩“尚硅谷2021版React技术全家桶全套”视频，播放量很高，老师讲解的不错，可以用来入门学习。

2、React 官方文档：先学习文档中核心概念部分，然后跟着官方文档写出文档中的井字棋，最后再自己写一个 Todo App。

3、慕课网：下面到了实战环节，可以考虑慕课网的付费课程“React 17 系统精讲 结合TS打造旅游电商平台”，价格不高，既可以当做代码练习，又可以作为简历上的项目点。

1、Vue 官方文档

2、慕课网：

（1） Vue 2.5 入门

（2） Vue 2.5 -> 2.6 -> 3.0 开发去哪儿网 App 从零基础入门到实战项目开发

恭喜你，能够学习到这步，离找工作就不远了，现在就是利用时间多做几个项目，放到个人简历上，可以做个自己的个人博客，租个服务器上线，这样的优势是博客风格完全由你个人来打造，可以让面试官看到你的实战能力，且不同于常见的电商网页项目（主要这个大家都在做）。

1、独立完成个人博客的上线

2、自己选择做其他项目

到这步就可以刷刷面试题找工作了，推荐以下刷题工具：

1、小程序：高级前端面试，特别推荐，题型比较新颖，题库里的题也适合面试梳理，选择题不算特别多。

2、小程序：前端面试星球，有些题型有点多，涉及的面挺广的，可以后面慢慢刷。

3、牛客网：题型偏老，有时间可以刷刷。

谢谢你阅读这篇文章，私信我【资料】领取最新Python学习资源 Happy coding!

前端新手必看！HTML、CSS 和 JavaScript 详解与实用案例全攻略

大家好呀！我是魏大帅，一位热爱前端开发的程序员。今天在这呢，我来跟大家聊聊 HTML、CSS 还有 JavaScript 的知识，希望能对你们有用哈！[送心]

1. HTML速成课HTML（HyperText Markup Language）就是那个超文本标记语言，是搭建网页结构的基础语言。啥？不懂？简单来说，就是用各种标签把网页的不同部分（比如标题、段落、链接、图片啥的）拼凑起来。

2. HTML基本布局一个HTML小萌新通常长这样：

3. HTML 常用标签

• 标题标签：<h1>、<h2>、<h3>等，用于定义不同级别的标题。
• 段落标签：<p>，定义段落。
• 链接标签：<a>，创建链接。
• 图像标签：<img>，插入图像。
• 列表标签：<ul>（无序列表）、<ol>（有序列表）和<li>（列表项），创建列表。
• 表格标签：<table>、<tr>（表格行）、<td>（表格单元格），创建表格。
• 表单标签：<form>、<input>、<select>、<textarea>等，用于创建表单。
• 语义化标签：如<header>、<nav>、<section>、<article>、<aside>、<footer>等，让网页结构更清晰。

4. HTML5 新特性

• 多媒体标签：<audio>和<video>，播放音频和视频。
• 画布标签：<canvas>，绘制图形。
• 本地存储：使用localStorage和sessionStorage在浏览器中存储数据。
• 地理定位：使用navigator.geolocation获取用户地理位置信息。
• Web Workers：在后台运行 JavaScript 代码，不影响页面性能。
• 拖放 API：实现元素的拖放功能。

1. CSS 简介

CSS（Cascading Style Sheets）就是那个层叠样式表，专门负责给网页穿衣服，定义字体、颜色、大小、间距、背景等，让页面美美哒。

2. CSS 引入方式

• 内联样式：在 HTML 标签中用style属性直接定义样式。
• 内部样式表：在 HTML 文件的<head>标签中用<style>标签定义样式。
• 外部样式表：将 CSS 代码保存为独立文件，在 HTML 文件中用<link>标签引入。

3. CSS 选择器

• 元素选择器：根据元素名称选择元素。
• 类选择器：根据元素的class属性选择元素。
• ID 选择器：根据元素的id属性选择元素。
• 后代选择器：选择某个元素的后代元素。
• 伪类选择器：根据元素的特定状态选择元素，如:hover（鼠标悬停时）、:active（被点击时）等。
• 属性选择器：根据元素的属性值选择元素。
• 兄弟选择器：选择与某个元素相邻的兄弟元素。
• 通用选择器：用*选择所有元素。

4. CSS 盒模型CSS 盒模型由内容（content）、内边距（padding）、边框（border）和外边距（margin）组成。理解盒模型对布局和定位元素至关重要。

5. CSS 布局

• 流式布局：默认布局方式，元素会根据窗口大小自动调整位置。
• 弹性布局（Flexbox）：灵活布局方式，轻松实现水平和垂直居中、等分空间等布局效果。
• 网格布局（Grid）：创建复杂二维布局，精确控制元素位置和大小。

6. CSS 响应式设计响应式设计能根据不同设备屏幕尺寸自动调整布局和样式。可以使用媒体查询（Media Queries）实现。

7. CSS 动画

CSS动画，就是让页面元素动起来，比如渐变、旋转、缩放等，用@keyframes规则就能定义动画效果。

8. CSS 预处理器CSS预处理器，比如Sass、Less和Stylus，能让你写CSS的时候更高效，变量、嵌套、混合、函数啥的都有了。

1. JavaScript 简介JavaScript是一种脚本语言，能让你网页动起来，添加交互性和动态效果，还能操作HTML和CSS。

2. JavaScript 基本语法

• 变量声明：用var、let或const关键字声明变量。
• 数据类型：包括数字、字符串、布尔值、对象、数组等。
• 运算符：如算术运算符、比较运算符、逻辑运算符等。
• 控制流语句：如条件语句（if、else if、else）、循环语句（for、while、do-while）等。
• 函数：定义函数封装可重复使用的代码块。

3. JavaScript 操作 DOMDOM（Document Object Model）就是文档对象模型，是表示 HTML 和 XML 文档的编程接口。JavaScript 可以通过 DOM 操作网页内容和结构。

• 获取元素：用document.getElementById()、document.getElementsByTagName()、document.getElementsByClassName()等方法获取 HTML 元素。
• 修改元素内容：用innerHTML、textContent等属性修改元素内容。
• 修改元素样式：用style属性或classList方法修改元素样式。
• 创建和删除元素：用document.createElement()和parentNode.removeChild()等方法创建和删除元素。

4. JavaScript 事件处理事件是用户与网页交互时发生的动作，比如点击、鼠标移动、键盘输入等。JavaScript 可以通过事件处理程序响应这些事件。

• 注册事件处理程序：用addEventListener()方法注册事件处理程序。
• 移除事件处理程序：用removeEventListener()方法移除事件处理程序。
• 事件对象：事件处理程序可接收一个事件对象作为参数，包含有关事件的信息。

5. JavaScript 异步编程

• 回调函数：异步编程方式，将一个函数作为参数传递给另一个函数，在特定事件发生时调用。
• Promise：处理异步操作的对象，可以通过链式调用then()和catch()的方法处理成功和失败情况。
• async/await：基于 Promise 的异步编程语法糖，使异步代码看起来更像同步代码。

6. JavaScript 面向对象编程JavaScript 是基于对象的语言，可以用面向对象编程的思想组织代码。可以使用构造函数、原型链和 ES6 的类实现面向对象编程。

7. JavaScript 模块化随着项目规模的增大，代码管理变难。JavaScript 模块化可以将代码分割成多个独立的模块，提高可维护性和可扩展性。可以用 ES6 的模块系统或 CommonJS 模块系统实现模块化。

8. JavaScript 库和框架

JavaScript 库和框架，这可是神器啊！jQuery、Lodash、React、Vue、Angular，有了它们，开发效率那是嗖嗖的！

1. 简单网页

简单网页，HTML搭结构，CSS美美哒，JavaScript输出个信息，F12一看，Console里“页面加载完成”，完美！

2. 响应式网页

响应式网页，CSS媒体查询，JavaScript监听窗口大小，一缩一扩，信息打印不停歇，F12一看，Console里“窗口大小改变”，666！

3. 表单验证页面

表单验证页面，HTML搞表单，CSS美美化，JavaScript验证输入，空了、格式错了，错误信息飞出来，验证通过，提示框弹出来，用户体验那是杠杠的！

4. 轮播图

轮播图，HTML搞结构，CSS美美哒，JavaScript切换图片，点击“上一张”或“下一张”，图片切换自如，酷炫！

看完这篇，觉得有帮助就一键三连[赞][赞][赞]，关注我吧，你的关注就是我最大的动力，前端知识，我分享，你学，咱们一起进步[比心]

本文作者及来源:Renderbus瑞云渲染农场https://www.renderbus.com