前言

為了學這個全棧，我竟然把我之前投入了數不清的時間和精力，做了接近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

魔改細節過程復盤

首先，定下主題和顏色

我們用比較土的辦法：去找網上做的比較好看的網店來參考。時間和篇幅有限，這里先不細說?？梢匀⒖迹?br>商店魔改分享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

），了解“全?！痹诩夹g上的定義。

戰勝恐懼

在參加兩次比賽之前，全棧營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，相互之間有了一定的了解，我們在選擇隊友就相對比較容易和靠譜。

敲定了以上的標準后，我就覺得同樣來自廈門的伍蘭同學應該蠻能給我配合得來的，我們一起參加過線下的聚會，她一直積極幫忙大家找地方、對一些事情的審美和判斷我也很認同。就直接發微信跟她說：“兩人組一隊喲，也許我們可以組成一隊，可能有互補”，組隊的事就這樣成了。

組隊完成的時候，我跟我隊友說：我們是不是已經超越了很多人了？她說：是?。」?/p>

關于怎么找隊友，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**