HAHOW 線上課程 使用 HTML、CSS 開發一個網站 講師:六角學院(線上程式開發學習單位) 影音教學 中文發音 繁體中文字幕版(DVD版)
內容說明:
課程介紹
為你打造就算沒有程式基礎，也能夠逐步學習獲得網頁排版技巧的紮實觀念，六角學院的講師將協助你成就更好的自己！
學習目標
- 了解設計網頁的脈絡、認識基礎的 HTML、CSS 語法
- 有能力排出具專業、語意化、美觀的網頁設計
- 利用本課程的資源，完成一份完整的網頁設計稿
所學知識
無，就算沒有設計、程式基礎背景也歡迎加入這門課程。
只有先保有研究的心、有興趣解鎖更多前端網頁的知識技能即可！
所需工具
- 本課程將會使用 Chrome 網頁瀏覽器來除錯網頁內容
- 本課程將會使用 Sublime Text 3 、VS Code 編輯器來設計網頁
- 本課程適用於 Windows、OSX、Linux 的電腦系統 VS code
- 備註：在正式課程中也會提供給大家更多程式編輯器的安裝和操作資訊，一步步的帶領你認識必備的前端工具！
哪些人適合這堂課？
- 工作上需要設計網站的人，如：UIUX、網頁設計師、前端工程師
- 職涯發展中，目標成為網頁設計師、前端工程師、軟體工程師的人
- 希望能夠獨立建立網站、學習網站設計的人
講師介紹
六角學院 是一所線上程式開發學習單位，目前已累積 20,000 名學員，讓更多人藉由線上學習在職涯規劃上有更多的選擇是我們的使命是，如果您贊同我們的理念，歡迎加入六角。
我們將深入了解您想發展的領域，每位實習生我們都會量身打造專屬於您的舞台，並讓您實際瞭解公司營運 Know how。
課程內容:
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 線上課程 精通 Bootstrap 4：開發超強不解釋 講師:六角學院(線上程式開發學習單位) 影音教學 中文發音 繁體中文字幕版(DVD版)
HAHOW 線上課程 一變應萬變：RWD 響應式網頁設計 講師:六角學院(線上程式開發學習單位) 影音教學 中文發音 繁體中文字幕版(DVD版)
HAHOW 線上課程 社群力：基礎社群內容概念大解析 講師:圖文不符(專業資訊設計背景團隊) 影音教學 中文發音 繁體中文字幕版(DVD版)
HAHOW 線上課程 會帶人的主管都懂：一次到位的精準回饋技巧 講師: DDI (全球頂尖人才管理諮詢公司) 影音教學 中文發音 繁體中文字幕版(DVD版)
