百度前端技术学园

# 一起来感受前端之美

# 课程背景

本课程，我们面向的是有一定计算机编程基础，在前端领域零基础或刚刚开始入门的同学，当然如果你是计算机编程零基础或者前端已经有一定学习经验，也欢迎参加，在知识内容上你可以根据自己情况进行增补和略过，但学习方法是一致的。

# 课程目标

  • 做好预备奔跑的姿势
  • 开始爱上前端
  • 大概知道什么是 Web ，什么是 HTML 、CSS 、JavaScript ，如果您之前就知道，不妨可以做一些深入阅读

# 前端案例

好的，我们开始吧，首先，请确认你有一个比较先进主流的浏览器，比如 Chrome，然后用这个浏览器，我们来一起看一些美好的东西，依次浏览下面的网站（建议不要同时都打开）:

4d实例

水下焦散

元素周期表

元素周期表

webvr实例

小概率成功

ECHARTS

还有许多优秀的网站，我就不一一展示图片了，您可以点进去亲自感受一下前端的魅力

看完之后有没有觉得很酷炫，上面这些网站效果都是使用 Web 前端技术实现的。有不少前端开发者选择入行的原因，就是希望通过技术做出类似这些美好的东西，用技术带给用户最优美的体验。不知道你有没有开始期待着一天，你也可以用技术实现如此美妙的画面。

不妨在浏览器中专门建一个收藏夹目录，叫做 showcase 或者 好看的网页 之类的名字，把上面这些网站都放进去，当以后想找灵感的时候，不妨多看看，随时发现好看的网页也可以加进去。

# 编码

那不如我们就先来试一试，我们亲自动手来制作也许是你的第一个网页，如果你已经有一定经验，可以忽略下面的任务。

  • 访问这个已经建好的 Codepen 页面 (opens new window) ，点击上方菜单中的 Fork 按钮，它会帮助你基于我们提供的代码创建一个属于你自己的副本，让你随意修改一些东西，体会一下自己写代码的感觉。

    注意一定要先点击 Fork 哦，否则会影响其他同学的学习，另外不妨注册一个 Codepen 的账户。

# 前端背景知识

首先，初体验了前端编码，我们来系统的了解一下什么是前端，前端的发展历史，到底什么是 Web,互联网是如何工作的，HTTP 协议是什么。

如果您觉得一来看文字比较晦涩难懂，这里还有一些视频材料辅助您学习

# 前端技术文档

通过上述阅读之后，我们大概明白前端是什么，以及关键技术有哪些，接下来就要开始我们前端技术的系统学习，在开始学习之前，我们给您推荐一些前端学习资料，以供您自主学习的需要，通过阅读这些材料，您可以知道您需要掌握的技术有一个概览，你需要知道 HTML、HTML5 区别，什么是 CSS，以及什么是 JS 和 JS 历史。请详细阅读下面几篇文章中关于基本概念的解释（不需要着急看具体的内容）。

如果您对所要掌握的知识技能没有一个清晰的认识，你可以看看下面的网站，了解如何学习前端知识一步一步成为一名合格的前端工程师。

不妨在浏览器中再建一个收藏夹目录，把上面这些网站都放进去。阅读相应的学习材料是学习的第一步，通过阅读了解基本概念和知识。

# 总结

找一个你可以记录笔记的地方，可以是电脑里的记事本或是手边的笔记本（不做任何限制），记录下今天的学习笔记，包括以下内容：

  • 日期，今天的学习总用时，今天学习的目标是什么，是否达成
  • 哪些东西今天了解得比较透彻，说说自己的理解
  • 哪些东西今天了解到了一些，还有哪些点需要后续继续深入阅读
  • 哪些东西今天学了之后还有很多疑问没有被解答，把问题记录下来，以待后续解决

当然，今天笔记最终的事情是：

立 Flag ，写下大家参加今年前端学园的目标，能不能和我们一起坚持！

# 预告

下一章节我们会开始制作一个正式的 HTML 页面。

# 广告时间

以下材料，欢迎打开后点右上角的 star 按钮：

# 拓展阅读

← 零基础体验 →