iT邦幫忙

第 11 屆 iThome 鐵人賽

36
影片教學

金魚都能懂的這個網頁畫面怎麼切 - 金魚都能懂了你還怕學不會嗎系列 第 31

史上最完整的新手網頁入門學習地圖 - 金魚都懂的網頁學習路徑懶人包

免費的教學資源,但卻絲毫不減教學品質

經歷了兩屆的鐵人賽,總算是把想要做卻積了很久的一些網頁教學,用錄的、寫的給製作出來了,這一些網頁教學基本上不單單是給所有人學習網頁的一份基礎入門指南,也是 Amos 上課輔助內容,原本是上課時才會跟學生說觀看影片的順序,但想想...為了讓影片能夠有更妥善的運用,那就把影片跟文章的閱讀方式與順序公開出來給大家好了,依照這樣的順序學習會是比較適合且順暢的,希望對大家有幫助。

基本上金魚都能懂的網頁教學系列可以給幾種不同的角色學習,每種角色大概如下

  • 完全沒碰過網頁的完全新手
  • 已對網頁有點認知的嫩新手
  • 對網頁已有經驗的入門者
  • 會切一點版面的網頁設計師
  • 想精進網頁觀念的老手

以下 Amos 就針對不同的角色建議一些學習的步驟,這樣能夠比較省下一些學習時間,也更加精確的可以把該角色必要學習的項目一次學完。

完全沒碰過網頁的完全新手的學習地圖

對於完全沒有學過網頁的新手來說,學習網頁的步驟就是一件很重要的事情了,Amos 針對新手學習網頁的順序會有六個步驟,按照順序排列如下

  1. 初識 HTML 與 CSS 入門
  2. CSS 選取器入門
  3. 切版實務練習
  4. 學習 RWD 入門
  5. 初識 Bootstrap 框架使用方式
  6. 初識 jQuery 應用

第一步:學習 HTML & CSS

在第一階段必須要先了解 HTML 是什麼?並且學習基礎的 CSS 與 HTML 之間搭配使用的方式,所以在這階段會先讓新手先整個用最低程度的內容,把整個過程先進行一次。

第二步:學習更多 CSS 選取器以利版面處理

有了前面的 HTML 與 CSS 基礎之後,為了讓我們撰寫版面更加的順暢,所以我們需要多學幾個 CSS 選取器的技巧跟觀念,把 CSS 選取器弄熟並理解,接著才可以讓我們製作網頁更加的順手。

第三步 : 了解 Flex 原理與切版實做

有了前面兩個步驟的加持,這時候可以開始精進 Flex 原理以及切版實務的部份了,把 Flex 與切版實務做結合,好了解各式版面的切法。在切版的過程中可能會發現自己對於一些選取器不熟的地方,這時建議你隨時到 金魚都能懂的 CSS 選取器 看一下影片中使用到的選取器是怎麼使用的喔。

第四步 : 學習 RWD 網頁入門

有了前面的切版練習的加持後,再來就是需要學習 RWD 網頁啦,第一步就是必須了解 RWD 網頁的基本原理,所以就可以繼續看金魚系列中 RWD 網頁的教學

第五步 : 初識 Bootstrap 框架

太棒了! 如果你撐到了這一步,表示你真的非常有耐心,更是認真且用心! 如果你對前面的技術都開始有些熟悉度之後,我們再來就需要學習一些框架了,框架是目前業界經常會用到的一個工具,而 Bootstrap 更是其中數一數二多人使用的視覺框架,就讓我們來看看 Bootstrap 入門使用方式吧。

第六步 : 初識 JQuery

各位學習者~~來個歡呼聲!!! 恭喜你把一些基礎「快速」學習完了,接下來我們來加一點點的程式基礎吧,JQuery 應該是最容易讓新手入門的程式了,來學一點點的 JQuery 吧,看能夠幫我們的頁面添加甚麼樣有趣的效果吧。

恭喜你完成了最基本的新手入門教學流程啦,不要忘了來 金魚的意義由你訂 這邊留下你的感想與心得,接下來就能進入下一個階段了,但進入下一個階段之前,請確保你上面每一個教學都能熟練且理解,這樣才是真正的學會喔。不然就來報名 Amos 的暴力網頁入門班吧! 保證讓你醍醐灌頂學到不要不要的!

已對網頁有點認知的嫩新手的學習地圖

等有空再規劃...

對網頁已有經驗的入門者的學習地圖

等有空再規劃...

會切一點版面的網頁設計師的學習地圖

等有空再規劃...

想精進網頁觀念的老手的學習地圖

等有空再規劃...


上一篇
金魚都能懂的這個網頁畫面怎麼切 : 今天你金魚了嗎?
系列文
金魚都能懂的這個網頁畫面怎麼切 - 金魚都能懂了你還怕學不會嗎31
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中
3
King Tzeng
iT邦新手 3 級 ‧ 2019-10-22 10:01:21

這不跪謝不行!!!!/images/emoticon/emoticon41.gif

5
dick
iT邦新手 5 級 ‧ 2019-10-22 10:54:15

多謝大大無私分享

2
Panda
iT邦新手 5 級 ‧ 2019-10-22 17:53:31

感謝老師 <3

2
阿展展展
iT邦好手 1 級 ‧ 2019-10-26 10:47:47

找到目標惹:我要當一隻金魚!!!

2
Alice Chiu
iT邦新手 5 級 ‧ 2019-10-31 10:14:38

感激不盡!

3
咪醬
iT邦新手 5 級 ‧ 2019-12-02 16:49:34

期待其它的 等有空再規劃... 系列!! 真心感謝!! /images/emoticon/emoticon07.gif

1
阿展展展
iT邦好手 1 級 ‧ 2019-12-22 06:58:16

恭喜完賽! 恭喜優選!/images/emoticon/emoticon64.gif

看一次不夠...看影片讓複習便方便惹 \0.0/

.
.
.

老師請客!

2
ali88
iT邦新手 3 級 ‧ 2020-01-05 12:03:46

感謝老師

1
sean666
iT邦新手 5 級 ‧ 2020-01-15 04:23:27

2020來朝聖,路亞大隻!

CSScoke iT邦新手 3 級 ‧ 2020-01-20 16:44:02 檢舉

大隻大隻

1
richshangwei
iT邦新手 4 級 ‧ 2020-01-15 11:33:14

很棒,有您在真好。/images/emoticon/emoticon08.gif

1
Tim Hsu
iT邦新手 2 級 ‧ 2020-03-02 19:30:37

謝謝老師!!
最近要來挑戰每一關!!!

1
thuartlynn
iT邦新手 5 級 ‧ 2020-06-15 11:06:42

超級感謝~!

0
show-Ti
iT邦新手 5 級 ‧ 2023-05-18 08:48:26

感謝coke老師

我要留言

立即登入留言