FCC-Front End Development Basic Projects

作为没有实战经验的小白写网页代码除了学习还是得靠练！FCC就在学完HTML，CSS，jQuery, Bootstrap之后立马给了两个小项目练手，小激动，很紧张！

---

第一个任务是做一个tribute page，我的理解就是做个页面来感谢一个自己的偶像。
这是我的孟德尔tribute_page，这里需要再次提醒一下自己的知识点有：
1. 改变图片宽度和高度的方式有给img标签加width，height属性;或者inline CSS style。
2. 我在做简易生平的时候发现通过调整浏览器大小有时候会导致标明年份的badge超过list-group-item的边框范围，查找资料后发现：如果一个框中的内容会超出框的范围，这个时候可以给这个框设置overflow属性，并且赋值为auto。
3. 巨幕jumbotron中添加h1标题时，标题的颜色默认是继承父元素的。

---

第二个任务看起来就有点复杂了，需要做一个关于自己的简介式主页。它给了一个参考的界面。除了portfolio还有导航，页头，about，contact，footer。内容很多，一个一个来吧！
首先需要用到的框架就是bootstrap，还需要font-awesome作为小图标。先从理论上最简单的footer弄起。所有的步骤会以step-by-step（SBS）的方式放在我的github当中。所以推荐先fork我的github项目，这样你就可以通过查看不同commit以时间顺序学习每一个点辣！另外我的这个项目其实是拆解一个很火的portfolio开源项目，目的就是为了大家好学辣～直接看一个成熟的项目不知道从哪里入手，我这里会一步一步记录下来，带着像我这样的新手上路。

第一部分：footer
footer包含两行，第一行是地址，和其他商业网站的个人账户。第二行是copyright. 具体的结构如下：

    <footer>        <div class="footer-above">          <div class="container">            <div class="row">              <div class="col-xs-12 col-md-6">                <h3 class="text-center"></h3>                <p class="text-center"></p>              </div>              <div class="col-xs-12 col-md-6">                <h3 class="text-center"></h3>                <ul class="list-inline text-center">                  <li><a class="btn-social" href="#"></a></li>                  ...                  <li><a class="btn-social" href="#"></a></li>                </ul>              </div>            </div>          </div>        </div>        <div class="footer-below">          <div class="container">            <div class="row">              <div class="col-xs-12">                <p class="text-center">                  Copyright © XXX 2017                </p>              </div>            </div>          </div>        </div>    </footer>

第一行和第二行分别用div.footer-above和div.footer-below来包裹住，目的就是为了分别给这两行上背景色。它们俩必须在container的最外面，因为container里面margin-left和margin-right都是auto属性，这就使得放在里面的div都不是紧贴viewport边的。所以要么给container所在的div加上一个去左右margin的另外给定背景色的标签，要么在这个div外头套一个直接加背景色的。但是又因为container类在bootstrap中又被规定，大屏幕下的width必须为750px，所以第一种方式就没有用了！只能被迫在container外头加div。明天早上开始做固定在顶部的可折叠导航！跟踪功能之后在实现。

---

第二部分导航，这个之前在bootstrap学习笔记中已经有很成熟的代码涉及到了，直接copy&paste。需要修改的地方在于给nav标签加navbar-fixed-top类，这样就可以把导航固定在头上了。另外还有一处，就是把navbar-header和navbar-collapse这两个div都包含在一个div.container中，这样就可以用到container对宽度的responsive设计（就是在footer中上背景色那里提到的），让我们的导航栏可以比较靠近屏幕的中部，而不会分得很开。

---

第三部分header，作为本人简单的介绍。三部分，个人照片，姓名和skill。html部分，这三个并列放在header>container>row>div.col-xs-12.text-center里面。还是很干脆的。虽然只有一个row，但是加了text-center类之后它们三个都分别居中显示，所以就会有三行辣！CSS部分会有点小复杂，因为这个header在大屏幕和小屏幕下都要让人看得和谐就需要让字体，padding什么的稍加变化。

---

第四部分是真正的portfolio，放自己参与过的项目的位置咯！两行，第一行是Portfolio名字和hr，第二行是6宫格形式的项目图片。还要有一个隐藏的项目名，当鼠标hover过项目图片时弹出项目名（caption）。第一行的结构和header中的那行一致，只不过这里只有一个h标签和一个hr标签。第二行就要真正借助栅格系统作出responsive的样式，首先用于放图片的div为col-xs-12col-md-4的，也就是说小屏幕一行一个，大屏幕一行三个。其他在细致格式上的内容我也没有很明白，找猫画虎的做。其实真正不清楚的地方就是anchor标签不安常理出牌的排版样式，它没办法用一个外套的div去控制大小。貌似必须要anchor自己的position属性去控制区域已经margin属性控制和周边的关系。caption主要是依靠透明度opacity和transition两个属性完成，但还要让anchor是block形式的显示，然后再设置caption的position才有效。
第二行的代码如下：

<div class="row">  <div class="col-xs-12 col-md-4">    <div class="portfolioItem">      <a href="#">        <div class="caption">          <div class="caption-content">            <p><b>TurtleSnake</b></p>            <i class="fa fa-search-plus fa-3x"></i>          </div>        </div>        <img src="img/null.png" alt="null" class="img-responsive">      </a>    </div>  </div>  ...</div>

明天最后两个，about和contact，结构会很简单。完成它俩之后再实现滚动监听。晚安！

早上起来之后还是放不下昨天纠结了一个晚上的caption的为止和动画效果，仔细搜索一番找到了两篇比较好的教程，这是关于position的，第二个是关于动画效果。看完之后豁然开朗。用div去控制元素的各种属性就可以了，不需要太依赖于对html自带的元素设置css属性的。所以关键就在于如何合理的将控件用div包裹起来，这个就需要练习辣。不过可以先从我们这个例子来讨论一下，用栅格系统控制好responsive的宽度之后我们下意识可以用一个<div class="portfolioItem">把所有的内容全部扩进来，这么做像是设立了一个大本营，之后像该啥css都可以从这个大本营出发。接下来我们这个portfolio是可以点击的一个anchor，它又包括一张铺在底下的图片和隐藏式的caption，所以这个anchor本身的结构很清晰：a>div.caption+img。关键问题来了，caption内部为什么要再套一个<div class="caption-content">？一开始我也想不明白，但是通过自己play with这些参数之后就发现，div.caption的作用是负责实现隐藏式的动画效果，而它并不能同时控制动画有控制内部元素的排列，所以如果要让里面的p和i元素中间对齐的话需要给它们另外再套一个div。

---

决定暂时不需要contact了，因为这样还得弄一个本地的邮件server负责发邮件。在没有自己的服务器之前搞了也没用。直接进行第五部分about。这部分的html结构其实完全就和header一样，只不过比header少了一图片。所以不再赘述辣。不过在我自己的项目里面我在文字部分后面加了一个我们家养过的最聪明的会开我房间们进来舔醒我的猫猫！
至于contact的内容，简易处理一下就放在footer-above里面，作为中间一列。所以之前设置的每列宽度col-sm-6就要变为col-sm-4辣！

好了到这步之后所有的html&css设计完成了，很简介亮丽的界面。感谢老妈老爸提供的颜色指导。

---

最后就是滚动监控，由于html在这个时候已经超级复杂了，不好找东西，不好描述，所以我选择用官方提供的js方式activate滚动监控。js代码只有一行$('body').scrollspy({ target: '#yinan-navbar-collapse-1', offset: 150 })scrollspy是jQuery定义好的函数，专门实现滚动监听。target就是指向我们navbar中的menu，offset是决定跳转位置与html元素在网页上为止的关系，试着自己调一下offset就明白了。除了js的处理之外还需要在css中设定body是relative的position。另外由于jQuery会在滚动的时候重新给当前所显示的内容对应的ul menu中的li加上active类，而bootstrap有给active的li元素添加了自己的css样式，这样我们不得不重写一下这个样式以符合自己网页设计的风格。其实放在代码里很简单：

.navbar-custom .navbar-nav li.active a,.navbar-custom .navbar-nav li.active a:hover,.navbar-custom .navbar-nav li.active a:focus,.navbar-custom .navbar-nav li.active a:active,.navbar-custom .navbar-nav li a:focus {    color: black;    background-color: #FFF176;}

除了.navbar-custom .navbar-nav li a:focus是在最初设计navbar-custom时就写好的，其他的都是为了应付li.active所加的。最后还要在navbar menu的anchor控件里面加上href指向需要链接的控件id。这样点击这个anchor才会让网页跳转到那个控件哦！
最后既然有了js文件，索性就在学习一下这个开源项目中js文件里的两个新功能吧！只挑两个，不全学，因为还没真正涉及到js呢。哈哈，尴尬。具体请看知识点6。

---

知识点：

1. 控制文本的水平位置用css的text-align属性，控制竖直位置用的是line-height属性。

2. 由于navbar-fixed-top会一直占据页面顶端的一定高度，所以需要让body的padding-top有一定的值，这样才不会导致导航条挡住页面主要部分。

3. 重写导航条主要是依靠给navbar的nav另外加一个自己写的类，这里就完全学习freelancer的做法，给自己定义的类命名为navbar-custom。这样所有在内部的类都可以通过CSS选择器找到并更改。所以自定义CSS的思路目前可以总结出一种就是给要自定义的部分最外测套上一个带自定义类的div，从外到内就改就可以了。

4. 更改导航条上按钮颜色的时候需要用到一些CSS Pseudo-classes，比如hover就是定义当鼠标浮在按钮上的时候，focus表示按钮是被选中的时候。现在感觉一般掌握这两个就够用了。

5. 在做header时，用到了客制化的hr，具体就是在hr中间加上一个font-awesome小图标。处理方式是利用pseudo class: after，它会在原有的hr内容之后显示你指定的内容，之后的意思并不是一定在hr元素的后面哦！另外指定小图标的方法和我们之前用span或者i标签加class的方式不同，是利用content和font-family来指定的。这里有人整理了font awesome图标的content number。还有一个很直观的问题就是这个图标一旦加上去之后岂不是和原来的hr重叠了？所以处理方式就是给after设置一个背景色就好辣。具体代码如下：

   hr.cogs:after {content: "\f085";font-family: FontAwesome;display: inline-block;position: relative;top: -0.8em;font-size: 2em;padding: 0 0.25em;background-color: #FFEB3B;}

   至于top和position就是去控制小图标的垂直位置的。font-size是图标大小，padding是控制hr所表示的横线与图标的间隔。

6. 第一个功能是让我们在小屏幕时点击完navbar menu中的按钮后关闭这个menu。实现其来的逻辑很直白，找到menu中的anchor，重写它的click方法，重写的内容是：当menu button是显示在屏幕上时（既小屏幕的状态下可见，大屏幕是看不见这个menu的）再点击这个button一次。再点一次可不就把menu隐藏起来了。代码如下：

   $('#yinan-navbar-collapse-1 ul li a').click(function(){     $('.navbar-toggle:visible').click();});

   其是判断visible就是利用jQuery自定义的伪状态visible，注意了，这个visible的定义其实并不是说肉眼见到，而是说占据了一定网页空间。因为我们可以在css里面设置opacity使一个明明占据空间的元素透明化，所以在这里不以眼见为实。
   第二个功能比较高级，牵扯到了jQuery插件，Easing。效果是当点击navbar menu中的anchor时，不是直接跳转到所指控件，而是以边加速的方式滑动过去！试试看就知道很酷了！因为jQuery和js的知识没有开始学习，所以，这里就不细说了，因为我也美弄明白。哈哈。除了这里我都看懂咯！可以邮件交流！