TibaMe
系統初始化失敗,請重新整理頁面
若持續無法載入頁面,請 聯絡客服

taker.wu

3天!動手寫網頁 (實戰系列)

NT$2,990
軟體開發網頁開發

HTML&CSS不難,只要有心人人都可以寫網頁。Taker老師讓你只要花三天的時間就能學會網頁架構並且實作出一個接案等級的網頁!

NT$2,990

目前尚無任何課程公告
講師將會在這發佈與課程相關的公告或是通知課程內容更新的公告。

最新討論

請問如何取消字幕(字幕遮到教學的畫面)
Rambo Yang · 2020/11/24 20:32
請問有講師上課內容電子檔嗎? 好像沒看到呢?
szarowana · 2019/02/25 13:49
box-sizing 設定失效問題
Jazz · 2018/05/31 09:38
系統問題反應給小編: 課程第8單元缺漏畫面問題
Jazz · 2018/05/30 23:08
系統問題反應給小編 : 課程字幕的誤植之一
Jazz · 2018/05/20 10:40
查看更多討論

課程資訊

default clock課程時長 8 小時 50 分
default video課程共 10 單元 59 小節
default download14 個可下載的 學習資源
icon_info_certificate提供完訓證書
default plan提供制定 學習計畫建議學習 4 週 (每週 2 小時)

適合對象

✔ 新手
✔ 想轉職的朋友
✔ 設計師
✔ Junior 網頁工程師

你可以學到

✔ 3天時間,打穩網頁基礎(HTML+CSS)
✔ 理解切版流程,看到設計圖就能規劃網頁架構
✔ 釐清常用的 CSS 概念及運作方式,讓你恍然大悟「喔喔原來是這樣子喔!!!」

課程介紹

3天學會網頁基礎?

許多人覺得不可能,我一開始也這麼覺得
像我們過來人,學習花了很多時間,才有紮實的基礎
甚至學很久基礎很差的人也比比皆是

會需要那麼久,是因為沒有人幫你把基礎整理好
真正常用的東西、這些東西的用法、觀念等,一次把他們說清楚
至少在我們那時候,是沒有這種東西的

在整理自己所得的知識,整理並不斷修正、更新之後
發現學生在學習後的第二天、第三天,都能夠自己把作業(一個完整網頁)刻出來
不一定很完美、可能很多小缺陷,但至少他們知道該怎麼做了
我也就放心了

3天學會網頁基礎
嗯,還真的可以


非學不可的理由

✔ 時間短
如果你有時間,學習+練習,完整的空出3天即可完成學習
如果沒時間,下班後每天花一小時,學習+練習,2個禮拜後也可完成

✔ 精華中的精華
這個課程其實是經過不斷的修改、精進之後完成的成品
除了自己8年的工程師經驗,2、3年的教學經驗
重點是學生的成果,驗證了學習成效

✔ 接近實務的訓練
通常網路上的資源、或者小課程,都是教一些小東西、或者較小的練習

但接案或工作,自己寫出一個、多個完整的網頁是不可或缺的
這樣的實戰會遇到的問題非常多,不是學習一個小單元的滿足感可以解決的
所以 Taker 會拿幾近真實的例子,帶大家做實戰練習
得到最真實的體驗

✔ 基礎!基礎!基礎!
為什麼基礎那麼重要?

基礎不好,寫得慢,而且問題一堆
A問題修好、B問題就跑出來,卻不知道到問題是出在哪裡
有正確的觀念,才知道自己在做什麼、以及為什麼要這樣做

另外,有好的基礎
在學新的東西的時候,因為觀念正確,理解也快,學習自然事半功倍

✔ 對網頁架構的概念
很多人對網頁其實都沒有概念
學了很多 HTML 標籤、CSS 語法,一個一個拿出來看都沒問題
但要把他們兜在一起的時候就掛點了

那是因為沒有網頁的觀念,即使會了那些東西,依舊是無法有架構的分析網頁
也就無法順利的把學到的 HTML、CSS 兜在一起

而網站的分析也是我們的一大重點
如此一來,當大家拿到新的設計圖的時候,也有能力把他實作出來喔 :)


如果你是...

✔ 新手
此課程是針對新手、設計師設計的課程
從 HTML、CSS 基本的介紹、架構說明、網頁分析、工具使用、到實戰練習
一步一步的引導,帶領你快速,卻又不慌不忙的學會網頁的製作

✔ 轉職
如果你沒做過相關工作,你的問題跟新手一樣
放心的去學吧 :)

✔ 設計師
此課程讓你知道什麼是網頁設計,使你富有網頁架構的思考
你將能做出適合網頁的設計、不需要再跟工程師打架(咦)
甚至、講100遍改不動的東西,你可以「X的老娘自己來!」(or 林北)

✔ Junior 網頁工程師
工程師在前幾年是最辛苦的,因為很多基礎都不是很清楚
如果在一開始就搞清楚基礎,不管是對工作、還是未來的學習都非常有幫助

如果你常常有【改來改去就是改不出來】的問題
或者【其實不確定怎麼做,只好把 CSS 屬性都拿來試試看好了】的作法
那快來試試這個訓練課程吧 :P

學習前基本能力

✔ 一顆誠摯的心

學習前準備

✔ 一台可以上網的電腦

課程資訊

default clock課程時長 8 小時 50 分
default video課程共 10 單元 59 小節
default download14 個可下載的 學習資源
icon_info_certificate提供完訓證書
default plan提供制定 學習計畫建議學習 4 週 (每週 2 小時)

關於講師

taker.wu

自行接案、擔任網頁開發公司 Senior 網頁工程師
期間開發了許多網站、手機 app、網路服務等

後因設計師朋友想學網頁相關的技能
遂開發【網頁基礎15天】等相關課程
以簡單易懂、貼近實際應用的訓練著稱
1. 網站的骨架:HTML 基礎
6 小節
試看
video common icon

課前閒聊

01:03
video common icon

【網頁架構】到底是什麼?

video common icon

【HTML 標籤】(tag) 是什麼?

試看
video common icon

【常用標籤】與他們的用途

11:12
video common icon

替【架構】取名字:如何使用【id】與【class】

video common icon

HTML 其實是一種【樹狀結構】嗯?可以吃嗎?

2. CSS 選擇器 (selector):選擇要改變【誰】的長相
3 小節
video common icon

CSS 的寫法

video common icon

【CSS 選擇器】

video common icon

練習:一起來選選看吧!

3. CSS layout:排版工程學
3 小節
video common icon

display:顯示的特性

video common icon

position:相對位置屬性

試看
video common icon

float & clear:文繞圖與排版

04:27
4. CSS 細節設定
4 小節
video common icon

box model

video common icon

background:背景設定

video common icon

font 相關:文字相關設定

video common icon

其他

5. CSS 權重
1 小節
video common icon

【權重】觀念與調整方法

6. 【實戰練習】「設計圖」大解析
2 小節
video common icon

行前準備:IDE 工具

video common icon

Wireframe:手繪分析稿,讓架構一清二楚

7. 【實戰練習】使用 HTML 製作網站架構
9 小節
video common icon

初始設定

video common icon

header > nav 與假資料們

video common icon

content > slider / category / Grid 概念 / HTML 特殊字元

video common icon

content > recent-product / event / 假字

video common icon

content > event / feature / 假按鈕

video common icon

content > outlets / email 連結 / 新分頁連結

video common icon

footer > 內容 / go top

video common icon

HTML 架構完成後的長相

video common icon

額外練習

8. 【實戰練習】CSS 魔法:替架構披上美麗外皮
14 小節
video common icon

初始設定:串連 HTML 與 CSS 檔案

video common icon

container / header / 置中的辦法 / 用 float 來排版

video common icon

nav 的諸多調整,與 UX 細節

video common icon

關於 clearfix

video common icon

#header 回顧

video common icon

slider / category / Grid 的實作方法 / 圖片服貼容器 / 文字的設定

video common icon

slider 與 category 回顧

video common icon

recent product / 標題

video common icon

Grid 左右邊界 對齊問題

video common icon

product 的細節設定

video common icon

大解析:滑鼠移上 product 後顯示資訊的架構

video common icon

CSS 3:滑鼠移上 product 後的動態效果

video common icon

recent product 回顧

video common icon

額外練習

9. 【實戰練習】CSS 魔法 #2:將簡陋架構,轉變為美麗網頁
10 小節
video common icon

休息一下:談談 CSS 的單位

video common icon

繼續練習:event / 背景圖片設定 / 假按鈕外觀

video common icon

feature

video common icon

按鈕的多樣性

video common icon

margin 崩塌 (margin collapse)

video common icon

feature / outlets / 分割線

video common icon

footer / logo 的出格 / 第三種置中 / 用 CSS 做出圓形

video common icon

go top 回到頂端按鈕

video common icon

整體回顧

video common icon

訓練總結

10. 外傳【切版秘笈】:常見的排版方式與製作方法
7 小節
試看
video common icon

基礎切版架構:版面置中

16:39
試看
video common icon

兩欄式架構、三欄式架構

18:00
video common icon

常見版面介紹:nav

video common icon

破格設計

video common icon

特殊版面介紹:圖片常見的問題與解法

video common icon

cover info:覆蓋在圖片上的資訊

video common icon

下一步?

學習附件

file-icon
ide.pdf
48.96 KB
stage arrow to bottom
file-icon
wireframe.pdf
18.65 KB
stage arrow to bottom
file-icon
html_practice.pdf
26.95 KB
stage arrow to bottom
file-icon
html_practice.zip
3.64 KB
stage arrow to bottom
file-icon
css_practice_1.pdf
23.18 KB
stage arrow to bottom
file-icon
css_practice_2.pdf
18.27 KB
stage arrow to bottom
file-icon
css_practice_2.zip
31.54 KB
stage arrow to bottom
file-icon
css_units.pdf
1.05 MB
stage arrow to bottom
file-icon
secret-1-links.pdf
18.71 KB
stage arrow to bottom
file-icon
secret-2-links.pdf
16.68 KB
stage arrow to bottom
file-icon
secret-3-links.pdf
16.26 KB
stage arrow to bottom
file-icon
HTML+basic.pdf
12.44 MB
stage arrow to bottom
file-icon
CSS+-+layout.pdf
11.05 MB
stage arrow to bottom
file-icon
CSS+-+content.pdf
15.09 MB
stage arrow to bottom

購買此課程後,才能使用留言功能

沒有回應的問題

目前尚無任何討論主題

成為第一個發問的人!在問答中找到學習的捷徑。

關於講師

taker.wu

自行接案、擔任網頁開發公司 Senior 網頁工程師
期間開發了許多網站、手機 app、網路服務等

後因設計師朋友想學網頁相關的技能
遂開發【網頁基礎15天】等相關課程
以簡單易懂、貼近實際應用的訓練著稱
立即加入成為Line官方好友
become line friend
返回主選單
課程類型
影音課程
直播課程
實體課程
返回主選單
返回主選單
返回主選單
返回主選單