在這份教材中,實際練習了實務上常見的 UI 元件 雖然只有少少幾個元件,但已能滿足許多網站設計需求 實務上,不會經常需要手做這些元件 通常會拿現成的 UI 套件包當作基礎,接著客製化與修改,例如最知名的 Bootstrap 套件 但是,不論是網頁設計師、前端工程師,在使用現成套件之餘,稍微知道背後的原理,比較好 這樣才能更好地掌握工具,以及在必要的時候能夠親自開發與修改 而到目前為止,我認為,你已經能夠親手製作出設計師要求的大部份靜態&動態設計了! --- 真正在工作的時候,也會很像本次課程這樣,幾乎完全沒人幫你 但或許會有人告訴你關鍵字,或是你覺得好像在哪邊看過某種功能、效果 所以雖然你還不會做、沒有做過,但你有信心,可以找到相關資源、可以做得出來 身為軟體工程師,需要有這種「大致知道自己潛力在哪」的能力與信心,才能不斷樂於接受超出能力的挑戰 要習慣這種感覺。就像在這次的七個 UI 元件練習中,在我完全沒有教學的情況下,你就成功做到了 --- 消化、研究完本課程之後,關於 JavaScript 更多必學的基本觀念 請接著前往「自學網頁の嬰兒教材:JavaScript(四)」開始學習吧! https://codelove.tw/@howtomakeaturn/course/837eq0
# 第6課 課程目標 運用目前所學到的技巧,完成一個完整的 RWD 網頁。 # 第6課 課程內容 這門課到目前為止所教的技巧,只有運用 Bootstrap 快速、方便的做出網頁排版。 我們並沒有深入去研究背後 css 原理以及太多進階 css 技巧。 很棒的是,光是這些基本 Bootstrap 應用以及 css,就足以應付實務上的許多需求了! 這次要試著用你在這門課學到的技巧,試著做出一個完整的 RWD 網頁。 # 第6課 作業 請打開美國時代雜誌的網站首頁: http://time.com ![](https://i.imgur.com/cPqz09D.jpg) 在之前的作業,我們只做了藍色圈起來的部份。 這一課的作業,我們要把整個時代雜誌首頁做出來! 你的作業需要滿足下列三個要求: - 在電腦上能順利瀏覽 - 在平板上能順利瀏覽 - 在手機上能順利瀏覽 時代雜誌的首頁有幾個進階的元素,例如影片、投影片元素。這些進階的元素可以省略不做。 除此之外,單純文字與圖片的部份,請儘可能的重現出來。 完成這些,你就完成這次的課程目標了!
# 第4課 課程目標 能夠讓元素在不同裝置上面,以不同的順序顯示。 # 第4課 課程內容 請參考:https://getbootstrap.com/docs/5.3/layout/columns/#order-classes # 第4課 作業 承接前一課的作業。 ![](https://i.imgur.com/cPqz09D.jpg) 仔細看你會發現,在電腦螢幕上,中間是頭條新聞,左側是其他新聞。 按照 html 的順序邏輯(由上至下,由左至右),其他新聞的區塊順序是第一,頭條新聞的區塊順序是第二。 隨著螢幕縮小,在手機螢幕上,頭條新聞是出現在最上面的。 所以在手機螢幕上,頭條新聞的區塊順序是第一,其他新聞的區塊順序是第二。 請實作出這個效果。 除了上一課作業的要求之外,這一課作業再加上兩個要求: - 在平板、電腦上,其他新聞的區塊順序是第一,頭條新聞的區塊順序是第二 - 在手機上,頭條新聞的區塊順序是第一,其他新聞的區塊順序是第二 完成這些,你就完成這次的課程目標了!
# 第3課 課程目標 能夠將元素只顯示在特定裝置上面。例如有些東西只在電腦顯示,有些東西只在手機顯示。 # 第3課 課程內容 請參考: https://getbootstrap.com/docs/5.3/utilities/display/ # 第3課 作業 承接前一課的作業。 ![](https://i.imgur.com/cPqz09D.jpg) 圖中右邊的 The Brief 區塊,只會顯示在電腦與手機上,在平板上是不會顯示的。 請實作出這個效果。 除了上一課作業的要求之外,這一課作業再加上兩個要求: - 在平板上是 1-2 比例的多欄式佈局 - The Brief 區塊在平板上隱藏 完成這些,你就完成這次的課程目標了!
# 第2課 課程目標 能夠使用 Bootstrap 網格系統來打造適應各種螢幕大小的排版。 # 第2課 課程內容 這一課要學習使用 Bootstrap 的網格系統。 請參考這幾份教學: - https://www.w3schools.com/css/css_rwd_intro.asp - https://www.w3schools.com/css/css_rwd_viewport.asp - https://www.w3schools.com/bootstrap5/bootstrap_grid_system.php - https://www.w3schools.com/bootstrap5/bootstrap_grid_stacked_to_horizontal.php - https://www.w3schools.com/bootstrap5/bootstrap_grid_xsmall.php - https://www.w3schools.com/bootstrap5/bootstrap_grid_small.php - https://www.w3schools.com/bootstrap5/bootstrap_grid_medium.php - https://www.w3schools.com/bootstrap5/bootstrap_grid_large.php - https://www.w3schools.com/bootstrap5/bootstrap_grid_xlarge.php - https://www.w3schools.com/bootstrap5/bootstrap_grid_examples.php 以及官方文件: https://getbootstrap.com/docs/5.3/layout/grid/ 內容不用全讀,只要讀到你覺得能夠做出作業即可。 # 第2課 作業 請打開美國時代雜誌網站首頁 http://time.com 接著打開 Glitch,用 Glitch 來寫這次的作業。 https://glitch.com/ 你應該會在時代雜誌首頁看到這樣的畫面 ![](https://i.imgur.com/cPqz09D.jpg) 這次作業要做藍色線條圈起來的部份。 請利用 Bootstrap 的網格系統,把藍色這部份做出來。 有以下2個條件需要滿足,才算是做完作業: - 在電腦上是 1-2-1 比例的多欄式佈局 - 在手機上是上下堆疊的佈局 除此之外,只要有放入文字就可以了,圖片可以省略。 做完之後,你應該會發現,你做的網頁在手機或電腦螢幕上看都 OK,畫面不會破掉、跑版。 完成這些,你就完成這次的課程目標了!
大家好,有沒有想學寫網站的朋友呢? 隨著智慧型手機的普及,現在的網站畫面必須同時滿足電腦、手機螢幕,甚至是平板電腦的需求。 要如何做出能在各種寬度的螢幕都 OK 的網頁呢? 聰明的設計師們發明了一種稱為「Responsive Web Design」的畫面設計方法。 實作起來非常簡單,利用一些簡單的畫面分割原理,就能滿足各螢幕的需求。 我整理了一份有趣的 RWD 自學教材,每堂課附有一個小作業。 會帶領大家在作業中,以美國時代雜誌的網站為範例,一步一步利用 Bootstrap 做出一個 RWD 網頁。 剛入門網頁設計的朋友,非常適合接著把 RWD 原理學起來! 開始之前,您需要先具備基本的 HTML、CSS、Bootstrap 知識。 還不會的朋友,請先完成: - [自學網頁の嬰兒教材:HTML與CSS](https://codelove.tw/@howtomakeaturn/course/Ja6JaO) - [自學網頁の嬰兒教材:Bootstrap](https://codelove.tw/@howtomakeaturn/course/YqZQav) 準備好的話,讓我們馬上開始吧!
# 第7課 課程目標 學會使用 bootstrap 視窗元件。學會在毫無指引的情況下,自己想辦法解決問題。 # 第7課 課程內容 終於來到最後一課囉。相信你有發現,目前為止其實只用到了 bootstrap 全部功能的一小部份。 其實 bootstrap 還有很多元件與功能,這一課要請大家試著自己去探索、自行學習。 請大家試著使用視窗元件。 比較特別的是,這一課沒有任何指引,請試著使用 google 自己找資源學習。 關鍵字:bootstrap modal # 第7課 作業 請打開你的 facebook,在你要撰寫貼文的時候,你會看到一個視窗跳出來。 這一課作業要實作這個視窗。 請實作一個「撰寫貼文」按鈕,點擊之後顯示這個撰寫貼文視窗。 注意:Facebook 這個撰寫貼文視窗的內容有很多功能,請至少實作出: - 能夠打字的區塊 - 選擇誰可以看到這則貼文的選單 - 發佈按鈕 完成之後,您已經能夠獨自使用 bootstrap 做出有基本質感的網頁設計。
# 第6課 課程目標 學會如何套用 bootstrap 的表格、表單與與按鈕樣式。 # 第6課 課程內容 表格、表單與按鈕是網頁最基本的元素之一,就算不使用 bootstrap,html 原生就有這些元素的樣式。 不過,套用 bootstrap 樣式之後,會馬上讓這些元素好看起來,這一課要學習如何套用它們。 請閱讀入門教學: https://www.w3schools.com/bootstrap5/bootstrap_tables.php https://www.w3schools.com/bootstrap5/bootstrap_forms.php https://www.w3schools.com/bootstrap5/bootstrap_buttons.php 並參考官方說明文件: https://getbootstrap.com/docs/5.3/content/tables/ https://getbootstrap.com/docs/5.3/forms/overview/ https://getbootstrap.com/docs/5.3/components/buttons/ # 第6課 作業 這一課的作業有兩個,我們先不使用 bootstrap,把畫面做出來,接著再套用 bootstrap,讓畫面變漂亮。 作業一:請將「自學網頁の嬰兒教材:HTML與CSS」的第四課作業完成,並接著將 bootstrap table 套用進去 https://codelove.tw/@howtomakeaturn/post/l3j253 作業二:請將「自學網頁の嬰兒教材:HTML與CSS」的第五課作業完成,並接著將 bootstrap form、input 與 button 套用進去 https://codelove.tw/@howtomakeaturn/post/vx8Lgx 完成這些,你就完成這次的課程目標了!
# 第5課 課程目標 學會使用 Bootstrap 的訊息框框元件。 # 第5課 課程內容 訊息框框在所有網站都會有,在需要顯示歡迎訊息、提醒訊息、公告事項等等的時候,都可以使用。 這一課要學習使用它。 請閱讀入門教學: https://www.w3schools.com/bootstrap5/bootstrap_alerts.php 以及官方說明文件: https://getbootstrap.com/docs/5.3/components/alerts/ # 第5課 作業 這一課的作業要延續第3課的作業一。 在第3課的作業一中,我們做出了 Yahoo 新聞頁的排版。 假設你是發佈新聞的平台,你希望顯示訊息歡迎使用者,並且顯示訊息提醒讀者內容是由合作的媒體發佈,新聞平台不對內容負責任。 請在這個新聞頁面加上兩個 alert 元件。 第一個 alert 元件使用 alert-info 樣式,內含歡迎訊息,並且這個 alert 要可以點擊 × 關閉。 第二個 alert 元件使用 alert-warning 樣式,內含免除責任聲明,這個 alert 無法點擊 × 關閉,會一直顯示在那裡。 注意:這一課作業是以練習為主,實際上 Yahoo 新聞頁面並沒有這些東西。 完成這些,你就完成這次的課程目標了!
# 第4課 課程目標 學會使用 Bootstrap 的卡片元件。 # 第4課 課程內容 卡片式設計近幾年非常流行,在各大網站中都看得到它。 它的功能非常通用,可以在各種場景中使用,這一課要學習使用它。 請閱讀入門教學: https://www.w3schools.com/bootstrap5/bootstrap_cards.php 以及官方說明文件: https://getbootstrap.com/docs/5.3/components/card/ 內容不用全部讀完,也不用全部讀懂,能做出基本的卡片設計即可。 # 第4課 作業 這一課的作業要延續第3課的作業二。 在上一次的作業中,我們做出了整個 Yahoo 新聞首頁的排版,不過各區塊的內容都簡化了。 我們這一次要把內容補上,讓畫面變豐富。 請利用本課學到的卡片元件,在畫面中所有看起來像卡片的地方,全部套用卡片元件,讓卡片元件內有圖片、文字。 做完之後,整個畫面看起來會更接近真正的 Yahoo 新聞首頁。 注意:實際上 Yahoo 新聞首頁的卡片元件不多,幾乎都不是卡片元件(比如說根本沒有邊框)。 這一課作業是以練習為主,把看起來能套用卡片的地方套用就好,套不進去的地方維持原本的陽春即可。或是到處都套用卡片元件也沒關係,看起來類似原本的 Yahoo 新聞首頁即可。 完成這些,你就完成這次的課程目標了!
# 第3課 課程目標 能夠用 Bootstrap 的網格系統做出多欄式排版、各種排版。 # 第3課 課程內容 業界工程師會去使用 Bootstrap,除了美感之外,通常還有一大理由就是想用它的網格系統。 以網頁設計常見的多欄式設計來說,手寫 html 跟 css 實在有點麻煩: [CSS DIV 兩欄式網頁排版](http://www.wibibi.com/info.php?tid=406) [CSS DIV 三欄式網頁排版設計](http://www.wibibi.com/info.php?tid=407) 所以來學習簡單好用的網格系統吧! 請閱讀以下教學的內容: https://www.w3schools.com/bootstrap5/bootstrap_grid_basic.php https://www.w3schools.com/bootstrap5/bootstrap_grid_system.php https://www.w3schools.com/bootstrap5/bootstrap_grid_examples.php https://getbootstrap.com/docs/5.3/layout/grid/ 內容不用全部讀完,也不用全部讀懂,把其中的程式碼貼一貼,把玩一下,能做出基本的多欄式網頁佈局即可。 # 第3課 作業 繼續承接之前的作業。我們在前幾課做出了 Yahoo 的新聞頁以及導覽列,這一課的作業有兩個。 ## 作業一 請繼續修改之前的作業,除了新聞內容與導覽列之外,請接著利用 Bootstrap 網格系統將整個頁面都做出來。 請至少將側邊推薦其他新聞的區塊做出來,其餘的可以省略。 ## 作業二 請再開一份 Glitch 專案,我們要做 Yahoo 新聞的首頁: https://tw.news.yahoo.com 我們要用 Yahoo 新聞首頁來練習多欄式排版。 請利用 Bootstrap 網格系統,將整個首頁的排版都切出來。 各個區塊的內容盡量省略、簡化,利用純文字或是 `<ul>、<li>` 清單元素,只放標題跟一些文字即可。 完成以上兩份作業,你就完成這次的課程目標了!
# 第2課 課程目標 學會使用 Bootstrap 的 Navbar 元件。 # 第2課 課程內容 本課內容非常非常簡單,只要能在網頁上做出導覽列就可以了。 請參考: https://www.w3schools.com/bootstrap5/bootstrap_navbar.php https://getbootstrap.com/docs/5.3/components/navbar/ 內容不用全部讀完,也不用全部讀懂,把其中的程式碼貼一貼,把玩一下,能做出一個最簡單的導覽列即可。 # 第2課 作業 上一課的作業,我們模仿 Yahoo 新聞的內容,做了一個簡單的新聞文章頁面。 請繼續修改這份作業,將 Yahoo 新聞上方的導覽列做出來。 你將會發現,使用 Bootstrap 能夠快速做出導覽列,比自己用手寫 html、css 方便且快速多了! 完成這些,你就完成這次的課程目標了!
# 第1課 課程目標 學會安裝 Bootstrap。 # 第1課 課程內容 第一課只要學會如何安裝 Bootstrap 就可以了。 Bootstrap 安裝好之後,瀏覽器預設的 h1, h2, h3, p 等等基本元素的樣式就會被覆蓋。 會變成 Bootstrap 的預設樣式,會更漂亮。 在網頁中引入 Bootstrap 的 css 與 js 檔的方式有很多,其中最簡單的是直接引入 BootstrapCDN 的線上檔案,連下載檔案都不用。 請閱讀一些 Bootstrap 基本觀念: https://www.w3schools.com/bootstrap5/bootstrap_get_started.php https://www.w3schools.com/bootstrap5/bootstrap_typography.php 然後參考官網的 BootstrapCDN 段落: https://getbootstrap.com/docs/5.3/getting-started/download/ --- 對於引入外部檔案的觀念不熟悉的話,請參考這份的「External Style Sheet」段落: https://www.w3schools.com/css/css_howto.asp 以及這份的「JavaScript in External File」段落: https://www.tutorialspoint.com/javascript/javascript_placement.htm # 第1課 作業 請打開:[Yahoo奇摩新聞](https://tw.news.yahoo.com) 找一篇你喜歡的新聞,把新聞內容打出來。 接著打開 [Glitch](https://glitch.com/),用 Glitch 來寫這次的作業。 只要打出文章標題與內容就好,上方的導覽列、旁邊的新聞頭條那些區塊都不用。 做完之後,你會發現,雖然只用了 h1、p、br 等等基本元素,但是套用 Bootstrap 之後,整個畫面自動變漂亮了! 完成這些,你就完成這次的課程目標了!
大家好,有沒有想學寫網站的朋友呢? 坊間大部份的網頁入門課程,在教完基本的 html 與 css 之後,接著就會教 [Bootstrap](http://getbootstrap.com) 這個工具包。 究竟 Bootstrap 是什麼呢? 其實它只是一個寫網頁的懶人工具包,幫助你美化頁面的設計感,並且提供你網頁設計常用的一些元件。 聽再多介紹,不如親自動手實作! 我整理了一份有趣的 Bootstrap 自學教材,每堂課附有一個小作業。 會帶領大家在作業中,以新聞媒體的網站為範例,一步一步利用 Bootstrap 把網頁打造出來。 剛開始入門網頁設計的朋友,很適合接著來學習 Bootstrap 喔! 您只要具備基本的HTML與CSS基本知識就可以了 (還不會的朋友,請先完成自學網頁の嬰兒教材:HTML與CSS) https://codelove.tw/@howtomakeaturn/course/Ja6JaO 歡迎您試試看這份教材!
網路上免費的 React 版型資源不太好找,最好有一份懶人包。 這份列表整理了各式各樣的模板與主題套件,希望對您有幫助。 - 原文出處:https://dev.to/davidepacilio/35-free-react-templates-and-themes-32ci --- ##1. Open ![](https://dev-to-uploads.s3.amazonaws.com/i/gy9nddokri1vobwrtbna.jpg) [**Live demo**](https://open.cruip.com/) / [**Download**](https://github.com/cruip/open-react-template) Open 是一個免費的 React 模板,專為開源專案、線上服務、數位產品,創建快速、專業的登陸頁面而生。為了吸引潛在客戶和電子郵件訂閱者,Open 提供了一個多功能的資源庫,其中包含時尚、簡約和可重複使用的元件和元素。 --- ##2. Atomize ![](https://dev-to-uploads.s3.amazonaws.com/i/ks2st96gb0tbu1ybuy6k.jpg) [**Live demo**](https://atomizecode.com/) / [**Download**](https://github.com/proksh/atomize) Atomize 是一個 React UI 框架,旨在幫助開發人員與設計師合作,輕鬆構建一致和諧的用戶界面。由於樣式指南和靈活網格等資源的完美結合,Atomize 適合建立任何類型的響應式網站。 --- ##3. Treact ![](https://dev-to-uploads.s3.amazonaws.com/i/3aw9a273jibs97o2l09m.jpg) [**Live demo**](https://treact.owaiskhan.me/) / [**Download**](https://gumroad.com/l/QaruQ) Treact 是使用 TailwindCSS 作為前端框架開發的現代 React 模板和 UI 組件展示庫。這個精美的檔案庫提供了 7 個內建的主頁、8 個輔助頁面以及 52 個預先設計的元素和段落。每個內容都可以針對家用電腦、平板電腦和移動設備進行擴充。 --- ##4. MatX ![](https://dev-to-uploads.s3.amazonaws.com/i/q99tvy2uvyvol2xet2et.jpg) [**Live demo**](http://matx-react.ui-lib.com/dashboard/analytics) / [**Download**](https://ui-lib.com/downloads/matx-react-dashboard/) MatX 是一個建立在 Material Design 之上的精美 React Native 模板。此模板使用 React、Redux 和 Material UI,它包含為 Web 應用程式提供新造型可能需要的所有基本功能。 MatX 的免費版本可用於輕鬆設置管理面板、用戶管理系統和專案管理系統。 --- ##5. Holly ![](https://dev-to-uploads.s3.amazonaws.com/i/dcrv1qxgo3rgq9a3j3at.jpg) [**Live demo**](https://lukemcdonald.github.io/holly-react/) / [**Download**](https://github.com/lukemcdonald/holly-react) Holly 是一個響應式 React JS 模板,適用於線上服務和數位產品的生產者,能在主要產品仍在開發中時,就開始搜集電子郵件地址。這個模板最初是由 [Cruip](https://cruip.com/) 用 HTML 設計的,然後在這個版本中用 React 撰寫。 --- ##6. OAH-Admin ![](https://dev-to-uploads.s3.amazonaws.com/i/rteeixluj4n09a3s69ma.jpg) [**Live demo**](https://oah-admin.ahmedelywa.com/extra-components/progress/) / [**Download**](https://github.com/AhmedElywa/oah-admin) OAH-Admin 是一個基於 Gatsby 的免費 React 管理儀表板模板,帶有 oah-ui 元件和元素包。這個 React 模板有良好的 UI 元件色調,超級整潔和靈活的格式使任何人都可以輕鬆建立 SaaS 應用程式、管理面板、儀表板。 --- ##7. Gatsby Starter Ghost ![](https://dev-to-uploads.s3.amazonaws.com/i/ocey043yzsdt31f7yi9s.jpg) [**Live demo**](https://gatsby.ghost.org/) / [**Download**](https://github.com/TryGhost/gatsby-starter-ghost) 使用 Ghost 這個基於 Gatsby 的入門模板,輕鬆建立高效能網站。Gatsby Starter Ghost 是一個乾淨而現代的模板,適用於部落格、雜誌或任何新聞網站。該產品專門設計來幫助任何人在網路上建立個人空間並分享想法、創意和更新。 --- ##8. Star Admin ![](https://dev-to-uploads.s3.amazonaws.com/i/hlbf4y4pl4a5od2c8chb.jpg) [**Live demo**](https://www.bootstrapdash.com/demo/star-admin-free/react/template/demo_1/preview/dashboard) / [**Download**](https://github.com/BootstrapDash/StarAdmin-Free-React-Admin-Template) 一個免費的 React Native 模板,提供了無窮無盡的各種基本元素,可以將任何想法變為現實。該模板具有精心製作的儀表板,包含大量整齊排列和組織的元件,它可以完美地與所有最新和現代的瀏覽器配合使用,並且能夠使資料可視化過程更易於管理。 --- ##9. Carolina Admin Dashboard ![](https://dev-to-uploads.s3.amazonaws.com/i/05r7fsc1jzylez5diu6f.jpg) [**Live demo**](https://demo.uifort.com/carolina-react-admin-dashboard-material-ui-free-demo/LandingPage) / [**Download**](https://uifort.com/template/carolina-react-admin-dashboard-material-ui-free/) 如果您正在尋找一個令人驚嘆且實用的 React 儀表板模板,Carolina Admin Dashboard 擁有啟動和運行您 Web 專案所需的一切。這個漂亮的模板建立在 Material-UI 框架之上,採用乾淨清新的設計,遵循所有 Google 的 Material Design 指南。此外,核心結構是完全響應式和開源的。 --- ##10. Tabler ![](https://dev-to-uploads.s3.amazonaws.com/i/nu5vq6j5buk36iz8prsn.jpg) [**Live demo**](http://tabler-react.com/) / [**Download**](https://github.com/tabler/tabler-react) Tabler 是一個免費的 React 管理儀表板模板,非常適合任何類型的後端 Web 應用。此管理模板包含大量精心設計的範例,無需從頭開始,可為您節省大量時間,它還附帶可重複使用的元件,例如按鈕、地圖、圖表、表單等。 --- ##11. React Nice Resume ![](https://dev-to-uploads.s3.amazonaws.com/i/ci5hhvp6ki5o3mpk8zbz.jpg) [**Live demo**](https://nordicgiant2.github.io/react-nice-resume-page/#home) / [**Download**](https://github.com/nordicgiant2/react-nice-resume) React Nice Resume 是一個漂亮的主題,如果您是開發人員、設計師或一般的數位創作者,可以用來宣傳您自己和您的作品。該資源展示了一個獨特的主頁,帶有粒子背景、工作經驗時間線、技能圖表、顯示最新專案的縮略圖、一個帶有功能輸入表單的段落。 --- ##12. Boss Lite ![](https://dev-to-uploads.s3.amazonaws.com/i/zq92otm0bc9t3mwinkxb.jpg) [**Live demo**](http://boss.ux-maestro.com/app/tables/data-table) / [**Download**](https://github.com/ilhammeidi/boss-lite) Boss Lite 是一個基於 React 和 Redux 的管理儀表板模板。此模板為您帶來清新現代的設計和多種配色方案。它支援大多類型的 Web 專案,並且 Flexbox 佈局而變得很流暢。 --- ##13. Chakra UI ![](https://dev-to-uploads.s3.amazonaws.com/i/poootemj2t5caoi4lryt.jpg) [**Live demo**](https://chakra-ui.com/) / [**Download**](https://github.com/chakra-ui/chakra-ui/) Chakra UI 提供了一組好用、可重用的 React 功能元件,使建立好用網站和用戶界面變得非常簡單。 Chakra UI 中的幾乎所有元素都兼容深色模式,它們遵循 WAI-ARIA 指南規範,並構建在 React UI Primitive 之上以實現無限的可組合性。 --- ##14. Black Dashboard React ![](https://dev-to-uploads.s3.amazonaws.com/i/2r1tx4uxug6k1xlnr3pr.jpg) [**Live demo**](https://demos.creative-tim.com/black-dashboard-react/#/admin/dashboard) / [**Download**](https://www.creative-tim.com/product/black-dashboard-react) Black Dashboard React 是用於管理界面的 React 模板。該模板基於 Bootstrap 建立的設計指南,是基於企業的應用程式,是強大後端軟體可用的優秀前端選項。它具有更高等級的切分、設計套件、可重複使用的圖表,能夠不斷改善用戶和開發體驗。 --- ##15. Argon Design System ![](https://dev-to-uploads.s3.amazonaws.com/i/tvrfqzddf6kwmhiwje6x.jpg) [**Live demo**](https://demos.creative-tim.com/argon-design-system-react/) / [**Download**](https://github.com/creativetimofficial/argon-design-system-react) 使用 Bootstrap 4 和 Reactstrap 的 React 設計系統。Argon Design System 帶有 100 多個單獨的元件、內建的範例,並且每個元素都有多種樣式、懸停、焦點狀態,任何人都可以輕鬆使用。該產品是從原型設計到正式上線的完美解決方案。 --- ##16. Devias Kit - Admin Dashboard ![](https://dev-to-uploads.s3.amazonaws.com/i/j7lqqfvgmujtgg1m80oi.jpg) [**Live demo**](https://react-material-dashboard.devias.io/dashboard) / [**Download**](https://github.com/devias-io/react-material-dashboard) Devias Kit 是一個響應式 Material Design 管理儀表板,專為 React 使用 Google 自己的 Material Design 框架建立。可以自定義設置、指令、圖標和樣式。該模板包含清晰直觀的目錄和文件、快速入門文件,如果您想對設計進行任何更改,甚至還有 Sketch 文件。 --- ##17. Dev Blog ![](https://dev-to-uploads.s3.amazonaws.com/i/1tym4ekzrftd6ldcflid.jpg) [**Live demo**](https://ryanfitzgerald.github.io/devblog/) / [**Download**](https://github.com/RyanFitzgerald/devblog) Dev Blog 是一個 React 網站模板,專為快速建立副專案和產品而生。該網站模板帶有一個首頁,其中顯示了部落格名稱、社交媒體圖示以及帶有文字和圖像的文章縮圖。該模板還包括單個文章頁面,有漂亮且精心策劃的排版。 --- ##18. Material PRO ![](https://dev-to-uploads.s3.amazonaws.com/i/scakf4swq5j99hln1xqx.jpg) [**Live demo**](https://wrappixel.com/demos/free-admin-templates/materialpro-reactadmin-lite/main/#/starter/starter) / [**Download**](https://www.wrappixel.com/templates/materialpro-react-admin-lite/) Material Pro 是一個免費的 React Native 模板,為任何需要管理儀表板的人精心製作。這個漂亮而清爽的產品採用模組化和現代設計理念開發,100% 免費使用和下載,並包含許多頁面,可幫助您更快、更輕鬆地建立專案。 --- ##19. Ant Design Landing ![](https://dev-to-uploads.s3.amazonaws.com/i/wnld469wyg4u9pfk31i1.jpg) [**Live demo**](https://landing.ant.design/) / [**Download**](https://github.com/ant-design/ant-design-landing) Landing 是 Ant Design System 建立的模板。內涵不同樣式的首頁和內頁模組。 --- ##20. Isomorphic ![](https://dev-to-uploads.s3.amazonaws.com/i/zy0at5stk267a06n5f95.jpg) [**Live demo**](https://isomorphic.redq.io/dashboard) / [**Download**](https://github.com/pujoey/ismorphic) Isomorphic 是一個易於管理且有吸引力的管理模板,具有大量靈活的元件。 --- ##21. Shards Dashboard Lite ![](https://dev-to-uploads.s3.amazonaws.com/i/71cn55agi3k9er11xk4o.jpg) [**Live demo**](https://designrevision.com/demo/shards-dashboard-lite-react/blog-overview) / [**Download**](https://designrevision.com/downloads/shards-dashboard-lite-react/) Shards 是一個免費的 React 儀表板模板,具有現代設計系統和許多自定義頁面和部分。 --- ##22. uiw ![](https://dev-to-uploads.s3.amazonaws.com/i/e6aakqf9m9g67mstwvi9.jpg) [**Live demo**](https://uiwjs.github.io/) / [**Download**](https://github.com/uiwjs/uiw) uiw 是用於 React 16+ 的高質量 React 元件庫和 UI 工具包。 --- ##23. React Material Admin ![](https://dev-to-uploads.s3.amazonaws.com/i/te6tezfjcp008lb4q7du.jpg) [**Live demo**](https://flatlogic.github.io/react-material-admin/#/login) / [**Download**](https://flatlogic.com/templates/react-material-admin) React Material Admin 是一個建立在 Material-UI 框架之上的 React 儀表板。 --- ##24. Material KIT React ![](https://dev-to-uploads.s3.amazonaws.com/i/cq2xlu4tci8km6p2tia7.jpg) [**Live demo**](https://demos.creative-tim.com/material-kit-react/) / [**Download**](https://www.creative-tim.com/product/material-kit-react) Material UI KIT 是一款免費的 React UI 主題,其設計靈感來自 Google 的 Material Design,設計清新整潔。 --- ##25. Airframe ![](https://dev-to-uploads.s3.amazonaws.com/i/qwt4nv73xjn14a9g09yl.jpg) [**Live demo**](http://dashboards.webkom.co/react/airframe/dashboards/projects/) / [**Download**](https://github.com/0wczar/airframe-react) Airframe 是一個基於 Bootstrap 4 和 React 16 的免費開源 React 應用程式模板。 --- ##26. Gatsby Simplefolio ![](https://dev-to-uploads.s3.amazonaws.com/i/pe3clc53zqsntgh3vw3n.jpg) [**Live demo**](https://gatsby-simplefolio.netlify.app/) / [**Download**](https://github.com/cobidev/gatsby-simplefolio) Gatsby Simplefolio 是一個乾淨、美觀且響應迅速的 React 組合模板。 --- ##27. Ant Design Pro ![](https://dev-to-uploads.s3.amazonaws.com/i/diktnddjjf630tdyyqa8.jpg) [**Live demo**](https://pro.ant.design/) / [**Download**](https://github.com/ant-design/ant-design-pro/) React --- ##28. React SaaS Template ![](https://dev-to-uploads.s3.amazonaws.com/i/yiq5ast9jw3knt8l92l0.jpg) [**Live demo**](https://reactsaastemplate.com/) / [**Download**](https://github.com/dunky11/react-saas-template) --- ##29. Shards React ![](https://dev-to-uploads.s3.amazonaws.com/i/34zfg3e4qbbzklmgr4uh.jpg) [**Live demo**](https://designrevision.com/downloads/shards-react/) / [**Download**](https://github.com/designrevision/shards-react) --- ##30. Base Web ![](https://dev-to-uploads.s3.amazonaws.com/i/8q3bxpsll7k0qrhzdlmj.jpg) [**Live demo**](https://baseweb.design/) / [**Download**](https://github.com/uber/baseweb) --- ##31. Light Blue React Dashboard ![](https://dev-to-uploads.s3.amazonaws.com/i/tfwzjgvh2sa8e5v9a0oa.jpg) [**Live demo**](https://demo.flatlogic.com/light-blue-react/#/app/main/dashboard) / [**Download**](https://github.com/flatlogic/light-blue-react-template) --- ##32. React JS Landing ![](https://dev-to-uploads.s3.amazonaws.com/i/ibuom994cxj3pzb2yzoz.jpg) [**Live demo**](https://react-landing-page-template.herokuapp.com/#page-top) / [**Download**](https://github.com/IssaafKattan/React-Landing-Page-Template) --- ##33. Admin Pro ![](https://dev-to-uploads.s3.amazonaws.com/i/0f1pjehgesa25ts39wx7.jpg) [**Live demo**](https://wrappixel.com/demos/free-admin-templates/adminpro-react-lite/main/#/dashboard) / [**Download**](https://www.wrappixel.com/templates/adminpro-react-admin-lite/#comparison) --- ##34. Blueprint ![](https://dev-to-uploads.s3.amazonaws.com/i/d1owpo8lfg3zfq1p2vpx.jpg) [**Live demo**](https://blueprintjs.com/) / [**Download**](https://github.com/palantir/blueprint) --- ##35. Datta ![](https://dev-to-uploads.s3.amazonaws.com/i/3con3tndvc7au5zg1jb0.jpg) [**Live demo**](http://lite.codedthemes.com/datta-able/react/default/dashboard/default) / [**Download**](https://codedthemes.com/item/datta-able-react-free-admin-template/) --- ##36. Flatlogic One ![](https://dev-to-uploads.s3.amazonaws.com/i/63flhvqcbh7jtfvih9do.jpg) [**Live demo**](https://flatlogic.github.io/one-react-template/#/login) / [**Download**](https://flatlogic.com/templates/one-free-react-template) --- ##結論 我希望這組免費的 React 模板和主題能夠幫助您!
身為網站工程師,很多時候需要查詢語法、關鍵字之類的東西! 這邊整理了多份超方便的 cheatsheet 給您使用! - 原文出處:https://dev.to/suprabhasupi/cheatsheet-for-web-developers-1opg # 1️⃣ HTML Cheatsheet 線上互動式 HTML 備忘單,包含範例程式碼以及各種 web 開發人員工具、生成器。 - https://htmlcheatsheet.com/ # 2️⃣ CSS Reference 有條理、好吸收的 Web 教學網站,包含大量 HTML、CSS、JavaScript、SQL、Python、PHP、Bootstrap、Java 等等的範例程式碼。 - https://cssreference.io/ # 3️⃣ Git Sheet 包含最重要和最常用的 Git 指令,參考起來很方便 - https://gitsheet.wtf/ # 4️⃣ OverAPI OverAPI.com 是一個收集所有備忘單的網站,有超多 cheatsheets 可以參考! - https://overapi.com/ # 5️⃣ Dev Hints 整理很多優質的 ES6、SASS 等等備忘單,方便查詢 - https://devhints.io/ # 6️⃣ Cheatography Cheatography 整理 5047 個備忘單和 25 種程式語言,有超多內容可以逛逛看! - https://cheatography.com/
你的轉職路上,還缺少一份自學作業包!寫完這幾包,直接拿作品去面試上班!
本論壇另有附設一個 LINE 新手發問&交流群組!歡迎加入討論!