98%

Taker Wu – 網頁基礎15天

(6 customer reviews)

Original price was: $22,500.00.Current price is: $497.00.

Product Delivery – You will receive Content Access Via Email.
Email – [email protected]

Category:

Description

網頁基礎15天 Taker Wu – 網頁基礎15天

你的課程導師

Taker Wu

8 年 Senior 網頁工程師經驗,參與過公司接案、個人接案、產品設計、產品開發。

屬於「淺顯易懂」的講課風格,並快速建立完整的「觀念」
內容方面,提供業界真正有用的資訊與方法。

我們希望大家在課程後,真的可以應用、求職、工作、開發產品,而不只是一個「興趣」。希望可以幫助大家就業、轉職、能力提升、做產品、創業等,都能有所幫助。

課程內容

Intro / 課程使用手冊
  • 課程使用建議 (4:49)
  • 如何發問? (7:00)
  • 加入「學員討論區」社團
  • Medium / 紀錄學習歷程

Day 1 / HTML + CSS 基礎
  • 【HTML 講義下載】
  • HTML tags(標籤) (15:29)
  • HTML 的「命名」與「架構」 (16:39)
  • 【CSS 講義下載】
  • CSS selector(選擇器) (19:14)
  • CSS 屬性./ 排版 / display & position (21:30)
  • CSS 屬性 / 排版 / float (5:02)
  • CSS 屬性 / 細節 / box model (10:08)
  • CSS 屬性 / 細節 / background (7:59)
  • CSS 屬性 / 細節 / font & others (8:45)
  • CSS specificity / CSS 權重 (7:43)

Day 2 之前 / IDE【更新內容】
  • Intro
  • 什麼是 IDE? (7:10)
  • IDE 介面解說 (13:41)
  • 安裝 VS code 外掛 (extension) (5:40)
  • 美化自己的 VS code (7:33)
  • Coding 小技巧 (16:04)
  • 「autocomplete」自動幫你寫好多程式碼 (13:39)
  • 在 VS code 裡面做 git 版本控制 (12:50)

 

Day 2 / HTML 實戰
  • IDE / 寫程式的文字編輯器 (deprecated) (22:40)
  • Wireframe / 輕鬆分析網頁結構 (23:40)
  • 【HTML 練習 / 檔案下載】
  • 建立 HTML 架構 (7:36)
  • 假資料 / 測量 / navigation(導覽列) (12:01)
  • Hero section 與 產品分類 / HTML Special Characters (8:05)
  • 最新產品 / 假資料 (5:38)
  • CTA / events & featured 段落 (8:40)
  • Outlets 段落 / 可以撥打的電話號碼 (7:51)
  • Footer / 回到頂端 (4:46)
  • HTML 練習回顧 / 課後練習 (6:06)

Day 3 / CSS 實戰
  • 【CSS 練習 #1 / 檔案下載】
  • 加入 CSS 檔案 (12:15)
  • Container / 水平置中 #1 (6:08)
  • Navigation / 圖片的問題 / 垂直置中 (17:27)
  • clearfix (8:24)
  • Hero section & 產品分類 / Grid 的概念 (22:45)
  • 最新產品 / 細節調整 (21:33)
  • 最新產品 / 覆蓋文字 (18:30)
  • 【CSS 練習 #2 / 檔案下載】
  • event 段落 / background-image / 細節調整 (14:32)
  • featured 段落 (15:39)
  • featured 段落 / margin collapse (10:09)
  • outlets 段落 (6:54)
  • footer / 水平置中 #2 (15:50)
  • go top 回到頂端 (4:50)
  • CSS 回顧 (2:39)

Day 4 / 其他有的沒的但很重要的技術
  • 【檔案下載 #1】
  • favicon (6:54)
  • Web fonts / Google fonts (16:42)
  • 中文字型 (7:39)
  • icon fonts (28:46)
  • Font Awesome 更新 / 補充教材 (12:10)
  • Sprites 小圖示大集合 (15:04)
  • 【LESS CSS / 檔案下載】
  • LESS CSS (28:48)
  • 使用 LESS 改寫 (16:34)
  • CSS 的單位 (23:06)
  • 【Table & Form / 檔案下載】
  • Table (3:27)
  • Form (17:06)
  • Form 與後端的溝通 / name value pair (11:40)

Day 5 / About 頁面 / 實戰
  • 【練習 / 檔案下載】
  • Wireframe 分析 (6:29)
  • HTML 架構 (29:13)
  • CSS / header (17:20)
  • CSS / welcome message (12:35)
  • CSS / progress bar / CSS arrow (12:02)
  • CSS / feature 段落 / LESS 架構調整 (8:33)
  • CSS / feature 段落 / team 段落 (18:15)
  • CSS / counting 段落 / Clients 段落 (9:48)
  • CSS / footer (17:13)
  • CSS / 最後調整 / background 與 icon fonts (25:06)

Day 6 / Service 頁面 / Contact Us 頁面 / 實戰
  • 【練習 / 檔案下載】
  • Service / HTML (19:17)
  • Service / header (6:39)
  • Service / services (12:36)
  • Service / features (7:48)
  • Service / special services (21:31)
  • Service / pricing table (24:41)
  • Service / special offer (11:06)
  • Contact Us / HTML (19:26)
  • Contact Us / CSS (23:31)

課程回饋
  • 回饋量表

Day 7 / RWD 手機版網頁 / 概念
  • 【RWD design pattern / 講義下載】
  • RWD vs AWD (6:23)
  • 設計模式 / design patterns #1 / 常見的組合 (19:40)
  • 設計模式 / design patterns #2 / 特殊的畫面 (4:53)
  • 製作模式 / mobile first (6:26)
  • breakpoints (10:05)
  • 設計模式 / RWD navigations (4:46)
  • 【RWD 技術 / 講義下載】
  • RWD 技術 / media query / viewport (13:29)
  • RWD 技術 / CSS (13:28)
  • RWD 技術 / CSS 權重 (6:16)

Day 8 / RWD 手機版網頁 / 練習
  • 【練習 / 檔案下載】
  • Inspect element 的手機版測試工具 (5:48)
  • fluid 練習 (8:10)
  • column drop 練習 (13:44)
  • sidebar drop 練習 (9:18)
  • scale + column drop 練習 (9:20)
  • 可以直接使用的 off canvas plugins (6:49)
  • off canvas 實作 (24:43)
  • tiny tweaks (30:24)
  • mobile first 練習 (18:34)

Day 9 / Bootstrap 3 / layouts / 導讀 / 實戰
  • 【Bootstrap 3 / 講義下載】
  • Grid 網格系統(核心概念) (20:32)
  • Nav 導覽列 / Table / List (9:46)
  • Form 表單優化 (8:52)
  • Buttons 按鈕 (14:44)
  • Dropdown 下拉式選單 (9:30)
  • 有的沒的 / icons / typographic / breadcrumbs / label & badges / pagination / panel / progress bar (16:44)
  • Helper class (8:51)
  • 【實戰 / 檔案下載】
  • HTML 實戰 / 初始設定 (2:15)
  • HTML 實戰 / navigation (4:50)
  • HTML 實戰 / header / we cover the maximum (12:31)
  • HTML 實戰 / services we provide / other services (12:32)
  • HTML 實戰 / special services / why you choose our service / client speak for us (10:30)
  • HTML 實戰 / footer (11:04)

Day 10 / Bootstrap 3 / CSS 調整 / 實戰
  • 【實戰 / 檔案下載】
  • 初始設定 (1:44)
  • navigation (8:32)
  • header (13:57)
  • we cover the maximum (8:14)
  • services we provide (9:04)
  • other services (12:31)
  • special services (12:36)
  • why us (18:52)
  • footer (20:01)
  • footer bottom (13:30)
  • CSS 回顧 (2:14)
  • Bootstrap customize ( Bootstrap 3 only ) (14:33)

Day 11 / Bootstrap 3 / Components / 實用小工具 / 導讀
  • 【講義下載】
  • Carousel (21:06)
  • Tab (13:55)
  • Modal (24:09)
  • Alert (5:25)
  • Tooltips (10:13)
  • Popover (7:29)
  • Scrollspy (12:09)
  • Affix (15:05)

Before Day 12 / 課程之前 / 先學 Javascript 基礎
  • 【講義下載】
  • 程式的基礎:expressions 與 statements (8:50)
  • Operators 運算元 (6:01)
  • Variable / Type (6:12)
  • Block / Conditions / Loops (7:32)
  • Function / 請電腦幫你做的待辦清單 (10:28)
  • Object / Array (6:51)
  • Javascript 基礎 / 延伸閱讀

Day 12 / jQuery / 基礎
  • 【jQuery events / 講義下載】
  • jQuery 基礎寫法 / css / animate (17:04)
  • jQuery events / mouse 相關事件 (15:09)
  • jQuery events / keyboard 相關事件 (5:49)
  • jQuery events / form 相關事件 (5:54)
  • jQuery events / document.ready / on / off (7:56)
  • jQuery events / fire (4:25)
  • 【jQuery traversing & DOM manipulate / 講義下載】
  • jQuery traversing / 樹狀結構 / 尋找節點 / 爬樹 (19:46)
  • jQuery DOM manipulate / append / prepend / before / after (6:56)
  • jQuery DOM manipulate / html (2:29)
  • jQuery DOM manipulate / remove / empty / clone (3:54)
  • jQuery DOM manipulate / addClass / removeClass / toggleClass (1:56)
  • jQuery DOM manipulate / css (2:59)
  • jQuery DOM manipulate / prop / val (3:13)
  • jQuery DOM manipulate / data (3:28)
  • jQuery DOM manipulate / position / offset (6:49)

Day 13 / jQuery / 實戰練習
  • 【實戰 #1 / 講義下載】
  • go top 回到頂端 / 滾動效果 (22:27)
  • hover 效果 (15:36)
  • hover 顯示額外資訊 (10:31)
  • 滾動畫面 / 驅動 / 動畫效果 (16:49)
  • 【實戰 #2 / 講義下載】
  • Tabs (14:45)
  • Todo list (18:31)
  • Todo list + Handlebars (18:05)
  • Modal (7:34)
  • Lightbox (10:05)

Day 14 / AJAX / 前後端溝通的橋樑
  • 【AJAX 講義下載】
  • AJAX 的原理 / API 的形式 (15:59)
  • jQuery 的 AJAX 工具 / $.ajax / $.post / $.get (14:57)
  • 收到的資料型態 / HTML / JSON / JSONP (14:21)
  • 把資料寫入網頁 / data insertion (7:22)
  • SPA / single page application / 準備工作 (7:33)
  • SPA / single page application / 實作 (11:54)
  • SPA / single page application / 修正 (8:49)
  • Random User Generator / API 介紹 (4:23)
  • Random User Generator / 實作 (13:19)
  • Random User Generator / 一次顯示多位 User (8:01)
  • Todo list / 前後端的準備 (2:33)
  • Todo list / create API / AJAX call (12:36)
  • Todo list / update API / AJAX call (9:59)
  • Todo list / delete API / AJAX call (5:27)

Day 15 / CSS 3 動畫 / 活動網站的神兵利器
  • 【transition & animate / 講義下載】
  • transition 漸變 / animate 動畫效果 / 簡介 (5:18)
  • transition / 練習 / 狀態改變的觀念 (13:03)
  • transition / hover 效果 (1:43)
  • transition / 狀態改變的漸變效果 (9:36)
  • 狀態改變的討論 / 編輯模式(無特效) (5:07)
  • animation 基礎 (12:58)
  • 【transform / 講義下載】
  • 活動網站 / 架構 (7:43)
  • 活動網站 / 球的動態 (6:35)
  • 活動網站 / 移動的車子 (3:11)
  • 活動網站 / 亂數調整 (12:39)
  • transform 變形 / translate 移動 (17:01)
  • transform 變形 / rotate 旋轉 / scale 縮放 / skew 傾斜 (7:23)
  • transform 變形 / transform 3D / Z 軸 (5:23)
  • transform 變形 / transform origin / 變形起始點 (2:22)
  • transform 變形 / 活動網站 / + transform 效果 (4:15)

New Updates!! / 新增內容!!
  • Flexbox
  • Bootstrap 4

Next Step / 下一步
  • 延伸學習 / Bonus


Sale Page: https://bootcamp.15days.website/p/15days-full
Archive: https://web.archive.org/web/20201027035723/https://15days.website/join/15days

6 reviews for Taker Wu – 網頁基礎15天

  1. Nicholas Perez (verified owner)

    I learned more from this course than I expected. Fantastic!

  2. Nicole Ward (verified owner)

    I feel more prepared for my career after taking this course.

  3. Joseph Scott (verified owner)

    The instructor’s expertise is evident throughout the course.

  4. Samuel (verified owner)

    The course was well-paced and easy to follow.

  5. Matthew Thomas (verified owner)

    The course was very engaging and easy to follow.

  6. Ryan (verified owner)

    I enjoyed the hands-on approach to learning.

Add a review

Your email address will not be published. Required fields are marked *

There are no products