在科學的領域，每個人都要學習數學，因為數學是科學的母語，但並不是每個人都要成為數學家。
而在這個科技引領世界的潮流中，程式是科技的共通語言，雖然不是每個人都要成為開發者，但如果能夠學習程式，將讓溝通與理解能力更上一層樓。

網頁是通往所有資訊技術的入口，每個人每天都瀏覽無數的網頁，因此從最熟悉的開始，會讓大家更能接受。同時，網頁也是隨學即用的技術，能夠與工程師溝通、打造行銷自己創意的舞台，也能增加就業機會與薪資談判空間，因此學習網頁程式將會是您最佳的選擇。

寫網站就跟蓋房子一樣，HTML是鋼骨水泥，建立房子的骨架；CSS是粉刷跟裝潢，讓我們加入自己的設計；Jquery是家裡的家具，電器，為房子注入活力。
只要方法正確，循序漸進，大家都可以輕鬆學會。

我們相信 Innovation leads the way.並且正在嘗試利用程式改變世界。平常主要以接案為主，KPMG、獵豹科技、政大之聲都是我們服務的客戶。但我們覺得這樣還不夠，我們覺得教育能帶來更多、更廣的改變，因此讓 Aptan 來帶領大家進入網頁的殿堂吧！

我們團隊為了提升自己的核心能力，花了很多時間精力自學。我們知道自學的痛苦與困難，我們也曾經當過初學者，經驗了許多無助、想放棄的時刻，但我們活下來了。因此，我們更能知道如何解決初學者的困擾！

如果你不知道該從哪裡開始? 不知道該怎麼問? 又該問誰? 我們將會是你最適合的選擇！

作品一：共構 CO-CONSTRUCTION

作品二：Exchange World

1. 看懂網路程式語言，讓你有能力與工程師溝通
2. 編寫網頁程式語言，運用多種雲端工具與資源讓網站上線
3. 寫出一頁式瀏覽的活動網站 Landing Page
4. 寫出專業的企業形象網站來行銷商品與服務內容
5. 寫出極具特色的個人網站，例如：作品集、履歷檔案
6. 瞭解 RWD 讓網頁適應各種螢幕的大小
7. 瞭解 SEO 搜尋引擎優化以提升網頁曝光率

Q1：請問在哪裡上課？上課時間是？
此課程是「線上課程」喔！課程上線後，台灣甚至世界任何角落都能隨時隨地透過手機、平板、電腦觀看。

Q2：課程可以看幾次、看多久？
購課後享不限次數、永久觀看，可以一直看一直學！

Q3：誰適合上這門課？
1. 想要增加就業機會、提高薪資的大學生
2. 期盼能夠展現並公開發表自己豐富才華的你
3. 工作上需要與工程師溝通、或者自己調整網頁排版的你
4. 希冀能夠做出自己品牌、進行網路行銷的創業家
5. 希望從後端邁入前端，成為全端工程師的你

Q4：可以問Aptan團隊問題嗎？
當然呀，歡迎到課程圖下方『購課問答』詢問，購買之後還可以到『課程討論』區和老師互動，Aptan團隊收到通知後會儘速回答您的問題！

Q5：如何付款？
YOTTA 目前提供 3 種付款方式供您選擇：信用卡、ATM轉帳、便利超商繳費。

單元

43個

課程總長

548分鐘

課堂測驗

尚無測驗

無限觀看

永久

一、網頁基本架構
1 什麼是HTML? 免費試看試看 08:39
2 什麼是CSS? 免費試看試看 08:04
3 網頁的運作與階層免費試看試看 08:48
二、HTML中的元素
4 建立網頁基礎骨架免費試看試看 02:49
5 文字的標題與段落免費試看試看 06:18
6 選單與表單的製作免費試看試看 24:51
7 如何切分網頁區塊? 免費試看試看 06:17
8 嵌入圖片、聲音、影片免費試看試看 05:24
9 刻劃表格免費試看試看 08:22
10 編號與列點清單免費試看試看 06:34
三、CSS
11 如何套用CSS? 免費試看試看 14:05
12 文字的樣式免費試看試看 13:17
13 設定元件外框免費試看試看 12:07
14 RWD響應式網頁設計-適應各種螢幕大小免費試看試看 07:05
15 RWD-元素位置大小設定免費試看試看 15:26
16 元素排列免費試看試看 08:17
17 自製項目列表的樣式免費試看試看 04:56
18 擬態選取器(1) -與使用者互動免費試看試看 14:19
19 擬態選取器(2) -元素間互動免費試看試看 09:14
20 CSS零零總總免費試看試看 11:30
四、jQuery - 包覆JavaScript的糖衣
21 為什麼要學 jQuery? 免費試看試看 13:46
22 讓網頁活起來 - 事件處理免費試看試看 24:08
23 用程式產生網頁 (上) 免費試看試看 20:38
24 用程式產生網頁 (下) 免費試看試看 51:32
25 動態資源傳輸 - Ajax 免費試看試看 21:55
五、雲端工具與資源
26 雲端素材與工具介紹免費試看試看 13:12
27 雲端資料庫 - Firebase 免費試看試看 24:51
28 雲端平台 - Heroku 免費試看試看 08:51
六、情境準備
29 網頁開發工具、環境介紹免費試看試看 34:09
七、情境一 (活動網站 Landing Page)
30 吸睛的活動網站視覺設計-一頁式瀏覽免費試看試看 06:09
31 如何在手機上也能完整呈現資訊免費試看試看 13:51
32 報名與訂閱免費試看試看 05:28
33 SEO 搜尋引擎優化 - 提高搜尋曝光率 part 1 免費試看試看 08:12
八、情境二 (企業形象網站)
34 專業的企業形象網站視覺設計免費試看試看 07:11
35 規劃產品、服務目錄免費試看試看 07:23
36 後台管理 - API串接免費試看試看 06:15
37 與我聯繫 - Chatbox 免費試看試看 06:01
38 SEO 搜尋引擎優化 - 提高搜尋曝光率免費試看試看 16:46
九、情境三 (個人網站)
39 極具個人風格的視覺設計免費試看試看 05:41
40 內容管理 - 後台的API串接免費試看試看 14:28
41 留言與回覆 - 與FB社群網站互動免費試看試看 05:51
10、解鎖課程
42 讓你Coding 更輕鬆免費試看試看 14:49
43 如何讓你的網頁更有質感免費試看試看 20:28

開始分享你的學習成果吧！

這裡是專屬於課堂學員及老師可以互動的作業區，學員們可以透過實際操作來複習課程中所學習到的內容，作業完成後只要簡單上傳到平台裡，就能得到更多老師的指點唷！同時，在這裡也可以觀摩其他學員的成果，一起來互相切磋吧！

<%if list.length == 0 %>

尚無作業

老師還沒有出作業唷！

<%else%> <%props list%>

作業<%>~numToZH(~toInt(key) + 1)%>

<%if prop.type == 'image' %> 圖片檔 <%else prop.type == 'pdf' %> PDF <%else prop.type == 'youtube' %> Youtube 影片連結 <%else prop.type == 'ppt' %> PowerPoint <%else prop.type == 'sound' %> 錄音檔 <%/if %>

<%:prop.title%>

<%/props%> <%/if%>

作業觀摩

目前還沒有任何學員上傳作業喔！來當第一個吧～

<%props data%>

<%if prop.type == 'image' %> <%else prop.type == 'pdf' %> <%else prop.type == 'youtube' %> <%else prop.type == 'ppt' %> <%else prop.type == 'sound' %> <%/if %> 作業<%>~numToZH(~toInt(key) + 1)%> <%:prop.title%>

<%:~loadTmpl('homework-card', prop.rows)%>

<%/props%>

<%props data%>

<%if prop.type == 'image'%>

<%else prop.type == 'pdf' %>

<%else prop.type == 'youtube' %>

<%else prop.type == 'ppt' %>

<%else prop.type == 'sound' %>

<%/if%>

<%if prop.visible == 1 %> <%/if %>

<%:~formatDate(prop.create, 'YYYY-MM-DD')%>

<%:prop.title%>

<%:prop.user%>

<%if prop.isAuthor == true %> 刪除編輯 <%/if %>

<%:prop.comment_count%>

<%/props%>

錄音 <%:~numToZH(sort + 1)%>

來關注最新的課程資訊吧！

這裡是專屬課程的公告區，老師將在此發佈與課程相關的重要資訊，您可以在此看到所有與課程有關的最新公告。

尚無公告

老師還沒有發佈公告唷！

<%props data%>

<%:~formatDate(prop.publishDate, 'YYYY/MM/DD')%>

<%:prop.title%>

<%:prop.content%>

<%/props%>

開始分享你的學習成果吧！

作業觀摩

來關注最新的課程資訊吧！

輕鬆蓋第一個網站：三大情境帶你學會網頁程式設計