透過實作專案完成 Bootstrap 和 React 訓練營

通學習使用 Bootstrap 和 React 建立響應式、互動式 Web 應用程式。

從這 13 小時的課程,你會學到

  • 學習 Bootstrap 網格系統
  • 學習使用 Bootstrap 三列佈局
  • 學習建立 Bootstrap 導航元件
  • 學習使用 Bootstrap 設定圖像樣式
  • 使用 Bootstrap 建立高級響應式選單
  • 使用 Bootstrap 主題建立令人驚嘆的佈局
  • 學習 React 的基礎
  • 在 React 中使用 JSX 和功能元件
  • 在 React 中建立一個計算器
  • 學習 React State Hook
  • 調試 React 專案
  • 學習設計 React 元件的樣式
  • 使用 AI 建立單人和多人 Connect-4 克隆
  • 學習 React 生命週期事件
  • 學習 React 條件渲染
  • 在 React 中建立完全自訂的電子商務網站
  • 了解 JSON 伺服器的基礎
  • 使用 React Router

要求

  • 無需程式設計經驗。你將學到你需要知道的一切。
  • 基本的電腦技能。
  • HTML 與 CSS 基礎知識

課程說明

歡迎來到完整的 Bootstrap 和 React 訓練營。本課程教導學生如何使用 Bootstrap 框架和 React JavaScript 程式庫建立現代的互動式網頁。本課程首先介紹 Bootstrap,重點介紹其在開發社群中作為行動優先前端 Web 框架首選的聲譽。 Bootstrap 是用 HTML、CSS 和 JavaScript 編寫的可重複使用程式碼的詳細記錄集合。我們首先探索 Bootstrap 的基礎,包括將其嵌入到專案中,並建立​​基本的 Bootstrap 頁面結構。從那裡我們進入了惡名昭彰的 Bootstrap 網格系統,以及常用的三欄網頁版面。在介紹性主題之後,學生將學習如何使用從版式、表格和圖像樣式到井、警報和按鈕的許多組件。作為課程的一部分,我們示範如何使用下拉式選單、折疊式選單、手風琴摺疊選單和藥丸選單建立複雜的導航選單。我們還將介紹表單樣式、輪播、模態、滾動間諜以及幾乎所有其他對你作為前端開發人員的旅程有幫助的 Bootstrap 元件。這個模組以一個實踐專案結束,學生將使用 Bootstrap 主題從頭開始建立一個令人驚嘆的網頁。

在課程的第二部分中,我們將探討 React。 React,也稱為 React JS,是一個功能強大的 JavaScript 程式庫,用於使用 UI 元件建立自訂的互動式使用者介面。與 Bootstrap 類似,React 是一個文檔齊全的免費開源程式庫( library )。該專案由 Meta 和獨立開發者網路創建。在本節中,學生透過一系列實作專案學習如何使用 React library。本課程的 React 部分從一個實作專案開始,你將學習如何使用功能性 React 元件、道具、回調函數( Callback functions )、OnClick 事件和 React State 掛鉤來建立功能齊全的計算器。從那裡我們將深入研究第二個專案,你將在其中建立一個 connect-4 克隆。在這裡,我們將介紹更多中間概念,包括傳遞 props、解構、向單擊事件傳遞參數、各種樣式方法和處理回調。你還將了解 React 鍵屬性、React 生命週期事件和條件渲染。最後,你將建立一個完整的具有內建 AI 功能的多人和單人 connect-4 遊戲板。

在課程的最後部分,我們透過建立一個包含多個產品類別、產品展示、購物車功能等的完整電子商務網站來進一步釋放 React 的強大功能。在這裡,我們介紹了一些完整的新概念,包括:JSON 伺服器、Fetch API 和安裝 React 路由器。這些基本構建塊將用於呈現產品類別、設定產品清單樣式以及配置產品詳細資訊頁面。從那裡我們深入研究樣式元件,重構商店佈局,並探索 React 中的「上下文」概念。在專案的最後階段,學生將配置購物車籃和結帳功能。我們還將實現產品搜尋功能,然後深入練習在 React 中驗證輸入表單。

正如你所看到的,本課程涵蓋了很多內容。最重要的是,它的特色是 Tim Maclachlan——一位著名的高級全端開發人員,擁有 20 多年的商業開發經驗。作為一名多才多藝的開發人員,Tim 專注於演算法、分析和行動開發。迄今為止,他已經編寫了數百份申請,並在商業航空和軍事、銀行和金融等多個行業工作。 Tim 教導他人如何成為更好的程式設計師充滿熱情,並期待與他的學生互動。

話雖如此,我們希望你和我們一樣對本課程感到興奮,如果是的話 – 點擊滾動按鈕,讓我們開始吧。

目標受眾

  • 對使用 Bootstrap 建立行動響應式網站有興趣的學生
  • 對Web前端開發有興趣的學生
  • 有興趣學習 React 的同學
  • 對使用 React library 建立 UI 元件感興趣的學生

講師簡介

YouAccel Training 超過 800 萬名註冊人數,超過 7 萬則評論。立即註冊

YouAccel 成立於 2015 年,其使命是成為網路上最具互動性的電子學習平台之一。 YouAccel 現在是線上培訓領域的領先供應商,為全球超過 200 萬名熱情的學習者提供服務。其中包括超過 600 萬的註冊人數,涵蓋 50 門暢銷課程。 YouAccel 提供跨多個行業的課程,從程式設計和 IT 到商業、行銷、設計和生產力。

YouAccel 提供的電子學習體驗是動態的。每門課程均以高清直播,並提供相應的作業、測驗和考試,並以電子方式進行評分。所有 YouAccel 課程均由經過認證的教育工作者教授,他們在所指導的領域擁有多年的工作經驗。這些課程可以按照自己的進度進行,並提供多個級別,包括初級、中級和高級。將體驗提升到一個新的個人化水平,所有註冊課程的學生都可以獲得免費支援。所有課程均附有結業證書,且沒有年齡限制。

YouAccel 堅信,線上學習的未來將是透過社區為基礎的開放性舉措,讓每個人的聲音都能得到平等的傾聽。這正是 YouAccel 努力實現的目標——一個包容性的環境,讓學生可以控制課程內容的方向。 YouAccel 課程根據學生和參與的社區成員的回饋而不斷更新。 YouAccel 講師鼓勵在學習過程的每一步進行溝通。迄今為止,全球數百名貢獻者投入了時間和資源,以確保 YouAccel 課程達到最高品質水準。 YouAccel 講師享譽世界,其中許多人曾在福布斯、Mashable、Entrepreneur 和 PBS 等主流出版物上發表專題報導。

字幕:英文

  • 想要了解如何將英文字幕自動翻譯成中文? 請參考這篇 How-To

  • Udemy 永久擁有課程 許多課程約 NT400(點擊連結看更多)
  • 年訂閱每月 NT350(再享特別優惠:年度訂閱首年享 25% 折扣) 🌈 悠遊 Udemy 的 26000+ 門課,最大化學習 ( 原價 NT635/月 )
  • Udemy 現在越來越多課程有中文字幕,請參考 Soft & Share 中文線上課程
  • 手機上點選優惠連結看到的價格比電腦上看到的貴
  • $代表當地貨幣, 如在台灣為 NT
  • 點選”報名參加課程”有可能因瀏覽器 cookies 轉久一點或回報錯誤而無法連上,請稍等刷新或重新點選就會出現

報名參加課程限時限量免費 Coupon Code

Sponsored by Udemy


也許你會有興趣

不受 FB 演算法影響,歡迎透過 e-mail 訂閱網站更新

發表迴響

這個網站採用 Akismet 服務減少垃圾留言。進一步了解 Akismet 如何處理網站訪客的留言資料

由 WordPress.com 建置.

Up ↑

探索更多來自 Soft & Share 的內容

立即訂閱即可持續閱讀,還能取得所有封存文章。

Continue reading