入門前端網頁設計從這裡開始，跨出你的第一步！
如果你也想要踏入前端的世界，歡迎你來到 Hahow 與六角學院合作的「前端網頁設計」課程組合，
透過一系列前端語言的基礎課程，循序漸進的帶你進入網頁開發的世界。
而這裡——就是你的第一步！
網頁前端的入門磚，讓我們先從學習 HTML & CSS 開始！
如果你還沒有程式基礎背景，HTML、CSS 便是作為網頁開發的起始點。從 HTML、 CSS 入門學習會是個好主意，這裡的學習曲線不會那麼的陡峭，網頁開發的基礎知識正式從這裡開始！
什麼是 HTML 和 CSS 呢？
HTML 是一種「標籤語言」(Markup Language)。一個網頁的架構、資訊呈現的方式等便是在 HTML 的框架下建構成行。
CSS 的角色則是一種「樣式表」（StyleSheet)，在 HTML 的框架下，描述網頁更細節的視覺呈現，例如網站顯示的樣式、顏色、字型、排版等。
也因此，透過最簡單的 HTML、CSS，可以為你的前端網頁描繪出一個簡單的雛型，透過更進階的 CSS 語言，甚至可以再為網站添加一些簡單的動畫與互動反應。
為什麼要學 HTML、CSS ？
如果作為前端的初學者，後續也有規劃要找軟體工程師、網頁設計師的工作，具備紮實的網頁排版觀念是必要的條件，也是公司在徵才時必備的加分項目喔！
現在的你或許沒有程式基礎，但是，透過這門課程，便是希望透過紮實觀念，賦予你網頁排版的技能，讓你有機會為自己開發的網頁上架在伺服器上。
我們會先從最簡單的網頁架構、排版開始，熟悉程式語言的架構和邏輯，在這個課程中你會學到如何從無到有來設計一個網站，同時也會教你如何善用軟體工具來提升你的開發效率。
1. 用最簡單、最清楚的內容，帶你入門
每次看到複雜的程式碼總是特別害怕嗎？在這堂課程中，老師將用清楚、簡單的語言，讓你了解前端必備的基礎知識。課程中觀念與程式碼教學並重，老師會用實際的案例進行講解，除了一一剖析程式碼的概念原給你聽之外，也會實際操作給你看！
2. 透過實際範例讓你了解正確網站的開發流程
在這裡不在是填鴨式教學，而是透過實際的範例，瞭解正確的網站開發流程，講師均具有業界開發經驗，讓學員學習業界主流的開發方法。
3. 不用擔心學不會，六角講師們會親自檢視你的程式碼觀念
你不用擔心學完後無法驗證自己所學的觀念是否偏離，課程結束後六角講師會提供給你一個網頁設計稿，透過實作讓你融會貫通課程中學習到的知識技能，當你擁有自己的作品後，也鼓勵你將程式碼成品提供給六角講師們檢視。六角學院的團隊成員各個都是在業界的專業工程師，將會親自一一檢視程式碼，並指出待改進的地方，讓你能夠設計出更加完美的網頁設計。
誰適合這門課程？
- 適合完全沒有設計、程式基礎的初學者
- 目標成為網頁設計師、前端工程師、軟體工程師
- 希望自己能夠從無到有設計一個網站
我將從這堂課程學到什麼？
- 有能力排出具專業、語意化、美觀的網頁設計
- 課程結束後，六角團隊會提供給你一個完整的網頁設計稿，當你實作出網頁來後再轉交六角學院的講師們，為你進行程式碼審視，以確保你吸收的網頁排版觀念是正確的
- 了解設計網頁的脈絡，你隨時可以在留言區和六角社群中發問問題，六角助教們皆會為你解惑！
- 獲得持續更新的講義教材，讓你可以終身複習，不擔心會脫離現代趨勢與新知
從講解基本觀念和學習資源開始，帶你輕鬆入門
課程將利用最新、新手必備的知識帶你入門。我們會先從認識網頁的編輯器開始，幫助你建立一個適合學習的程式環境。在有編輯器的基礎概念後，則會開始帶著你認識 HTML 的標籤。我們將從設計具有語意化的網頁結構開始。
當你有基本網頁架構基礎後，便是學習利用 CSS 常用語法的時候了！當網頁已有了基礎架構，我們可以開始學習怎麼為網頁帶來更多的變化，包括文字顏色、樣式、排版本面等。讓你的網頁更能夠依照自己心中理想的樣式呈現在你眼前！
章節 1 | 課前說明章節 2 | 2020 VS Code 網頁編輯器、HTML 基礎教學 章節 3 | 2020 CSS 常用語法章節 4 | 2020 使用 CSS 變更 HTML 標籤特性章節 5 | Flex 網頁排版技巧章節 6 | Flex 精神時光屋從學習程式碼知識到實作應用技巧
在完整建立好 HTML、CSS 的環境架構、標籤特性後，老師將帶給你實際的網頁排版技巧，讓你能透過不同的程式碼語法、元素，將網頁的視覺資訊完整的透過排版版位、圖片顯示、表格設計、各種視覺效果等設計出來。在課程中，老師會將這些技巧視覺化、透過簡報的方式讓你理解原理與概念。理解後，老師則會一一透過程式碼的形式，讓你看出網頁的視覺成效。
章節 7 | 章節說明章節 8 | 網頁排版技巧 Part II章節 9 | 切圖技巧章節 10 | 表格與表單設計技巧章節 11 | CSS3 技巧帶著你反覆練習，從初學者視角走向專業的實戰經歷
在一一教授給你網頁基礎技能後，老師會帶著你以綜觀全局的方式，讓你知道規劃網頁結構的核心，而非盲目的跳入撰寫程式的階段。 為了讓你省去後續調整、開發的時間，老師將會站在業界工程的角度為你剖析在開始操作前，應該檢視與釐清的細節、使用者常犯的錯誤、關鍵與更進階的資訊等，讓你的網頁在後續呈現上能夠更專業。
章節 12 | 最後，讓你的網頁變得更專業章節 13 | 開發多頁式網站實戰講解章節 14 | 接下來，你還可以學什麼？滿足你的好奇心，有興趣的話也歡迎看看早期的程式碼課程！
因課程拍攝的時間點較久遠，章節 15 - 章節 18 為六角一開始授課的章節內容喔！
因前端網頁的程式碼新知經過不斷的更新，為了提供最新的資源給大家，在一開始的章節便是希望讓同學們看到最新的教學內容與資源。建議同學們可以依照此課程的章節順序學習就好了！
如果你還有一點時間，也好奇前期學長姐們的學習內容，歡迎你來到章節 15 - 19 的舊章節中探勘看看有什麼新發現喔！
章節 15 - 網頁編輯器、HTML基礎教學（舊章節）章節 16 - CSS 常用語法（舊章節）章節 17 - 使用CSS變更HTML標籤特性（舊章節）章節 18 - 網頁排版技巧 Part I（舊章節） 
在這門課程中，六角團隊設計了兩種作業給你練習！
單元作業
單元作業為根據不同課程單元設計的作業內容，能夠讓你實際應用與驗證該單元所學是否正確。在課程單元列表中會有詳細關於該單元建議完成的作業項目和指引。建議同學一定要完成單元作業，唯有透過實作的當下，才能夠真正明白自己是否完整吸收、領會該單元內容，幫助你為接下來的知識內容做準備喔！
【最終試煉】使用 HTML、CSS 開發一個網站
當你完成所有課程內容後，六角團隊將賦予你一個更大規模的實作任務，考驗你是否有完整學會這門課程的要領！
建議大家可以先通過小規模的單元作業練習，等你完整吸收各階段的知識後再來嘗試獨立完成課程的【最終試煉】任務，相信也會讓你在承接任務時能夠事半功倍！
作業的設計稿會在 HTML 課程『最後一版 PSD 練習』章節中提供，如不想練習切圖，可到『最後一版 PSD 作業細節』章節下載圖片檔。完成任務的條件為：
條件 1 | 成績評等有達 A 的成績條件 2 | 做完任務資訊裡，所提供的最終作業版型在完成這堂課程的最終試煉任務後，你將獲得以下兩個重要技能！
- 有能力排出具專業、語意化、美觀的網頁設計
- 進行程式碼審視，以確保你吸收的網頁排版觀念是正確的
要如何承接任務，並讓六角助教團隊批改我的作業呢？
步驟 1 | 註冊「程式勇者村」帳號
「程式勇者村平台」為六角專為學員設計的學習輔助平台，如果還沒有註冊過該平台帳號，在繳交作業之前記得先註冊專屬自己的「程式勇者村」帳號喔！
步驟 2 | 點進任務連結，承接專為課程設計的【最終試煉】任務
登入程式勇者村 後，可以回到 Hahow 課程中的最後「最後一版PSD作業細節」單元中「老師的話」看到更動資訊，在此單元中會有「【最終試煉】使用 HTML、CSS 開發一個網站」的任務連結，在該單元中也會提供更詳細的說明和專屬作業的設計稿和圖片檔喔！
步驟 3 | 回報任務
完成作業後，可以在課程任務連結中的「回報任務」的留言系統，提交希望給助教檢視的任務內容，六角助教在完成批改後，將提供專屬回饋，確保你理解課程內容。 你還可以在同一頁面中的「任務對話欄」和助教討論繳交的內容喔！⚠️ 繳交作業的注意事項
提交作業檔時，請使用 Google Drive、Dropbox、GitHub Repo 任一來提供網頁壓縮檔，還請記得開啟公開權限，六角助教才能進行下載流程。傳送作業前，可先開 Chrome 無痕視窗，觀察是否能提供下載，確保六角助教能夠進行下載作業批改，才能夠提供給你回饋喔！ 作業批改與問題回覆
如果作業太難或是在課程中有疑問想要詢問助教，也歡迎將所有的疑難雜症紀錄下來，向六角助教們發問、求救喔！
回覆問題：六角助教會以每週二次的頻率上來回覆大家的問題喔！同學們如果有疑問歡迎留言發問，等待助教的解答喔！批改作業：六角助教會以每週一次的頻率上來批改大家的作業，建議一定要繳交作業才可以得到助教的回饋，幫助你進步喔！❗️ 如時間有更動請參照 Hahow 公告為主喔！
六角學院的校長：廖洧杰
- 高雄前端社群發起人
- 中華電信前端講師
- 高雄大學前端講師
- 十年實務經驗，授課時數超過一千小時
熱愛分享與交流的前端工程師，目前專注於兼容桌面/移動網頁前端開發，期間已協助數百位平面設計師，網頁設計師導入標準網頁設計。
關於六角學院
六角學院是一所線上程式開發學習單位，目前已累積超過 20,000 名學員，讓更多人藉由線上學習在職涯規劃上有更多的選擇是我們的使命是，如果您贊同我們的理念，歡迎加入六角。
什麼是「合作優選」的課程？
「合作優選課程」為 Hahow 向外探尋、精心挑選進來的優質課程 ，讓渴望深度學習的你，在 Hahow 擁有更多選擇！
價格保證
「合作優選課程」讓你放心！只要你可以在其他網站以更低的價格購買到相同課程，我們將協助全額退費，詳細說明請參考相關政策。
