百度前端学院学习Day1

前言

      个人之前看过HTML、CSS相关的书籍，也制作了一些简单的静态网页，但感觉还是没有实际的经验。希望能借助互联网来学习，提升自己的前端开发能力。

 

1.初步了解Web开发

目标

1. 做好长期学习前端的准备
2. 对Web开发有了一定的了解，以及初步认识HTML、CSS、JavaScript网页三剑客。 

阅读

      这里有很多炫酷的网页：

• ART SY艾未未
• 让人心旷神怡的波浪
• 绚丽的星星
• 神奇的图表

 

以下是帮助你开发的一些网站：

 Codepen页面

     Codepen是相当受欢迎的开发环境之一了。CSS技巧的作者Chris Coyier是Codepen的联合创始人之一，这也就是为什么这款 app看起来那么豪华。除了视觉上的优秀效果，它可以生动地展现预览，当你修改了代码，就可以看到效果，使你能够更容易地找出变化。

MDN Web开发入门

     相比于像标准手册一样的w3cschool，还是这个网站比较全面，也比较适合新手。

 

编码

   html部分

<h1>你可以在这里修改一些文字作为标题</h1>
<img src="http://ife.baidu.com/2016/static/img/logo_c9785ff2.png">
<p>这里是正文部分，可以在HTML中修改内容</p>
<button id="btn">点按钮，打个招呼吧</button>

css部分

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

好吧，这些都不是我编的，但是这些基础的内容还是看得懂的。

 

小结

      看到了这么多的Web开发的阅读，让我对此有了初步的了解。网站codepen可以帮助作为新手的我来学习

 

 

2.制作简易的个人简历

目标

      用html制作简历，包括个人信息、项目经验、实习北京等。

阅读

      羡辙的简历再一次惊艳到了我，真的是牛人。

 

      好吧，说些正经的。

首先，打开w3school的html手册 ，看看需要用到那些标签。

然后，画出简历的内容草图，与html的元素相互对应。

最后，在codepen上编码实现。

 

编码

<h1>简介</h1>
<ul>
<li>孤城</li>
<li>1234567890@qq.com</li>
 <li>在校本科生</li>
</ul>
  

<h1>个人特点</h1>
<table>
<tr>
<th>读书</th>
<th>博客</th>
</tr>
<tr>
<td>相关专业书籍</td>
<td>csdn、github</td>
</tr>
</table>

 

小结

     虽然之前看了《Head First》,但好多标签都忘记了，看来要经常使用w3school手册了。

     

 

3.给简历添加色彩

任务

      给之前的html添加简单的css样式，主要是字体、文本方面的。

 

阅读

      w3school的文字样式以及w3school字体部分。

 

编码部分

h1 {
  /* 设置了字的大小，px是单位，你可以尝试改成其它大小 */
  font-size: 30px;
  font-weight: bold;
  font-family: Georgia, serif;
  font-style: italic;
  
  text-align: center;
  text-decoration: underline;
  text-indent: 0em;
  text-shadow: 5px 5px 5px #ff0000;
 
  line-height: 150%;
}

ul, td,tr{
  font-size: 20px;
  font-weight: normal;
  font-family: "宋体";
  
  text-decoration: inherit;
}

 

小结

     光是字体和文字部分就有这么多的属性和值，看来要经常使用这些样式才能熟悉。