百度前端学院学习-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
刚入前端坑,希望各位“老人”多多指教!