視覺風格網站
I – Awwwards

是一個網站設計競賽的平台,設計師可以投稿自己的網站作品(要錢q_q),平台上會有專業的評審進行評分,每隔一段時間會進行評分,選出近期最優秀的網站,每年還會有頒獎典禮!
II – FWA

同為網站設計競賽的平台,一樣可以投稿作品,一樣要錢,不過競賽項目有分「多媒體互動設計、 網頁設計、APP應用程式、VR裝置」,每天、月、年都會選出最優秀的作品,參賽水準非常高,只要能獲得「FWA OF THE DAY」,就算是業界的翹楚。
III – Bridge

Bridge是WordPress主題銷售網站,有600多種Demo可以參考,風格偏向歐美風(或文青?),如果不用WordPress來架站還是可以提供很多靈感。
IIII – Jevelin

他也是WordPress主題銷售網站,雖然只有40幾種Demo,但是設計跟互動我覺得比Bridge來的豐富,想做動畫跟特效可以參考這個網站。
V – RWD JP

這是專門蒐集有RWD的日本網站的網站,會一次呈現三種不同螢幕尺寸的預覽圖,More頁面可以看到相關設計類型的網站,對於版面規劃超級有幫助。
學習資源影片
I – DarkCode

教你用HTML&CSS就能寫出超美的UI(有可能會再加上一點點的JS),雖然比較耗時,但是設計的自由度&彈性會非常高,另外還有教你完整製作RWD的教學影片,不過上一次上傳影片已經是8個月前了q_q
II – Tahmid Ahmed

跟DarkCode一樣類型的Youtuber,手刻UI外也有RWD網站教學,兩者雖然都差不多,不會有教學,都是跟著Code做,但影片的節奏DarkCode偏快,Tahmid Ahmed較慢,可以挑自己的口味服用。
III – Academind

大部分教的是JS相關的技術,講的很仔細,但要開翻譯,加上片長較長,常常看一看就睡著
IIII – Alex 宅幹嘛

主要以直播方式分享網頁技術主題,不過片長也比較長,是中文學習的管道之一~
程式語言課程
I – HISKIO

有許多免費的基礎課程可以上,另外還有付費的專業技能課程,雖然是影片的方式,但是可以一直一直一直一直重複看,永久保存!雖然一堂課程可能不算便宜,但是可以買組合包更划算,也算是一種學習的管道,可以當成一種投資。
II – Hahow 好學校

和HISKIO差不多的一個線上課程網站,上完課後會有完課證明,不過課程類別超豐富,有很多不同領域的課程可以學習
實作
Owl Carousel

使用率非常高的圖片輪播外掛,可以自動RWD、參數多客製容易、手機版也支援,而且使用上超級簡單(F12看老半天還看不出所以然說)
進入官網後可下載官方安裝包,照著文件引入檔案,也可在cdnjs複製連結貼到HTML的head
中,依照文件描述,必須要有2個CSS跟2個JS檔案。
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.css"/>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.theme.default.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
官方也提供很多範例可以選擇


點進去會看到範例的效果跟程式碼,試著套用Autoplay的效果到網頁上,在想要套用效果的最外層標籤加入名稱owl-carousel
和owl-theme

接著在js檔案加入範例中提供的程式碼
$(document).ready(function () {
var owl = $(".owl-carousel");
owl.owlCarousel({
items: 3,
loop: true,
margin: 10,
autoplay: true,
autoplayTimeout: 2000,
autoplayHoverPause: true,
});
});
就完成啦~~
