HTML/CSS/JS 免费+绝赞前端的学习资源

1 HTML和CSS

作为前端小白，首先要学的绝对是 HTML(即HTML 4.01) 和CSS，然后再学HTML 5 和 CSS 3的新特性。

我觉得HTML和CSS其实没有必要深究，只要知道基本的标签以及常见的css样式即可。

我用过的资料

书：《从0到1：HTML+CSS快速上手》 作者：莫振杰

这本书，非常适合什么都不懂的小白，因为作者的文字阅读起来非常轻松，通俗易懂。

PS：这本书可以在微信读书App免费阅读，我就是在这个App上看完的。

视频：

https://www.bilibili.com/video/BV14J4114768

pink老师出品，同样特点是通俗易懂，而且课堂并不枯燥。

缺点是太长了，导致我还没有看移动端的视频。（这不是缺点，你可以像我一样不看移动端，虽然移动端很重要）

网站：https://www.w3school.com.cn/

很多大佬们都不会推荐w3school，因为这只是私人写的教程，并不像MDN一样开源，可能会有错误。

但其实MDN也有缺点，文字过于专业化而且内容贼多。但w3school就不存在这个问题，文字阅读起来很轻松，另外内容也不像MDN一样全部排上去，让人不知道重点。

网站：https://developer.mozilla.org/zh-CN/docs/Web

这个就是MDN的中文网站，我觉得并不适合刚刚开始学习的人。

但是，当你入门了一点点后，就会感谢这个网站内容的丰富性以及它的专业性。它非常适合用来作为字典，哪里不会查哪里。

视频：

https://www.coursera.org/learn/html-css-javascript-for-web-developers

来自coursera上的一所美国名校的公开课，可以免费旁听。当时我看的就是这个课程学习HTML和CSS，视频质量相当之高。开头就教如何用git和github仓库，接着才开始学HTML和CSS。

缺点：需要略懂英语（有英文字幕），需要特殊网站才能播放视频。

关于HTML和CSS，入门我大概就用到了这些内容。除了我看完了莫振杰的书，其他都没有善终。

2 JavaScript

JavaScript 同样可以分为两部分JavaScript和ES6的新增部分。ES6新增部分虽然好像有很多，但对我来说好像就仅仅记住了箭头函数，const，let，解构赋值等。

网站：https://www.w3schools.com/

前面的w3school中文版，翻译的就是这个网站。看网站的UI就能发现，这个网站比中文版的棒多了，不仅更漂亮，而是是响应式布局。我当时JS就是在这个网站学的。

同样，缺点是需要特殊网络才能打开这个网站和需要掌握基础的英语。

网站：https://www.freecodecamp.org/

看域名就能看出来这个网站是免费的，它有7000多个教程。另外，它的课程是完全交互式的，让你实时体验。

而且，从下图可以看出来，它的课程很成体系，貌似是每一个一个课程，便会给你证书。

而且，这个网站有中文版：https://chinese.freecodecamp.org/learn/

视频：

https://www.bilibili.com/video/BV1Sy4y1C7ha

这也是黑马的JS教程，因为黑马的教程每次都有PPT，而且讲的很详细，也没有太多废话。缺点同样是很长，导致我没有看完。

网站：https://zh.javascript.info/

要是让我早点碰到javascript.info这个网站，我才不会看什么w3school英文版，这个教程是github开源的，而且有大佬翻译成中文并保留了英文版的幽默风趣，非常之推荐。

这些就是我当时用到的资料，足够入门前端三件套了，其中HTML没有什么太多难度，CSS和JS可能会遇到一点困难。

遇到困难，第一反应不要去逃避，而是马上换一份教程。看不懂永远永远不是你的问题，而是别人的文字没有做到通俗易懂。但是如果你放弃了，这就是你的问题了。

第一篇就到这里了，分享了HTML和CSS以及JS，这些我确实看过的，觉得很棒。

我现在最喜欢的当然就是JavaScript.info和MDN这两个网站。