HAHOW 線上課程 使用 HTML、CSS 開發一個網站 講師:六角學院(線上程式開發學習單位) 影音教學 中文發音 繁體中文字幕版(DVD版) HAHOW線上課程使用HTML、CSS開發一個網站講師:六角學院(線上程式開發學習單位)影音教學中文發音繁體中文字幕版(DVD版)內容說明: 課程介紹 為你打造就算沒有程式基礎，也能夠逐步學習獲得網頁排版技巧的紮實觀念，六角學院的講師將協助你成就更好的自己！ 學習目標 -了解設計網頁的脈絡、認識基礎的HTML、CSS語法 -有能力排出具專業、語意化、美觀的網頁設計 -利用本課程的資源，完成一份完整的網頁設計稿 所學知識 無，就算沒有設計、程式基礎背景也歡迎加入這門課程。 只有先保有研究的心、有興趣解鎖更多前端網頁的知識技能即可！ 所需工具 -本課程將會使用Chrome網頁瀏覽器來除錯網頁內容 -本課程將會使用SublimeText3、VSCode編輯器來設計網頁 -本課程適用於Windows、OSX、Linux的電腦系統VScode -備註：在正式課程中也會提供給大家更多程式編輯器的安裝和操作資訊，一步步的帶領你認識必備的前端工具！ 哪些人適合這堂課？ -工作上需要設計網站的人，如：UIUX、網頁設計師、前端工程師 -職涯發展中，目標成為網頁設計師、前端工程師、軟體工程師的人 -希望能夠獨立建立網站、學習網站設計的人 講師介紹 六角學院是一所線上程式開發學習單位，目前已累積20,000名學員，讓更多人藉由線上學習在職涯規劃上有更多的選擇是我們的使命是，如果您贊同我們的理念，歡迎加入六角。 我們將深入了解您想發展的領域，每位實習生我們都會量身打造專屬於您的舞台，並讓您實際瞭解公司營運Knowhow。 課程內容: 001_課前說明.mp4 002_安裝Chrome瀏覽器.mp4 003_安裝VSCode編輯器.mp4 004_安裝VSCode套件-讓介面變成中文化.mp4 005_開始撰寫HTML.mp4 006_撰寫h1標籤、p段落.mp4 007_CodePen教學-將你的程式碼分享給別人.mp4 008_建立HTML環境.mp4 009_HTML環境語法.mp4 010_Emmet載入環境語法.mp4 011_插入圖片，了解圖片路徑規則.mp4 012_載入外部圖片方式.mp4 013_在網頁上加上a連結標籤.mp4 014_段落p與連結a的混合應用.mp4 015_認識ulli列表標籤.mp4 016_HTML標籤教學-小節練習.mp4 017_HTML與CSS的差異.mp4 018_插入CSS檔案，先寫一個h1讓文字變色.mp4 019_CSS寫法詳解介紹.mp4 020_新手常見CSS錯誤解析.mp4 021_HTML標籤選擇器.mp4 022_擬態選擇器#hover.mp4 023_類別選擇器.mp4 024_使用CSS優化文字排版.mp4 025_在HTML標籤上加入線條.mp4 026_網頁容器介紹.mp4 027_CSSReset-清空瀏覽器預設樣式.mp4 028_display#block區塊元素介紹.mp4 029_display#inline行內元素介紹.mp4 030_display容器特性-區塊跟行內.mp4 031_div與後代選擇器運用.mp4 032_margin產生外邊界距離.mp4 033_padding產生留白距離.mp4 034_margin、padding投影片介紹.mp4 035_BoxModel（盒模型）詳細介紹.mp4 036_margin0auto區塊水平置中.mp4 037_text-align文字水平調整.mp4 038_2020補充教材：不想算盒模型的推擠？試試CSS3box-sizing吧！.mp4 039_Flex排版技巧介紹.mp4 040_CodePen講解Flex技巧.mp4 041_Flex外層屬性(container)介紹上集.mp4 042_Flex外層屬性(container)介紹下集.mp4 043_主軸介紹-要熟練Flex，必修軸線技巧.mp4 044_flex-direction-決定flex軸線.mp4 045_justify-content-決定主軸對齊方式.mp4 046_設計一個Flex並排選單吧！.mp4 047_flex-wrap-決定換行屬性.mp4 048_align-items-交錯軸對齊方式.mp4 049_透過VSCode插件，開啟一個即時預覽的WebServer.mp4 050_Flex練習前置作業.mp4 051_Flex小節練習.mp4 052_Flex裡頭還可以包Flex-圖解教學.mp4 053_Flex裡頭還可以包Flex-程式碼開發.mp4 054_Flexcolumn運用.mp4 055_Markman軟體教學.mp4 056_Flex修煉時光屋.mp4 057_章節說明.mp4 058_使用絕對定位_相對定位設計版型.mp4 059_相對定位、絕對定位元素技巧：z-index-relative、absolute.mp4 060_簡報呈現相對定位跟絕對定位的技巧.mp4 061_使用ulli設計產品列表.mp4 062_絕對定位設計優惠價.mp4 063_position#fixed技巧.mp4 064_Photoshop繪圖軟體下載流程。備註：請先使用CC試用版本，免費的CS2在新系統已失效。.mp4 065_Photoshop切圖流程.mp4 066_background在html元素上載入背景圖片，設定寬高.mp4 067_background-repeat：將圖片重複顯示，repeat-x.mp4 068_background-color：與背景圖片的混用.mp4 069_background-position：移動background的位置.mp4 070_background縮寫教學.mp4 071_圖片取代文字技巧-以logo為例.mp4 072_圖片種類介紹(gif、jpg、png).mp4 073_圖文並排範例.mp4 074_認識HTML表格(Table)標籤.mp4 075_設定表格(Table)上的CSS樣式.mp4 076_表單(Form)簡介.mp4 077_表單三劍客：Form、輸入欄位、Submit.mp4 078_Form、Text、Submit範例程式碼.mp4 079_使用label、placeholder提升表單使用者體驗.mp4 080_label、placeholder範例程式碼.mp4 081_表單元素：radio、checkbox.mp4 082_表單元素：select、textarea.mp4 083_使用CSS修改表單(Form)樣式.mp4 084_CSS3圓弧效果.mp4 085_CSS3漸層效果.mp4 086_CSS3陰影效果.mp4 087_使用canIuse查詢HTML、CSS瀏覽器兼容度.mp4 088_使用Statcounter瀏覽各國瀏覽器趨勢.mp4 089_CSS權重觀念.mp4 090_如何規劃你的網頁結構.mp4 091_head進階資訊設定.mp4 092_head常用語法.mp4 093_十種初學者常犯的錯誤.mp4 094_Iconfinder：免費下載Icon服務平台.mp4 095_unsplash、Flickr：免費高解析圖庫下載資源.mp4 096_前言介紹.mp4 097_環境架設.mp4 098_Layout(佈局).mp4 099_保持網頁靈活彈性的技巧.mp4 100_CSS管理方法.mp4 101_總結.mp4 102_響應式網頁設計(ResponsiveWebDesign).mp4 103_如何從網路上找到適合自己的學習教材.mp4 104_網頁關鍵字速記表.mp4 105_認識網頁編輯器SublimeText3，來寫第一個Helloword網頁吧！.mp4 106_認識HTML標籤，設計具有語意化的網頁結構.mp4 107_建立HTML環境，賦予網頁新生命.mp4 108_HTML環境程式碼.mp4 109_插入圖片，了解圖片路徑與HTML屬性.mp4 110_加上連結，讓網頁開始具有互動性.mp4 111_認識ul、li清單標籤.mp4 112_第一章節講義.mp4 113_CSS標籤選擇器-插入CSS檔案，讓文字變大變顏色吧！.mp4 114_套用第一個SublimePlugin，利用emmet提升寫HTML、CSS效率.mp4 115_CSS類別選擇器-如何透過Class來指定HTML樣式.mp4 116_CSS擬態選擇器-設計a連結動作觸發樣式.mp4 117_使用CSS設定優化文字排版.mp4 118_在HTML標籤上加上線條(border).mp4 119_CSSReset，讓所有瀏覽器都長得一致.mp4 120_行內元素與區塊元素的差異.mp4 121_DIV與SPAN的使用時機、CSS後代選擇器.mp4 122_使用margin、padding來推擠距離.mp4 123_BoxModel（盒模型）.mp4 124_使用margin#auto讓版型置中.mp4 125_補充教材：不想算盒模型的推擠？試試CSS3box-sizing吧！.mp4 126_CODEPEN：線上撰寫網頁服務.mp4 127_Float浮動定位技巧.mp4 128_使用clear清除浮動.mp4 129_兩欄式、三欄式版面定位技巧.mp4 130_設計並排式選單.mp4 131_LOGO與選單並排設計技巧.mp4 132_作業範例程式碼.mp4 133_其他常見clear清除浮動效果.mp4 教材 002_Chrome瀏覽器安裝連結.htm 003_VSCode編輯器官網.htm 007_CodePen官網.htm 012_logo.png 018_CSS-writeCSS.zip 023_CSS-classSelector.zip 030_container-displayInlineBlock.zip 031_container-divSelector.zip 033_container-padding.zip 037_container-textAlign.zip 038_container-boxSizing.zip 041_container上集範例程式碼.htm 042_container下集範例程式碼.htm 044_主軸對齊範例程式碼.htm 045_Flex六角線上模擬器.htm 045_主軸範例程式碼.htm 046_Flex選單範例程式碼.htm 047_Flex-wrap範例程式碼.htm 050_flex-9setting.zip 051_flex-10finalpractice.zip 056_flex-finalhomework.zip 065_使用html做網站.htm 088_Statcounter_.pdf 090_規劃網頁結構簡報.htm 094_iconfinder.htm 096_HTML課程頁面更新_CC.psd 097_sample.zip 112_第一章講義.pdf 113_HTML、CSS範例.zip 114_Emmet字典.htm 114_Emmet官方網站.htm 114_Emmet熱鍵分享簡報.pdf 114_Sublime-PackageControl.htm 119_Myerweb-CSSreset.htm 119_style.css 126_Codepen.htm 132_4-6-homework.zip 相關商品:HAHOW線上課程使用jQuery打造互動性網頁動畫效果講師:六角學院(線上程式開發學習單位)影音教學中文發音繁體中文字幕版(DVD版)HAHOW線上課程精通Bootstrap4：開發超強不解釋講師:六角學院(線上程式開發學習單位)影音教學中文發音繁體中文字幕版(DVD版)HAHOW線上課程一變應萬變：RWD響應式網頁設計講師:六角學院(線上程式開發學習單位)影音教學中文發音繁體中文字幕版(DVD版)HAHOW線上課程社群力：基礎社群內容概念大解析講師:圖文不符(專業資訊設計背景團隊)影音教學中文發音繁體中文字幕版(DVD版)HAHOW線上課程會帶人的主管都懂：一次到位的精準回饋技巧講師:DDI(全球頂尖人才管理諮詢公司)影音教學中文發音繁體中文字幕版(DVD版)