前言
为了学这个全栈，我竟然把我之前投入了数不清的时间和精力，做了接近5年的工作给放弃了，把全职变成了兼职（本来学编程是兼职，调换过来了），在之前这份工作里，其实我甚至觉得我再也不可能找到对员工那么好的老板。更没有想到我会选择离开……
可是一切都在遇到了新生大学后，变了。谁叫我还是有梦想的呢？谁叫我认识了李笑来老师，谁叫我加入了新生大学，谁叫我不巧的机会花了200块钱听了Xdite老师的元学习课呢？然后我就有点一发不可收拾地渴望在这样的环境和团队里学习与成长，然后就开启了第一期线上全栈课程的学习……
再然后我就奋不顾身地把原来的工作岗位放弃了（备注：我不是鼓励大家要这样哦，自己还是要努力考虑清楚的哦），于是过完年后，我几乎是全身心投入到了全栈的比赛当中，为了学得更专注，我甚至放弃了之前每天必读的得到专栏……
最近3周的时间，我们参加了一次编程比赛，且来看我们这次比赛的结果及我们是如何做到的。
我们的作品
首先，通过这段时间的比赛和学习，感觉自己收获满满。我来晒一下我们最终作品的部分图吧。就是这个效果：
Landing Page 部分
首页
产品页面
购物车
参赛作品策略复盘
首先，找队友
由于这次的商城比赛是两个人一队。比赛正式开始之前，我们就已经找到了队友，那我们找队友的标准及如何找到的呢？
1、首先，配合方便
我们首先考虑本地的同学，这样配合起来会很方便。当然因为本身我们厦门就有不少学员在学习，如果很少，可能得考虑异地。
2、其次，双方之间的互补性
在价值观，审美等比较一致的基础上，互补选择。
3、最后，要对选择的人有一定的了解
因为我们之前厦门做过线下meetup，相互之间有了一定的了解，我们在选择队友就相对比较容易和靠谱。
敲定了以上的标准后，我就觉得同样来自厦门的伍兰同学应该蛮能给我配合得来的，我们一起参加过线下的聚会，她一直积极帮忙大家找地方、对一些事情的审美和判断我也很认同。就直接发微信跟她说：“两人组一队哟，也许我们可以组成一队，可能有互补”，组队的事就这样成了。
组队完成的时候，我跟我队友说：我们是不是已经超越了很多人了？她说：是啊！哈哈哈。
关于怎么找队友，Xdite老师在VIP课程里有专门的视频讲解。
备注：所以参加线下meetup非常重要，我们厦门第一次线下meetup的认识的7个人组了3队！
其次，搞定主题
接下来就敲定商城要卖什么了，我们其实就花了不到一个小时左右的时间，就基本把魔改网站的产品主题给搞定下来：可穿戴设备。我们都比较认同的新科技产品类。
再次，快速推出作品初稿
Xdite老师在她的hackthon比赛经验中谈到出作品一定要快。所以我们从这个学到的经验就是初稿出来一定要快。
那初稿什么东西最重要呢？我们一致认为是产品首页，所以在比赛正式开始的前两天，我们搞定了最重要的产品首页（当然后面产品页面也一起跟着出来了）。
我们原计划是14号左右把初稿放上去。不过，13号凌晨，我做完作品，电脑已经合上准备睡觉，睡前打开看到好几个作品都推上去了，有的甚至压根就还没魔改，就放上去了，那时，我其实所有的资料都准备好了，包括首页，包括产品页，包括heroku也测试可用了。于是，我马上爬起来，把作品也上传上去。我们就也推上去。我们推上去的初稿作品是这样的：
接下来，我们的作品基本没有掉过前十。当然，得感谢各位学员的帮忙支持！
添加额外功能
添加额外的功能主要包括点赞功能，搜索功能，导航栏固定、产品分类等等，我有写了一些文章，有兴趣的人可以去参考下面文章链接：
商店魔改分享01-颜色修改利器-能看到CSS代码颜色 http://forum.qzy.camp/t/01-css/635
商店魔改分享02-用boostrap做分栏效果-非常简单：http://forum.qzy.camp/t/boostrap/678
商店魔改分享03-一步一步学会如何添加产品分类-非常详细：http://forum.qzy.camp/t/topic/720
商店魔改分享04-登录弹窗教材优化去bug：http://forum.qzy.camp/t/bug/725
商店魔改分享05-简单六步实现对产品点赞功能：http://forum.qzy.camp/t/topic/750
商店魔改分享06-如何克隆项目并修改项目名称 http://forum.qzy.camp/t/topic/751
商店魔改分享07-实现网页下拉时导航栏部分内容固定在顶部效果：http://forum.qzy.camp/t/topic/833
商店魔改分享08-如何把landing page放到自己项目中： http://forum.qzy.camp/t/landing-page/836
商店魔改分享09-如何把页面内容定位在整个页面的中间 http://forum.qzy.camp/t/topic/843
Joblisting魔改分享01-如何在navbar上添加搜索栏并实现搜索结果 http://forum.qzy.camp/t/navbar/486
魔改细节过程复盘
首先，定下主题和颜色
我们用比较土的办法：去找网上做的比较好看的网店来参考。时间和篇幅有限，这里先不细说。可以去参考：
商店魔改分享01-颜色修改利器-能看到CSS代码颜色 http://forum.qzy.camp/t/01-css/635
当然，这部分也可以在下面的过程中回头过来反复修改。
寻找模板套起来
这个是参加这次比赛最重要的一个环节，我开始吸取第一次的魔改经验，第一次因为自己基础比较弱，采用的就是自己写的方式，结果到了最后，发现整个结构不够结实，自己基础又薄弱，要调整结构基本上调整不来，出问题也不能从根本上解决问题，会导致后面魔改效率非常低。
所以这次，我们真正的使用bootsnipp.com 上的模板来套（第一次其实我是觉得bootsnipp上的模板看起来很土的样子，有点看不上）。一套一改，才知道这个bootsnipp是个宝藏，是个宝藏，是个宝藏。
接着就开工了：
一、修改navbar
首先，找navbar，才用navbar在bootsnipp.com上查找资源，效果看起来如下：
挑一个自己喜欢风格的模板就开始用了：
1、把HTML放到html.erb文件里
2、把CSS文件放到application.scss里面
3、如果有JS，把JS放到application.js里面
接着把navbar上的代码套进来，且修改成自己想要的颜色和风格。
二、修改footer
同样的道理，修改footer就是bootsnipp.com上找到合适的footer，搜索footer即可。
三、其他部分
其他包括产品列表，产品细节等等，也是用相关的英文关键字比如product list等去搜索，都能找到合适的。
四、关于配色
我专门写过一篇配色的文章，有兴趣的人可以去参考：
商店魔改分享01-颜色修改利器-能看到CSS代码颜色 http://forum.qzy.camp/t/01-css/635
五、Landing page
做landing page是在调查结果的基础上做的一个着陆页。所以做这个其实分为两部分：
1、 做问卷调查
在Xdite老师的教程里说到做问卷调查一定要问下面三个问题（一定要找真人问卷）：
当你用了，做了，学会了xxx，完成yyy后，你最想达成什么目标？
当你在使用/做xxx的过程中，你最讨厌的是什么？
当你学会/买到/知道xxx之后，你最想做什么？
这三个问题初看起来很普通，甚至会觉得很土。但是当我们跟着做之后，惊奇地会发现这三个问题简直就是三大宝刀，刀刀能切中要害。做完调查问卷后，Landing page的文案基本就成型了。
最后，我们还感叹：真理往往就是这么简单啊。
2、用Xdite老师教的方法做Landing page
这个具体是收费课程的内容，如果我说比自己做的效率和效果提高几十倍，一点都不夸张。
最后做完可以很简单地不代码copy到自己的项目中，可以参考：
商店魔改分享08-如何把landing page放到自己项目中：
http://forum.qzy.camp/t/landing-page/
这次比赛中我还学到了什么
以上我分享的只是参加比赛的一部分，但其实在这里，我们不只是学编程。编程的世界，编程代码只占20%，思想占80%。虽然最开始大部分同学都觉得写代码是最难的部分。除了编程，这个过程我还学到很多编程以外的东西，且让我一一道来……
全栈人生
Xdite老师和全栈团队毫无保留地教给我们编程之外的许多“武功秘笈” ：
放下你的无效学习方式（
https://fullstack.xinshengdaxue.com/posts/250
）、领悟 “学习的黄金通道”（
https://fullstack.xinshengdaxue.com/posts/249
）
如何保持充沛精力、如何多活七辈子、如何高频快速提练小套路学习任何东西
如何做提取练习、计算机思维、用户故事、任务拆解
甚至还有快速读书方法论、如何项目管理、如何提高效能、如何用User Story的方式做项目、学习如何与队友协作
在接下来接近9个月的时间里还有很多的选修课程可以让我们不断充电和学习，课程包括SEO、高阶程序员的自我修养、技术协作、架构拆分、JavaScript等等
……
跟我一起魔改的队友伍兰甚至觉得其中的
项目管理的那节课程就已经值回接近2万的学费了
。
总结一句话：
我们学习的其实是如何重塑自己的大脑。
备注：全栈的定义
能够独立策划、开发、运营开发互联网产品
熟悉 Web 开发方面的全栈技能（ Rails / CSS / JavaScript / SQL / Server Deployment / …. )
具体也可以参考 Quora 上这篇文章What are good ways to be a full stack developer （
https://www.quora.com/What-are-good-ways-to-be-a-full-stack-developer
），了解“全栈”在技术上的定义。
战胜恐惧
在参加两次比赛之前，全栈营Xdite老师说要参加比赛才能参加线下课程，我最开始参加比赛其实是奔着为了能参加线下课程来着。
可是，不知道为什么，我一听到比赛，总有一丝丝莫名其妙的恐惧感？会担心自己做的不够好的那种感觉，特别是这种比赛还是要通过拉票的方式来得出最后结果的，而我平常又是最讨厌那种经常要求朋友帮忙的拉票行为，因为很多拉票行为往往与东西好坏无关。
可喜的时候，当我迈出这一步，努力地把自己的优势和在全栈营所学的东西都运用起来，把拉票的方式变成分享自己的学习成果，写成教程，帮助别人解决问题的结果，竟然会是收获满满，认识了很多来加我跟我聊学习经验和感受，最终我们队还能在接近100队的参数队伍中拿到了第四名。
通过分享跟大家建立了连接
我一直觉得，加入新生大学，来到全栈营，认识了这么些牛逼的老师，愿意把自己所懂拿出来跟我们分享的老师，认识了这么多愿意花钱来学习进补的同学，是最大的财富，其实我跟很多同学聊过这个话，包括线下和线上，大家也都很认同这个观点。这些人是通过一定条件筛选出来的，这些人不是伸手党，这些人是愿意付出金钱来获取成长的人。
而这些爱学习的人，分享到论坛上的一系列文章，又是我们的另外一笔宝藏和财富……，举例：
一、写给自己与后来者的心得–全栈营商店创意大赛小结（内有大量干货资源）：
http://forum.qzy.camp/t/topic/847
二、【一步一步做出小小食杂铺】前端分享系列1 — navbar导航栏：
http://forum.qzy.camp/t/1-navbar/690
全栈营的这些人，真的很感谢认识了你们，更是谢谢你们对我们作品的支持。正是有了你们的支持，我们才有了这么多的投票：
如果你也想开启自己的全栈之旅，重塑一下自己的大脑，我的这个专属推荐码：af89-b7b8-9c2e，可以为你优惠2000元报名费用哦，欢迎联系我要推荐码。我的微信号是soarmarc
## 前言
为了学这个全栈，我竟然把我之前投入了数不清的时间和精力，做了接近5年的工作给放弃了，把全职变成了兼职（本来学编程是兼职，调换过来了），在之前这份工作里，其实我甚至觉得我再也不可能找到对员工那么好的老板。更没有想到我会选择离开……
可是一切都在遇到了新生大学后，变了。谁叫我还是有梦想的呢？谁叫我认识了李笑来老师，谁叫我加入了新生大学，谁叫我不巧的机会花了200块钱听了Xdite老师的元学习课呢？然后我就有点一发不可收拾地渴望在这样的环境和团队里学习与成长，然后就开启了第一期线上全栈课程的学习……
再然后我就奋不顾身地把原来的工作岗位放弃了（备注：我不是鼓励大家要这样哦，自己还是要努力考虑清楚的哦），于是过完年后，我几乎是全身心投入到了全栈的比赛当中，为了学得更专注，我甚至放弃了之前每天必读的得到专栏……
最近3周的时间，我们参加了一次编程比赛，且来看我们这次比赛的结果及我们是如何做到的。
## 我们的作品
首先，通过这段时间的比赛和学习，感觉自己收获满满。我来晒一下我们最终作品的部分图吧。就是这个效果：
### Landing Page 部分
### 首页
### 产品页面
### 购物车
## 参赛作品策略复盘
### 首先，找队友
由于这次的商城比赛是两个人一队。比赛正式开始之前，我们就已经找到了队友，那我们找队友的标准及如何找到的呢？
1、首先，配合方便
我们首先考虑本地的同学，这样配合起来会很方便。当然因为本身我们厦门就有不少学员在学习，如果很少，可能得考虑异地。
2、其次，双方之间的互补性
在价值观，审美等比较一致的基础上，互补选择。
3、最后，要对选择的人有一定的了解
因为我们之前厦门做过线下meetup，相互之间有了一定的了解，我们在选择队友就相对比较容易和靠谱。
敲定了以上的标准后，我就觉得同样来自厦门的伍兰同学应该蛮能给我配合得来的，我们一起参加过线下的聚会，她一直积极帮忙大家找地方、对一些事情的审美和判断我也很认同。就直接发微信跟她说：“两人组一队哟，也许我们可以组成一队，可能有互补”，组队的事就这样成了。
组队完成的时候，我跟我队友说：我们是不是已经超越了很多人了？她说：是啊！哈哈哈。
关于怎么找队友，Xdite老师在VIP课程里有专门的视频讲解。
备注：**所以参加线下meetup非常重要，我们厦门第一次线下meetup的认识的7个人组了3队！**
### 其次，搞定主题
接下来就敲定商城要卖什么了，我们其实就花了不到一个小时左右的时间，就基本把魔改网站的产品主题给搞定下来：可穿戴设备。我们都比较认同的新科技产品类。
### 再次，快速推出作品初稿
Xdite老师在她的hackthon比赛经验中谈到出作品一定要快。所以我们从这个学到的经验就是初稿出来一定要快。
那初稿什么东西最重要呢？我们一致认为是产品首页，所以在比赛正式开始的前两天，我们搞定了最重要的产品首页（当然后面产品页面也一起跟着出来了）。
我们原计划是14号左右把初稿放上去。不过，13号凌晨，我做完作品，电脑已经合上准备睡觉，睡前打开看到好几个作品都推上去了，有的甚至压根就还没魔改，就放上去了，那时，我其实所有的资料都准备好了，包括首页，包括产品页，包括heroku也测试可用了。于是，我马上爬起来，把作品也上传上去。我们就也推上去。我们推上去的初稿作品是这样的：
接下来，我们的作品基本没有掉过前十。当然，得感谢各位学员的帮忙支持！
### 添加额外功能
添加额外的功能主要包括点赞功能，搜索功能，导航栏固定、产品分类等等，我有写了一些文章，有兴趣的人可以去参考下面文章链接：
商店魔改分享01-颜色修改利器-能看到CSS代码颜色 http://forum.qzy.camp/t/01-css/635
商店魔改分享02-用boostrap做分栏效果-非常简单：http://forum.qzy.camp/t/boostrap/678
商店魔改分享03-一步一步学会如何添加产品分类-非常详细：http://forum.qzy.camp/t/topic/720
商店魔改分享04-登录弹窗教材优化去bug：http://forum.qzy.camp/t/bug/725
商店魔改分享05-简单六步实现对产品点赞功能：http://forum.qzy.camp/t/topic/750
商店魔改分享06-如何克隆项目并修改项目名称 http://forum.qzy.camp/t/topic/751
商店魔改分享07-实现网页下拉时导航栏部分内容固定在顶部效果：http://forum.qzy.camp/t/topic/833
商店魔改分享08-如何把landing page放到自己项目中： http://forum.qzy.camp/t/landing-page/836
商店魔改分享09-如何把页面内容定位在整个页面的中间 http://forum.qzy.camp/t/topic/843
Joblisting魔改分享01-如何在navbar上添加搜索栏并实现搜索结果 http://forum.qzy.camp/t/navbar/486
## 魔改细节过程复盘
### 首先，定下主题和颜色
我们用比较土的办法：去找网上做的比较好看的网店来参考。时间和篇幅有限，这里先不细说。可以去参考：
商店魔改分享01-颜色修改利器-能看到CSS代码颜色 http://forum.qzy.camp/t/01-css/635
当然，这部分也可以在下面的过程中回头过来反复修改。
### 寻找模板套起来
这个是参加这次比赛最重要的一个环节，我开始吸取第一次的魔改经验，第一次因为自己基础比较弱，采用的就是自己写的方式，结果到了最后，发现整个结构不够结实，自己基础又薄弱，要调整结构基本上调整不来，出问题也不能从根本上解决问题，会导致后面魔改效率非常低。
所以这次，我们真正的使用bootsnipp.com 上的模板来套（第一次其实我是觉得bootsnipp上的模板看起来很土的样子，有点看不上）。一套一改，才知道这个bootsnipp是个宝藏，是个宝藏，是个宝藏。
接着就开工了：
一、修改navbar
首先，找navbar，才用navbar在bootsnipp.com上查找资源，效果看起来如下：
挑一个自己喜欢风格的模板就开始用了：
1、把HTML放到html.erb文件里
2、把CSS文件放到application.scss里面
3、如果有JS，把JS放到application.js里面
接着把navbar上的代码套进来，且修改成自己想要的颜色和风格。
二、修改footer
同样的道理，修改footer就是bootsnipp.com上找到合适的footer，搜索footer即可。
三、其他部分
其他包括产品列表，产品细节等等，也是用相关的英文关键字比如product list等去搜索，都能找到合适的。
四、关于配色
我专门写过一篇配色的文章，有兴趣的人可以去参考：
商店魔改分享01-颜色修改利器-能看到CSS代码颜色 http://forum.qzy.camp/t/01-css/635
五、Landing page
做landing page是在调查结果的基础上做的一个着陆页。所以做这个其实分为两部分：
1、 做问卷调查
在Xdite老师的教程里说到做问卷调查一定要问下面三个问题（一定要找真人问卷）：
- 当你用了，做了，学会了xxx，完成yyy后，你最想达成什么目标？
- 当你在使用/做xxx的过程中，你最讨厌的是什么？
- 当你学会/买到/知道xxx之后，你最想做什么？
这三个问题初看起来很普通，甚至会觉得很土。但是当我们跟着做之后，惊奇地会发现这三个问题简直就是三大宝刀，刀刀能切中要害。做完调查问卷后，Landing page的文案基本就成型了。
最后，我们还感叹：真理往往就是这么简单啊。
2、用Xdite老师教的方法做Landing page
这个具体是收费课程的内容，如果我说比自己做的效率和效果提高几十倍，一点都不夸张。
最后做完可以很简单地不代码copy到自己的项目中，可以参考：
商店魔改分享08-如何把landing page放到自己项目中： http://forum.qzy.camp/t/landing-page/
## 这次比赛中我还学到了什么
以上我分享的只是参加比赛的一部分，但其实在这里，我们不只是学编程。编程的世界，编程代码只占20%，思想占80%。虽然最开始大部分同学都觉得写代码是最难的部分。除了编程，这个过程我还学到很多编程以外的东西，且让我一一道来……
### 全栈人生
Xdite老师和全栈团队毫无保留地教给我们编程之外的许多“武功秘笈” ：
- 放下你的无效学习方式（https://fullstack.xinshengdaxue.com/posts/250 ）、领悟 “学习的黄金通道”（https://fullstack.xinshengdaxue.com/posts/249 ）
- 如何保持充沛精力、如何多活七辈子、如何高频快速提练小套路学习任何东西
- 如何做提取练习、计算机思维、用户故事、任务拆解
- 甚至还有快速读书方法论、如何项目管理、如何提高效能、如何用User Story的方式做项目、学习如何与队友协作
- 在接下来接近9个月的时间里还有很多的选修课程可以让我们不断充电和学习，课程包括SEO、高阶程序员的自我修养、技术协作、架构拆分、JavaScript等等
- ......
跟我一起魔改的队友伍兰甚至觉得其中的**项目管理的那节课程就已经值回接近2万的学费了**。
总结一句话：**我们学习的其实是如何重塑自己的大脑。**
备注：全栈的定义
- 能够独立策划、开发、运营开发互联网产品
- 熟悉 Web 开发方面的全栈技能（ Rails / CSS / JavaScript / SQL / Server Deployment / …. )
具体也可以参考 Quora 上这篇文章What are good ways to be a full stack developer （https://www.quora.com/What-are-good-ways-to-be-a-full-stack-developer ），了解“全栈”在技术上的定义。
### 战胜恐惧
在参加两次比赛之前，全栈营Xdite老师说要参加比赛才能参加线下课程，我最开始参加比赛其实是奔着为了能参加线下课程来着。
可是，不知道为什么，我一听到比赛，总有一丝丝莫名其妙的恐惧感？会担心自己做的不够好的那种感觉，特别是这种比赛还是要通过拉票的方式来得出最后结果的，而我平常又是最讨厌那种经常要求朋友帮忙的拉票行为，因为很多拉票行为往往与东西好坏无关。
可喜的时候，当我迈出这一步，努力地把自己的优势和在全栈营所学的东西都运用起来，把拉票的方式变成分享自己的学习成果，写成教程，帮助别人解决问题的结果，竟然会是收获满满，认识了很多来加我跟我聊学习经验和感受，最终我们队还能在接近100队的参数队伍中拿到了第四名。
### 通过分享跟大家建立了连接
我一直觉得，加入新生大学，来到全栈营，认识了这么些牛逼的老师，愿意把自己所懂拿出来跟我们分享的老师，认识了这么多愿意花钱来学习进补的同学，是最大的财富，其实我跟很多同学聊过这个话，包括线下和线上，大家也都很认同这个观点。这些人是通过一定条件筛选出来的，这些人不是伸手党，这些人是愿意付出金钱来获取成长的人。
而这些爱学习的人，分享到论坛上的一系列文章，又是我们的另外一笔宝藏和财富……，举例：
一、写给自己与后来者的心得–全栈营商店创意大赛小结（内有大量干货资源）：http://forum.qzy.camp/t/topic/847
二、【一步一步做出小小食杂铺】前端分享系列1 — navbar导航栏：http://forum.qzy.camp/t/1-navbar/690
全栈营的这些人，真的很感谢认识了你们，更是谢谢你们对我们作品的支持。正是有了你们的支持，我们才有了这么多的投票：
**如果你也想开启自己的全栈之旅，重塑一下自己的大脑，我的这个专属推荐码：af89-b7b8-9c2e，可以为你优惠2000元报名费用哦，欢迎联系我要推荐码。我的微信号是soarmarc**
