FCC杭州站成长日记·主站设计篇

2月11号下午与黄金同学成功面基，我俩就如何从零开始组建杭州区FCC编程社群初步讨论出了一个方案。将这个活动流程公布出来的一个目的是为了加速活动组织进度，另外有志于参与到咱们社群的朋友也可以对其中的流程、技术点等等提出自己的建议、疑问，大家互相交流共同进步。好了闲话不多说，下面是我们具体准备的一些细节。

我们初步定下大的活动组建流程如下：

第一步，初步搭建FCC杭州区主站

第二步，书写并在各大平台（微信公众号、等）上发布宣传文案

第三步，寻找场地、确定活动主题（准备PPT）、参与活动

第四步，活动回顾总结、并确定下一次活动主题

如下是我们“FCC杭州区主站”的设计细节：

搭建流程

1、搭建网站基本框架

2、简单实现各个模块

3、完成页顶栏设计

4、活动剪影轮播图效果实现

5、设置相关组织外链

相关技术点：

1、HTML、CSS、JavaScript

（PS：对于这些知识点的学习大家可以移步我们有爱的freeCodeCamp中国主站：https://freecodecamp.cn/home）

2、相关插件：jQuery、bootstrap

3、作品上传：Git

4、网站发布：GitHub（简单介绍发布流程）

下面是对于网站设计的一些细节内容

（关于初步制作一个网站的流程大家可以参考MDN的基础教程：https://developer.mozilla.org/en-US/docs/Learn）

首先需要感谢成都区小伙伴的无私分享，我们是参考他们成都区主站完成初版FCC杭州主站设计的。我们初步将主站划分成了FCC介绍、活动剪影、成员作品、加入我们、Feature这五个部分。

1.页顶栏的颜色设计成了透明底色，页内跳转文字的hover效果为褐色。主站顶部的背景图展示的是西湖风景图。展示效果如下：

顶页展示

2.目前“你将学到什么”这一块我们内嵌的是一个静态图片，后期考虑将其改进成SVG图片样式。

3.“活动剪影”一栏初步实现了一个轮播图效果，初期引入的时候样式显示还有些不太正常，需要作出调整。展示效果如下：

轮播图效果

（如下是FCC杭州站引用的轮播图插件）

轮播图插件链接

4.成员作品一栏我们目前只是一个展示效果，后期会增添成员的具体作品

5.加入我们一栏贴上了GitHub组织（内附主站源码）、微信管理员、FCC杭州站公众号以及咱们杭州区freeCodeCamp的QQ群。相关的二维码如下（有兴趣的朋友赶快加入我们吧！）：

加入我们

6.底部加入了FCC社区主页的友情链接

7.最后就是关于主站的发布内容了，目前我们使用GitHub发布的杭州区主站

(1)不太清楚Git如何使用的朋友可以参考廖雪峰的Git基础教程

(2)关于如何在GitHub上发布网站的话可参考静态网站的发布

最后是咱们的FCC杭州区主站地址：https://fcchz.github.io/FCCHangZhou/