自學網頁の嬰兒教材:HTML與CSS

前端與後端工程的基本技能,這是一份不需任何基礎,也能吸收的入門教材!

自學網頁の嬰兒教材:HTML與CSS

前端與後端工程的基本技能,這是一份不需任何基礎,也能吸收的入門教材!

自學網頁の嬰兒教材:第1課 ── HTML 輕入門

# 第1課 課程目標 學會 h1, h2. p, br 等等HTML元素的用法 學完之後,你將可以用HTML來替內容排版 # 第1課 課程內容 第一課只要學習最基本的HTML元素就可以了 請打開這個網站,用這個網站來開發你的網站: https://jsfiddle.net 共有HTML, CSS, JavaScript三塊可以寫,先只要寫HTML就好。 閱讀並且練習這五份教學的內容: [HTML Basic](http://www.w3schools.com/html/html_basic.asp) [HTML Elements](http://www.w3schools.com/html/html_elements.asp) [HTML Attributes](http://www.w3schools.com/html/html_attributes.asp) [HTML Headings](http://www.w3schools.com/html/html_headings.asp) [HTML Paragraphs](http://www.w3schools.com/html/html_paragraphs.asp) 不習慣看英文,可以改看這裡: [HTML 基础](http://www.w3school.com.cn/html/html_basic.asp) [HTML 元素](http://www.w3school.com.cn/html/html_elements.asp) [HTML 属性](http://www.w3school.com.cn/html/html_attributes.asp) [HTML 标题](http://www.w3school.com.cn/html/html_headings.asp) [HTML 段落](http://www.w3school.com.cn/html/html_paragraphs.asp) 把教學裡面的HTML程式碼,貼到 jsfiddle 裡面的 HTML 區域,貼好之後按上面的 RUN 按鈕,就會在右下角的 Result 看到結果。 讀完、練習完這五份教學裡面的程式碼,就算是學會HTML的基礎了 # 第1課 作業 前往這個網站:[風傳媒](https://www.storm.mg) 或者任何你覺得版面很漂亮的媒體網站 找一篇你喜歡的文章 接著打開jsfiddle,把jsfiddle當成 Microsoft Word文書編輯軟體來用,用HTML的段落、標題、換行等等元素,把文章排版打出來。 只要打出文章內容就好,上方的導覽列、旁邊的熱門文章那些區塊都不用。 完成這些,你就完成這次的課程目標了!

自學網頁の嬰兒教材:第2課 ── CSS 輕入門

# 第2課 課程目標 學會用id、class、元素名稱來指定特定元素 學會用CSS來替文字加上設計感,替文字變色、變大小、設計邊框、寬度、留白等等 # 第2課 課程內容 用jsfiddle來練習: https://jsfiddle.net 這次要寫HTML跟CSS兩個區塊 請閱讀並練習這11份教學(不要緊張,內容很簡單): [CSS Syntax](http://www.w3schools.com/css/css_syntax.asp) [CSS Colors](http://www.w3schools.com/css/css_colors.asp) [CSS Backgrounds](http://www.w3schools.com/css/css_background.asp) [CSS Borders](http://www.w3schools.com/css/css_border.asp) [CSS Margins](http://www.w3schools.com/css/css_margin.asp) [CSS Padding](http://www.w3schools.com/css/css_padding.asp) [CSS Height/Width](http://www.w3schools.com/css/css_dimension.asp) [CSS Box Model](http://www.w3schools.com/css/css_boxmodel.asp) [CSS Text](http://www.w3schools.com/css/css_text.asp) [CSS Fonts](http://www.w3schools.com/css/css_font.asp) [CSS Links](http://www.w3schools.com/css/css_link.asp) 不習慣看英文,可以改看這裡: [CSS 基础语法](http://www.w3school.com.cn/css/css_syntax.asp) [CSS id 选择器](http://www.w3school.com.cn/css/css_syntax_id_selector.asp) [CSS 类选择器](http://www.w3school.com.cn/css/css_syntax_class_selector.asp) [CSS 背景](http://www.w3school.com.cn/css/css_background.asp) [CSS 框模型概述](http://www.w3school.com.cn/css/css_boxmodel.asp) [CSS 内边距](http://www.w3school.com.cn/css/css_padding.asp) [CSS 边框](http://www.w3school.com.cn/css/css_border.asp) [CSS 外边距](http://www.w3school.com.cn/css/css_margin.asp) [CSS 字体](http://www.w3school.com.cn/css/css_font.asp) [CSS 文本](http://www.w3school.com.cn/css/css_text.asp) [CSS 链接](http://www.w3school.com.cn/css/css_link.asp) 把教學裡面的HTML、CSS程式碼,貼到 jsfiddle 裡面做練習,貼好之後按上面的 RUN 按鈕,就會在右下角的 Result 看到結果了。 讀完、練習完這11份教學裡面的程式碼,就算是學會CSS的基礎,能夠用CSS做美工、排版、設計了 # 第2課 作業 你在第1課的作業利用HTML,模仿風傳媒的文章,做了基本的文章排版。 這次的作業,請使用本次學到的內容,把上次的作業拿出來改,替文章加上各種色彩、字體大小、各種排版,讓文章看起來變漂亮。 (請至少替文章加上padding,讓文字不要貼著邊邊,看起來比較舒服) 完成這些,你就完成這次的課程目標了!

自學網頁の嬰兒教材:第3課 ── 網頁排版

# 第3課 課程目標 學會使用div和span元素 能夠做出漂亮的排版 # 第3課 課程內容 用jsfiddle來練習: https://jsfiddle.net 這次要寫HTML跟CSS兩個區塊 請閱讀這份教材: [HTML Block and Inline Elements](http://www.w3schools.com/html/html_blocks.asp) 或是看中文版 [HTML 块](http://www.w3school.com.cn/html/html_blocks.asp) 接著開始學習版面配置: [學習 CSS 版面配置](http://zh-tw.learnlayout.com/) 把教學裡面的HTML、CSS程式碼,貼到 jsfiddle 裡面做練習,貼好之後按上面的 RUN 按鈕,就會在右下角的 Result 看到結果了。 讀完、練習完這份教學裡面的程式碼,就算是學會基本的網頁排版了。 # 第3課 作業 在第1、2課的作業,我們將風傳媒的文章內容做了出來,但是略過了上方的導覽列、旁邊的熱門文章等等區塊。 這次作業要延續那些作業,這次不只是文章內容,請將整個頁面都做出來。 注意:本週作業內容繁重許多,請至少將上方的導覽列、旁邊的熱門文章推薦區塊做出來,其餘的可以省略。 完成這些,你就完成這次的課程目標了! 注意: 有同學反應,jsfiddle的介面太窄,不方便排版 如果您也覺得jsfiddle不好用,可改用 [Glitch](https://glitch.com/) 來練習。 完成後請將您的 Glitch 專案發布,即可將網址分享出去。 小技巧: 您可以使用瀏覽器的開發者功能,觀察網站本身是怎麼寫的 例如:Google Chrome 請對著元素按右鍵 -> 檢查 多利用這個技巧觀察網站原始碼,對於學習本身很有幫助

自學網頁の嬰兒教材:第5課 ── 用力送出表單

# 第5課 課程目標 認識各種常見的輸入欄位 能夠用表單送出資料 # 第5課 課程內容 用jsfiddle來練習: https://jsfiddle.net 這次要寫HTML區塊 請閱讀這份教材: [HTML Forms](http://www.tutorialspoint.com/html/html_forms.htm) 不習慣看英文,可以改看這裡: [HTML 表单和输入](http://www.w3school.com.cn/html/html_forms.asp) 把教學裡面的HTML貼到 jsfiddle 裡面做練習,貼好之後按上面的 RUN 按鈕,就會在右下角的 Result 看到結果了。 讀完、練習完這份教學裡面的程式碼,就算是學會 HTML 表單的用法,可以用表單來讓使用者輸入、選擇,接著送出各種資料了 # 第5課 作業 這次作業的情境如下: 你決定網路創業、開始網拍生意、線上賣衣服,並且自己設計購物網站 在後台管理面板中,需要有地方讓你新增商品項目 請利用本週學到的表單,將這個新增商品項目的表單做出來。 這個表單至少要能輸入以下欄位,(括號內代表建議的欄位類型): - 商品名稱 (text) - 價格 (text) - 是否免運費 (checkbox) - 性別 男/女 (radio) - 類別:上衣類 外套類 下身類 配件類 (select) - 商品備註 (textarea) 請讓這個表單用 POST 的方式將資料送出到 ‘/add-product’ (注意:網址’/add-product’並不存在,所以表單資料無法真的送過去。本週課程只談論表單製作。伺服器程式接收、處理表單資料,不在本週課程範圍) 完成這些,你就完成這次的課程目標了!

自學網頁の嬰兒教材:第6課 ── 在自己電腦上寫網頁

# 第6課 課程目標 正式在自己電腦上寫網頁 不再需要依靠jsfiddle來寫網頁 # 第6課 課程內容 前五課都是用jsfiddle來學習,先跳過了環境設定的問題。 這次的課程要練習正式在自己電腦上寫網頁。 其實,用記事本就可以寫網頁。只要把副檔名存成 .html 就可以了。 請閱讀這份教材: [HTML Editors](http://www.w3schools.com/html/html_editors.asp) 不習慣看英文,可以改看這裡: [HTML 编辑器](http://www.w3school.com.cn/html/html_editors.asp) 接著要回頭學一些基本知識,這些知識在前幾課我們先跳過了: [HTML Introduction](http://www.w3schools.com/html/html_intro.asp) [HTML Head](http://www.w3schools.com/html/html_head.asp) 不習慣看英文,可以改看這裡: [HTML 简介](http://www.w3school.com.cn/html/html_jianjie.asp) [HTML 头部元素](http://www.w3school.com.cn/html/html_head.asp) 全部唸完之後,請試著用計事本在自己電腦上做出一個網頁檔,然後用瀏覽器去打開它 # 第6課 作業 這次的作業要做所謂的 landing page landing page 是網站的門面,給客戶的第一印象 請參考下列網址,了解更多 landing page 的概念 [實例網站解說什麼是 Landing Page ?](https://cola.workxplay.net/what-is-an-landing-page/) 本次的作業內容如下: 假設你打算在近期內創業,請替你的公司建立一個漂亮、有效的 landing page 如果想不到的話,就請替你目前任職的公司,建立landing page 作業條件如下: 請尋找並下載一張大圖片,當作網頁的背景圖片 參考圖庫:https://unsplash.com/ 請建立一個獨立的 css 檔,不要在 html 檔內寫任何一行 css 試著用計事本在自己電腦上做出這個 landing page,然後用瀏覽器去打開它 完成這些,你就完成這次的課程目標了!


👉 身份:資深全端工程師、指導過無數人半路出家轉職 👉 使命:打造 CodeLove 成為優質新手村,讓非本科也有地方自學&討論