Build a Personal Portfolio Webpage


  1. 此项目有难度,实在不会可以先跳过,学完后面再来完善。
  2. 当你看不到右边的视频时,说明你还身处防火墙中,赶紧翻墙去体验自由无阻碍的互联网
  3. 如果你还不明白翻墙对个人成长的重要性,请去看电影《肖申克的救赎》
  4. 目标: 设计一个类似于: http://codepen.io/FreeCodeCamp/full/VemmoX/的个人作品集。
  5. 规则1: 代码是开源的,你可以借鉴,但请不要抄袭。
  6. 规则2: 用你喜爱的任何库来定制属于你自己的风格,实现下面的功能。
  7. 规则3: 你可以用你自己的css和框架,而不仅仅是Bootstrap。
  8. 功能: 你可以通过滚动来浏览这个页面的所有内容。
  9. 功能: 你可以通过点击不同的按钮来跳到不同的社交媒体页。
  10. 功能: 你可以看到不同项目的缩略图。
  11. 功能: 你可以点击导航条上的按钮来调到网页上的不同区域。
  12. 如果你现在没什么东西值得放在作品集上也别担心,后面我们会设计好几个应用,届时你可以再回头来更新你的作品集。
  13. CodePen上已经有很多很棒的作品集模板来供你参考,但你需要去设计你自己的作品集,用Bootstrap可能会容易实现一些。
  14. 因为CodePen重载了Window.open()功能,所以你必须得用jQuery选取锚点元素<a target='_blank'>的方式来打开一个窗口。
  15. 当你遇到困难的时候,记得查看错误提示、阅读文档、搜索、提问。
  16. 当你完成了这个项目,请点击 "我已经完成了这个挑战" 按钮,输入你的项目在CodePen上的链接。
  17. 你可以分享这个项目给huluoyang聊天室来获得反馈。

进入下一个挑战 (ctrl + enter)
Help
Bug