百度前端学院学习-DAY01

百度前端学院学习-DAY01

第一天的学习对前端大致有了一个认识，之前有一定的HTML，CSS和JS基础，学院推了几个效果很酷炫的网站，前端做出来的东西真棒！

希望自己有一天也能做出这么炫酷的效果！

网页链接：

• http://2014.artsy.net/
• https://codepen.io/Yakudoo/full/rJjOJx
• https://codepen.io/pissang/full/geajpX
• https://codepen.io/tsuhre/full/BYbjyg
• https://wangyasai.github.io/Stars-Emmision/
• https://pissang.github.io/papercut-box-art/
• https://demo.marpi.pl/biomes/
• https://pissang.github.io/voxelize-image/
• http://echarts.baidu.com/examples/index.html#chart-type-globe
• https://tympanus.net/Development/AudioVisualizers/（推荐戴耳机）

推荐大家去Codeopen注册一个账户，能够演示自己写的demo。

前端认识：

• Web 建站技术中，HTML、HTML5、XHTML、CSS、SQL、JavaScript、PHP、ASP.NET、Web Services 是什么？
• W3School的HTML教程
• W3School的HTML5教程
• MDN Web开发入门

准备工作：

• 把百度技术前端学院加到你的收藏夹中
• 申请一个 Github 账号
• 下载安装一个开发工具，推荐Visual Studio Code
• 号召周围小伙伴一起参加，找到几个志同道合的好友，或是在我们的 百度贴吧 上加入一些技术交流群
• 开一个博客，或者在Github，或者是某种云笔记，任何可以在网络记录你学习情况的地方，准备长期记录你的前端学习生涯

第一天的练习：

HTML

<h1>IFE前端学院</h1>
<img src="http://ife.baidu.com/2016/static/img/logo_c9785ff2.png">
<p>大家好，第一次参加百度前端学院很开心</p>
<button id="btn">点按钮，打个招呼吧</button>

CSS

h1 {
  /* 设置了字的大小，px是单位，你可以尝试改成其它大小 */
  font-size: 30px;
}
p{
  /* 设置了字的颜色，你可以尝试改成yellow */
  color: #000;
}

JavaScript

document.getElementById("btn").onclick = function () {
  // 点按钮后弹出一个文字，你可以尝试改变文字内容
  alert("你好啊，欢迎来到百度前端技术学院");
}

demo效果预览地址：

https://codepen.io/infrontofme/full/aGNqme/

Github主页，欢迎follow：

https://github.com/infrontofme

刚入前端坑，希望各位“老人”多多指教！