作為一枚設計師，我被前端開發朋友的高薪深深傷害……

創意 08-04

作為一名設計師，我被前端開發朋友的工資深深傷害.......

我是學工業設計的，喜歡熱愛設計行業的，但經過幾年的努力工作，覺得未來發展和工資等都有限，所以想往互聯網IT行業發展。在別人的介紹，下了解到web前端目前很火，感覺這是設計新的發展方向，然後就去了解了下前端開發目前的薪資水平。

以下為在某主流互聯網行業招聘網站上，搜索「前端」限定「3年及以內」經驗後最先出現的4份崗位待遇信息。對比自己一個月不到1w的工作，簡直累覺不愛...

難道我的一生就只能落於人後嗎？不甘心對不對！還好，因為你有很好的設計功底，其實web前端開發，也需要有設計師的眼光的，因為單純的程序員對於審美這塊，略微薄弱（別打我....）

那麼，設計師的春天在哪裡，如何成功轉型成出色多金的前端開發工程師呢？來看看阿里巴巴交互設計師的人生經驗吧~

入門篇（HTML/CSS）

說起設計師希望學前端的初衷，大概還是因為各種華麗的網頁特效/交互太過吸引人，這種感覺大概就是：「Hey，我的設計可以做成網頁訪問了呢！」

好在，「展示」對於前端技術來說反而是最簡單的部分。所以，放下你對「編程」兩個字的恐懼，從「稱不上是編程語言」的 HTML/CSS 開始，先做點有成就感的東西出來吧！

對於設計師來說，最有成就感的一定是「可以看到的東西」，而 HTML/CSS 正是用來干這個的，HTML 就是一堆非常簡單的標籤，而 CSS 無非就是把你畫畫的流程用英語按一定的格式寫出來而已，這一部分，只要你有最基本的英文閱讀能力，就會非常!非常!非常容易! （比設計容易10倍的那種容易!）

推薦幾個資源，先從最簡單的學習：

w3school 在線教程 (中文，一個很 Low 但是又很好的入門學習網站）

Learn to code

這個階段的練習主要是「臨摹」：用代碼畫出你想畫的網站，越多越好。

對於書，我非常不推薦上來就去看各種厚厚的入門/指南書，沒必要！這一個階段應該快速上手，培養興趣，培養成就感。先做出可以看的東西再說，掌握常用的 HTML/CSS 就夠用了。

如果完成的好，這個階段過後你大概就可以寫出一些簡單又好看的「靜態網頁」了

入門篇（JavaScript/jQuery）

想要在網頁上實現一些交互效果，比如輪播圖、點擊按鈕後播放動畫？那你就必須要開始學習 JavaScript 了！JavaScript 是一門完整、強大並且非常熱門的編程語言，你在瀏覽器里看到的所有交互或者高級功能都是由它在背後支撐的！

在了解一些基礎的 JavaScript 概念（變數、函數、基本類型）後，我們可以直接去學習 jQuery，你不用知道它具體是什麼（它是一個 JavaScript 代碼庫），你只要知道它可以顯著地降低你編寫交互的難度就好了

對於沒有編程基礎的人來說，想要完全掌握它們兩並不容易。作為設計師，很多時候我們可以先不必深究它們的原理，而是嘗試直接應用它！這樣成就感會來得很快，並且你可以通過實際應用更加理解 JavaScript 是用來做什麼的。

如果學習得順利，你還可嘗試使用各種 jQuery 插件，你會發現寫出支持用戶交互的網站也沒有那麼困難，很多看上去很複雜的功能（比如輪播圖、燈箱、下拉菜單），搜一搜然後看看文檔（教程）、改改示例代碼就好了。

基本的知識掌握了，接下來就是令人頭疼就是動手做項目了，想想能夠讓自己的設計，變成網頁作品集向別人展示? 光想想都覺得自豪，是不是! 可是怎麼樣才能高效學習並且最終開發自己的網頁呢?

Google 大佬給出了捷徑！矽谷技術平台 Udacity 與 Google 聯合打造的「前端開發工程師」納米學位項目，就是旨在幫助廣大的學習者從零開始，8周時間學習HTML、CSS，掌握網頁開發的基本原理和應用知識，開發自己的第一個網頁，更重要的是，它的逐行代碼反饋修改真的非常贊！想一想，你提交的每一行代碼，都有來自全球的前端專家幫你修改、反饋，幫助你改進自己的網頁項目，是一種怎樣的體驗? 想一想都覺得激動，有木有！

Google x Udacity 的前端開發工程師納米學位分為「入門」與「進階」兩個部分：除了矽谷獨家課程視頻外，你會在學習過程中挑戰以下項目:

項目1：培養開發者思維

了解學習編程必備的技能和素質，熟悉開發者的學習方法與問題的解決策略。

項目2：模擬博客文章

學習基礎 HTML 知識，將一個博客文章原型轉換成一個真實的網頁！

項目3：製作動物交換卡

運用 CSS 知識，將設計原型轉換為一個功能完全的網頁。

項目4：編寫作品集網頁

使用 HTML、CSS 和 Bootstrap 將設計原型變為一個真正的響應式網頁。

項目5：製作電子簡歷

學習 JavaScript 和 jQuery 基礎，開發一個電子簡歷，向 HR 更酷地展示自己！

掃碼以下二維碼，查看課程&項目詳情: