前端網頁設計,超快速入門

帶領無基礎,文組生,或者對網頁設計有興趣的人,進入網站工程領域的基礎課。此門課將以最基礎的HTML 為主

100 %
282 個人參加這堂課
教師: Adam Adam
  • 課程水平 初學
  • 使用語言 中文
  • 總節數 26
  • 時數 2:50:08
  • 課程內專案
  • 無限次觀看
  • 26個 公開小節

課程介紹

你曾經想學做網頁,卻猶豫不定嗎?

我遇過周遭的許多朋友,其中有 設計、商科、財經相關或是與 "程式" 這兩個字八竿子打不著的領域。都曾經夢想建造自己的網站,讓他們的朋友以及全世界看見。
但卻始終猶豫不前。為什麼呢? ?
理由大多是覺得自己不是那塊料,根本學不會。或是一看到自己看不懂的符號就暈頭轉向。頭腦一片混亂。

為此,我製作了這門課,透過結合生活化的案例
來讓你了解前端網頁設計入門到底是怎麼一回事。
你可以很輕鬆地跟著我一起學習,一起動手做,完成自己的簡單頁面。
這門課將專注在講解,要製作網頁的基礎,以及基礎中的基礎。

從零開始。跟著我快速學習吧 !!
你不需要事先學習任何的會令你感到陌生的知識(例如某某某語法,blablabla....)。
只要想學,就儘管加入 !

 

短時間內,就能架構出簡單的頁面

 

 

網站套版 ? 先別說這個了 ,你有聽過HTML 嗎 ?

HTML 語法 是我們在學習前端網頁設計時,第一個須要學習的事務
而且它非常地容易學習。不管你是什麼背景出身的專業。
只要看靜下心來學習,絕對能夠掌握。

如果學習英文和國小數學的難度是100分
那學習它的難度就是 10分

你只須要認識他們,懂特性與概念。就能做出一個簡單的頁面 !

什麼是HTML,為什麼要先學它?

HTML 語法是網站的骨架,就像蓋房子時的鋼筋水泥一樣。
因此在開始製作你的網站之前,必須先了解HTML 語法內,不同的元素和特性。
就像認識蓋房子的材料一樣。木材、石板、磚瓦、各有不同的功用。
當你掌握了材料和用法,就可以開始規劃並建置你想要的網頁內容 !

 

為什麼選擇這門課 ? 跟其他課程的差異在哪?

  • 線上老師解答,有問必答
  • 淺顯易懂的方式,讓非資工相關科系的人也能快速理解網頁記得核心概念與輪廓
  • HTML 基礎實作專案

適合我嗎?需要那些課程準備?

適用對象

  • 從 0 開始的無基礎者
  • 非相關科系,文組生,想進入網頁程式領域的人
  • 本身對於網站架設一無所知的人
  • 想成為前端工程師的人

工具準備

  • 電腦

知識準備

  • 不需要

課程章節表

第1章

基礎概念
1
網頁的構成要素
8:05
2
學習工具:Codepen 介紹 - 註冊
7:19
3
網頁編輯器與常用快捷鍵
6:10
4
網頁設計 V.S 平面設計
3:48
5
如何開始你的網頁設計
4:34
6
課程中如何與我交流?
2:24

第2章

網頁 HTML 基本概念與特性
1
Class 與 ID
6:58
2
什麼是 HTML ?
6:45
3
網頁基礎架構
7:53
4
HTML 父與子 的巢狀特性
6:50
5
區塊(Block)元素與水平(inline)元素 概念
7:41
6
HTML style 屬性
5:23

第3章

HTML 標籤介紹
1
標題 h1 ~ h6
3:10
2
文字 與 段落
3:54
3
表格 I - 創建表格
6:38
4
表格 II - 表格屬性
8:49
5
區塊容器 與水平容器
4:40
6
連結
8:48
7
清單元素
6:41
8
圖片
5:55
9
內嵌網頁 iFrame
4:07
10
跑馬燈
2:38
11
表單 l
9:44
12
表單 ll
5:54

第4章

簡單 HTML 頁面實作
1
個人介紹頁面實作
22:52
2
學習資源
2:28

您將會學到的

  • 網頁設計,基礎知識。
  • CSS , Javascript 概念與知識
  • 能做出一個基礎的HTML 網頁
  • HTML 語法,概念實作能力

教師簡介

Adam
絕不吃辣的前端工程師、網路行銷人,喜歡自學新技能。體驗、交流、分享新鮮的事物。相信人因學習而偉大。

100%

14個評價
好棒~~我原本以為HTML很困難,之前看到網頁原始碼第一反應都是按右上角叉叉XD,但是Adam讓我慢慢看懂這些標籤內容~謝謝:)
2 周前
講課速度拿捏得很好,我喜歡重點式的切割,學到好多東西 !!讚讚
2 周前
講課的速度拿捏很好!!
1 月前
很謝謝有這個資源~讓非本科系的學生更有機會學到這些東西!
1 月前
Adam講解清楚,速度適中! 感謝
1 月前

其他人也參加了這些課程

收藏
10 天 開發出你的第一個網頁

10 天 開發出你的第一個網頁

收藏
輕鬆上雲端 - AWS 網站建置術

輕鬆上雲端 - AWS 網站建置術

收藏
超入門 CSS  快速學習包

超入門 CSS 快速學習包

收藏
PS/AI輕鬆學

PS/AI輕鬆學