###### tags: `computer` 教練！我想學寫網站！ === [回目錄](https://hackmd.io/CYIwxqBMoLQKYgKwDYYBYDMB2LMAcAZgIx4zACGISy4ycwkQA===) --- > 你說你想學寫網站？很好！歡迎入坑 如果你只想快速生出一個不錯的網站，建議直接使用現成的線上架站服務，如：[WordPress](https://wordpress.com/)，直接拉出你想要的網站。 如果你想要完全掌握你的網站的每個部分，你得學點程式設計，請繼續往下看： --- ## 寫網站是什麼樣的感覺 網站開發分兩部分：**前端開發、後端開發** 兩者都需要寫code，只是寫的code不一樣，需要考慮的點也不一樣 而且前端必須懂一些美感設計，後端只要專心寫code就好 ### 前端開發： - 產出的成果是**使用者看到的畫面** - 舉hackmd為例，就是**你現在看到的白底黑字的畫面**。 - 前端工程師要寫code決定背景顏色要什麼顏色？文字要多大？字形要用哪種？畫面如何切割？上方選單點下去會跳出什麼？手機版的小畫面又該如何處理？ - 寫的code運行在使用者的**瀏覽器**上 - 基本功是 **HTML, CSS, JavaScript** ### 後端開發： - 產出的成果是**網站的商業邏輯＆資料處理、存取** - 舉hackmd為例，商業邏輯就是「我是筆記服務，我幫你即時**上傳你輸入的文字到我的資料庫**，並即時**同步給所有正在看這份文件的人**」 - 後端工程師要寫code決定這些資料要如何上傳進資料庫、從資料庫取出、同步給每個人 - 寫的code運行在**網站伺服器**上 - 基本功是 **PHP, SQL** --- 一個網站可以有**只有前端**，但不能只有後端！ 如果不用存放資料，每次瀏覽網站，這個網站都長一樣的話，那就不需要後端 像俺的部落格[Eason's blog](https://easonchang.com/)，不管何時去看都長一樣，不會時常更新，就是只有前端的網站； 而像[Facebook](https://www.facebook.com/)，每分鐘都有朋友在發廢文，它就需要後端去儲存、處理這些廢文 建議學網站**從前端開始學習**比較好 建議學網站**從前端開始學習**比較好 建議學網站**從前端開始學習**比較好（很重要講三遍XD） ## 學習前端開發 ### Step 1: 學習HTML, CSS, JavaScript基礎語法，瞭解前端基本概念 兩大神威網站：[W3School](https://www.w3schools.com/)、[Codecademy](https://www.codecademy.com/) 這兩個網站就夠了，兩者都有免費、完整前後端教學 兩者特色如下： - W3School：圖文式教學、線上編譯器直接看到成果、語法速查Reference - Codecademy：專案實作式互動教學 建議**兩者交互參照**，可以先從[Codecademy: Make a website](https://www.codecademy.com/learn/make-a-website)開始，快速了解網站基本概念，卡關的話就參照[W3School: HTML Tutorial](https://www.w3schools.com/html/default.asp)、[W3School: CSS Tutorial](https://www.w3schools.com/css/default.asp)、和[W3School: JavaScript Tutorial](https://www.w3schools.com/js/default.asp) 想再更深入可以繼續做[Codecademy: HTML & CSS](https://www.codecademy.com/learn/web)和[Codecademy: Learn JavaScript](https://www.codecademy.com/learn/learn-javascript)，但建議可以直接跨入Step 2，Make a website做完就夠了 ### Step 2: 直接開始開發你要做的網站 基本概念有了，直接開始做你要做的網站吧！過程中發現有缺什麼技能再補就好 - 想讓網站實際上線，讓別人也可以瀏覽，可以參照：[網路講客【架設網站教學】網站架設有哪些流程？如何開始架設個人網站？](https://ittalker.com/website-hosting-domain/) - 想快速拼出好看的畫面，可以使用這套前端框架（內建大量好看元件）：[Bootstrap](https://getbootstrap.com/) - JavaScript太難寫，可以使用[jQuery](https://jquery.com/)，這裡可以學：[W3School: jQuery Tutorial](https://www.w3schools.com/jquery/default.asp) - 用到比較進階的工具，可能會需要下終端機指令（黑底白字的純文字介面），這裡可以學[Codecademy: Learn the Command Line](https://www.codecademy.com/learn/learn-the-command-line) - 想從頭到尾刻出自己的動畫互動效果，可參照：[Hahow: 動畫互動網頁程式入門 (HTML/CSS/JS)](https://hahow.in/courses/56189df9df7b3d0b005c6639)（付費課程，但真的很讚） ## 學習後端開發 不知道我不會，歡迎加入交大網頁研究社一同研究XD（誤） 雖然我沒實際做過，但相信[W3School: PHP Tutorial](https://www.w3schools.com/php/default.asp)和 [W3School: SQL Tutorial](https://www.w3schools.com/sql/default.asp)一樣有相當的參考價值，歡迎一起研究 ## 延伸研究 - [湾区日报是如何运作的？ | 湾区日报 Blog](https://wanqu.co/b/7/2015-05-24-behind-the-scenes.html?s=promo)