前端工程師學習路徑原來這麼簡單?清楚每一步再腳踏實地,這才是王道

-
前端工程師學習路徑原來這麼簡單?清楚每一步再腳踏實地,這才是王道



想成為前端工程師的人有福了!這篇教你如何一步步成為專業的前端工程師,讓你不再像迷途羔羊般不知從何下手呀!

達內教育評價小組今天要跟大家分享的文章是2019年教你正確的網頁前端學習路線! 很多人想要轉職勝任網頁前端工程師，但是尚未找到適合自己的學習方法。今天達內教育前端工程師課程的老師就為大家分享了這篇正確的網頁前端學習路線，一起來一看究竟!


 

第一步：把握HTML/CSS

這是基本的網站的構建元素，是所有網頁設計/開發者都必須要學會的語言。尤其是HTML5，並且HTML/CSS也很簡單易學，沒得挑！

第二步：學會使用基本工具

文本編輯器：例如 Sublime Text、Dreamweaver、Visual Studio Code 等
圖像編輯器：Photoshop、Illustrator 等
FTP/SSH 工具：Filezilla、PuTTY 等
網頁瀏覽器：Chrome、Firefox 等
雲端硬碟：Dropbox、Google Drive 等

第三步：進修 JavaScript

JavaScript (現階段先忽略Node.js 和任何框架)
理解數據類型：String、Number、Arrays、Objects等
JSON(JavaScript Object Notation)
jQuery框架

第四步：搭建基本網站

使用如 Hostgator、Hostmonster 等虛擬主機建置網站
學會操作虛擬主機的 cPanel (Email ,FTP Setup) 用 Ftp 上傳網頁資料、建置 url 域名等等。

第五步:恭喜你! 你有網頁設計師的技能了!——但還不足以被稱為網頁開發工程師或前端工程師

現階段的你可以：
1. 建立簡單的網站
2. 搭建網頁應用的界面
3. 可以把一張 PSD 檔轉化為基於 HTML/CSS 的靜態網頁
4. 有受雇成為網頁設計師的能力、或者選擇成為接網頁設計案子的 soho 族 (尚需與前端工程師配合，無法獨立架站)
接下來你還需要進修的有：
1. HTML/CSS框架：如 Bootstrap
2. 熟悉網頁後端的程式語言：PHP (建議初學者用)、Ruby 等
3. JavaScript 框架：如 React、Angular 等
4. 數據庫：如 MySQL

第六步：HTML/CSS框架

Bootstrap (強烈推薦)、Zurb、MUI 等

第七步：網頁後端程式語言 (專注再一個就好)

PHP (不是最好的語言,可是目前用於後段較普及且適合初學者學習)
Node.js (一款新型、強大的後台語言)
Ruby on Rails (最好的框架語言，但是對程式語言初學者較難入手)
Python (簡單易學，但是尚未如 PHP 般普及，不過隨著 AI 的爆紅 Python 也越來越普及。

第八步：數據庫(專注於一個!)

關係型數據庫：如 MySQL
非機構化數據庫：如 MongoDB 和 CouchDB
建議選擇以下其中一個組合:
1. PHP 搭配 MySQL
2. Node.js 搭配 Mongolian

第九步：有必要時，精進一些進階的前端技能：

SSH & Basic Command Line
CSS 預編譯器：如 Sass、Less、Stylus
APIS / REST 服務
HTTPS / SSL

第十步：應用

VPS 虛擬專用伺服器
應用雲端平台：如 AWS、Digital Ocean、
Linux 呼籲行
維護和進級

第十一步：恭喜你，成為一名前端工程師/後端工程師/網頁開發者了!

可以開發架設網站
能建置後端 API
能連接 Server
可以處理數據庫
你可以選擇受雇為全端工程師/後端工程師，或是成為可以獨當一面的 soho 族、創業等。

第十二步 (選修技能)：精進程式語言

JavaScript 框架: React、Angular 2、Vue.js、Express (後端)
PHP 框架: Laravel、Codeigniter、Symfony
Ruby on rails
MVC框架：路由、數據庫映射、幫助程序、數據綁定、模板和 UI

第十三步 (選修技能)：基於 PHP 的 CMS 網站

Wordpress (最多人用的 CMS 網站)、Joomla、Drupal
以上 CMS 網站架站快速、有豐富的 plug-in 模組，不過功能有限，適合需要快速架站的場合。

第十四步 (選修技能)：行動 App 開發

你不需要進修 Java 和 C 語言，只要把握 JavaScript！我們可以使用 React Native、 Ionic、 Cordova 等框架來構建 App。

以上就是在前端工程師課程中，超佛心的老師為大家整理的學習路線！希望本篇文章能夠幫助對想要學習網頁前端技術的初學者們。

不想錯過更多Web學習方法和關於HTML5的知識，一定要記得關注達內教育評價！

最後祝大家都能夠順利學成，成為一名優秀的網頁前端工程師。✌





🔑不要錯過延伸閱讀：

關於前端工程師,這兩個CSS標籤必學-(上)Div標籤

關於前端工程師,盒子模型的觀念超重要(下)邊框和留白

前端工程師絕不能搞錯的CSS中:逗號.空格的差別!

著名企業皆投入AI領域,快報名Python課程幫自己在未來卡位!! (下)

網頁設計學員非學不可!! 把AWD變成對SEO有用的助力!!

不知道就要打屁屁了!!SEO優化人員和前端工程師的語意標記入門!!

達內課程先就業再付款- 中時電子報


這個網誌中的熱門文章

Python控制結構一點就通!(5)while迴圈

-
圖片
關於Python的while迴圈,它可以製造出那些效果?一步步跟著這篇走,剩下的你不用怕啦! 關於Python-while 迴圈 Python 的 if 條件判斷式【請參考上篇的 Python教學 ： Python控制結構2.if else條件判斷(1) 】，若評估為 True【請參考： Python控制結構1.布林值Boolean-True or False? 】 的話，就會執行一次；反之則不執行。 Python 的 while 迴圈跟 if 條件判斷式相似，但是不同的是，它不只執行一次。只要條件成立，它就會不斷地重複執行。就算是有其中一段代碼被評估為 False，下一段代碼仍會被執行。 while 迴圈構成，包含了 。 以下範例的 while 迴圈中有一個變數「i」， 初始值 為「1」； 更新值（又稱為調整值） 為「i+1」； 讓迴圈結束的條件 為「i <=5」。 這次 Python教學 給你以下範例，讓 i 的從初始值開始，程式每執行一次，i 就等於上一回合的數值再「+1」一次，直到 i 等於 5 為止停止，寫法如下： i = 1 #初始值 while i <=5: #讓迴圈結束的條件 print(i) i = i + 1 #更新值 (調整) 則結果為： 1 2 3 4 5 >>> while迴圈的「infinite loop(無限循環)」 Python 的 while 迴圈中，有一種被稱作「infinite loop(無限循環)」，當條件（為True）成立時，該程式就會永不停止地重複執行。 「infinite loop(無限循環)」的範例如下： while 7==7: print("這是無限循環迴圈") 結果，「這是無限循環迴圈」這行字就會不斷的重複顯示。 若你真的受不了，你可以 按鍵盤快速鍵「Ctrl-C」以阻止它繼續重複顯示。 以下也是無限循環迴圈的另一個例子，來看看它的結果如何吧！ x=1 >>> while x>0: print(x) x+2 結果馬上會跳出一堆數字，且不斷的在跳出中。後出來的數字，都是
閱讀完整內容

前端工程師絕不能搞錯的CSS中:逗號.空格的差別!

-
圖片
想成為前端工程師?那CSS中最基本的逗號.空格再搞錯,豈不是太不專業了! 有時在 HTML 中， 前端工程師 們會對同一個標籤給予兩個以上的 Class 名稱，如以下所示: < div class = " first second " > </ div > 對於這類有兩個以上的 Class 名稱的 HTML，其 CSS 選擇器可能會用以下的三種情況顯示。而聰明的你，分辨得出這些 CSS 有什麼不同嗎? /*1. 兩個 class 中有空格*/ .first .second /*2. 兩個 class 中沒有空格*/ .first.second /*3. 兩個 class 中出現逗號*/ .first,.second 對於 CSS 及前端工程師的初學者來說，上述三種 CSS 因為長得很像，所以經常傻傻分不清楚。究竟兩個 class 中間空格、沒空格、有逗號，到底差在哪裡? 別擔心，立刻講解給你聽：   1. 兩個 class 中有空格的例子：五個區塊中，階層必須是要在 first 區塊之下的 second 區塊，才會顯示黑底白字的 CSS 設定 See the Pen .first與 .second中間有空格的例子 by Tedutw ( @Tedutw ) on CodePen . 2. 兩個 class 中沒有空格的例子：五個區塊中， div class 名稱必須同時出現 first 與 second 才會顯示黑底白字的 CSS 設定 See the Pen .first與 .second中間無空格的例子 by Tedutw ( @Tedutw ) on CodePen . 3. 兩個 class 中有逗號的例子：五個區塊中，只要 div class 名稱中有出現 first 或是 second 的區塊，就會顯示黑底白字的 CSS 設定 See the Pen .first與 .second中間有逗號的例子 by Tedutw ( @Tedutw ) on CodePen . 註 : 以上三個範例的 HTML 碼都一樣 延伸閱讀： 前端工程師入門款小常識-CSS碼特性一下就上手! 
閱讀完整內容

網頁前端CSS必學兩屬性:display與visible

-
圖片
今天要介紹網頁前端中的兩個CSS屬性:display與visible屬性! 本篇介紹 網頁前端 排版的兩個 CSS 屬性：display 屬性與 visibility 屬性。 CSS ：display 屬性 display:block 對於 CSS 語法來說， 網頁前端 的每個元素都是一個矩形盒（rectangular box）模型。而使用「display」屬性，便可以決定「盒（box）」的呈現方式。 又「區塊元素（block element）」則會佔用可用寬度的最大值，前後有換行符。 以下範例分別顯示了是否有將<span>元素顯示為區塊元素（block element）的結果。 在下方的顯示視窗中，按「CSS」，就可以觀看 CSS 的語法如何設定了！ See the Pen display: block by Tedutw ( @Tedutw ) on CodePen . 上述範例的 網頁前端 CSS 語法設定如下： span.block{ display:block; } display:inline inline 元素只佔用可用寬度的最大值，並不強制換行。 將上一段範例的<span>元素，CSS 換成「display: inline」的結果如下。跟上一個範例一樣，在下方的顯示視窗中，按「CSS」可以觀看 CSS 的語法如何設定。 See the Pen display: block by Tedutw ( @Tedutw ) on CodePen . 上述範例的 CSS 語法設定如下： span{ display:inline; } display:none 「display:none」用來將元素隱藏使用，當元素隱藏後，就不佔用任何空間了，且在 網頁前端 頁面顯示時也不會被展現出來，就好像該元素不存在一樣。 在以下範例中，我們將第 2、4 段設為「display:none」，其他設為「display:block」。 See the Pen display: none by Tedutw ( @Tedutw ) on CodePen . 上述介紹的「block」、「inline」、「none」都是最常碰到的的 d
閱讀完整內容