Minmax01 - 網頁初心者學習筆記

2019年1月23日星期三

圖片相對路徑html/css連結方法(圖片連結失敗？)

連結路徑分為絕對路徑跟相對路徑
不管是連檔案還是連圖片都用得到
絕對路徑：圖片網址,例如 https://picsum.photos/200/300
相對路徑：存在電腦的圖 file:///Users/Apple/Desktop/project/images/logo.png

假設在本機圖片路徑為project/images/logo.png

html
✅ img src="images/logo.png"
❌ img src="logo.png"

css
✅ background-image: url(../images/logo.png);
❌ background-image: url(images/logo.png);

檢查方法

圖片連結失敗先檢查路徑是否正確
用chrome開發者工具按右鍵檢查

2018年12月22日星期六

網頁設計入門自學推薦-影片篇

有些人不喜歡看字學東西，看影片更有趣更生動也比較不會睡著
影片最大的好處是，音調太平淡快睡著可以快轉1.5倍速(自己覺得效果很好)
剛剛那個是什麼看不懂，可以再拉回去
之前學過忘記了，沒關係再看一遍～
最棒的是搭公車捷運也能用手機看著學
看過第一遍有概念，回家再看第二遍操作一遍，節省時間提高效率
這邊就來推薦網頁新手入門的教學影片啦！

AMOS 金魚都能懂網頁入門設計系列

推薦指數：★★★★★
這是一個專為新手設計的入門磚教學的免費佛系課程
AMOS老師是業界講師
我在裡面學到很多基礎，甚至學了之後忘記也會重複觀看去補強記憶
這個系列總共30篇，是2019 IT邦幫忙鐵人賽活動
完全不藏私也不會很難懂，真的看不懂我就看兩遍
他是唯一讓我看影片音調不會睡著ＸＤ

六角學院

推薦指數：★★★★★
專為前端學習創立的教學網站平台，有免費跟付費課程
講師是業界經驗豐富的，教學之中也會提到實際經驗如何操作
很有系統跟架構性，還有前端開發者學習地圖，覺得超級棒的！！
因為我就是那個沒有方向不知道往哪走的迷途小羔羊
整個學程影片讓人有一種“啊～跟著他走就對了”的感覺

udemy

推薦指數：★★★★★
有免費跟付費課程，大量的課程找關鍵字隨便搜一大把
英文語系教學居多可以開字幕(字幕可以加外掛自動翻譯)
課程的費用超便宜常做優惠，免費的也可以學到飽
學習前可以先瀏覽課程大綱
點選購買開始學習，進度進行到幾%也會告訴你相當貼心

慕課網

推薦指數：★★★★★
是大陸的教學網站，課程也是很海量
免費的影片教學質量也是不錯，中文沒有語言障礙
學到飽也是沒問題，沒啥好說的就推一個

看了很多教學影片，不論是台灣還是大陸還是歐美
覺得學網頁這門學問根本無國界啊
看著影片語言不同也不會有太大的障礙
別看到英文就嚇跑啦～

網頁設計入門自學推薦-文章篇

網路資源很多，可是對0基礎的新手來說沒概念
大海撈針根本不知從何開始，找學習管道找到很阿雜
還有文章/影片等各種形式教學文，這裡精選分享我個人學習路上推薦給網頁新手的學習資源
跳過海底撈的過程直接上跑道啦！

網頁起手式：先從HTML/CSS開始吧！

HTML是超文件標示語言（HyperText Markup Language）是一種用於建立網頁的標準標示語言，是網頁基礎必學，再來才學CSS是疊層樣式表(Cascading Style Sheets)可以讓網頁變漂亮，裝飾排版、定義顏色大小。

可以想像成HTML是房子的鋼筋水泥，CSS是室內裝潢，房子蓋好了才能做裝潢嘛(´ΘωΘ`)

學習時間：大約3~7天