第一個靜態頁面

HTML CSS Git 入門

Changee | Learning Path

今日任務

完成個人履歷

好像很多東西，別擔心，一步一步來

設置 Sublime

Package Control

不是內建功能
由 Will Bond 所開發
安裝 Sublime Text 2 時第一個必裝的 Package

安裝方法

必裝 Package

Emmet (Zen Coding)
Bracket Highlighter
jQuery Package
Prefixr

HTML 基礎

HTML 文件架構

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
    // CSS 樣式, js 程式
  </head>
  <body>
  // 頁面裡面的內容
  </body>
</html>

<!DOCTYPE html> 宣告樣式
<title> 顯示在瀏覽器分頁的標題
<meta> 放關於網頁的其他資訊

h5bp

基本的 Web 樣板
針對 HTML5 優化，並且相容舊瀏覽器
內建常用 Javascript (jQuery, Modernizr)
內建 Normalize.css

標籤 tags

運用標籤來告訴瀏覽器內容的結構與語意

<h1>Changee</h1>

<h1> 起始標籤
</h1> 結尾標籤

標題 Heading

h1 ~ h6
h1 一個頁面只有一個
次要標題用 h2，依序遞減

段落 Paragraph

<p>在網路的時代，我們在開始學習新領域時，可以透過 Google 找到許多學習的「<strong>資訊</strong>」，<br>然而過多的資訊反而無法判斷什麼才是適合自己的「<strong>資源</strong>」。<br>現有的學習資源非常豐富，但卻散落在各處，使得「<em>自我學習</em>」時總是花費大量時間在搜尋適合自己的資訊。</p>

<em> 強調
<strong> 重要
<br> 換行

清單 List

分為有序清單<ol>與無序清單<ul>
與無序清單<ul>內容彼此間沒有順序關係（採買清單)
有序清單<ol>內容有順序關係（課程章節、行事曆）
<li>要包在裡面

<ul>
  <li>什麼是前端？</li>
  <li>為什麼要學前端？</li>
  <li>前端的美好，引發學前端的慾望。</li>
  <li>如何自學前端開發。</li>
  <ol>
    <li>線上教學資源</li>
    <li>書籍</li>
    <li>每天需要追蹤的資訊</li> 
    <li>哪些可以參加的活動</li>
  </ol> 
  <li>網站產生器</li>
  <li>前端開發工具簡介</li>
</ul>

什麼是前端？
為什麼要學前端？
前端的美好，引發學前端的慾望。
如何自學前端開發。

線上教學資源書籍每天需要追蹤的資訊哪些可以參加的活動網站產生器前端開發工具簡介

屬性

Source: Learn To Code

<標籤名 屬性1="值1" 屬性2="值2">

<input type="email">

<input type="email" placeholder="Your email">

<input type="submit">

屬性就像是每一個標籤的選項

連結 Link

<a target="_blank" href="https://www.facebook.com/changeeinfo">
  CHANGEE粉絲團
</a>

href 屬性：可使用絕對路徑、相對路徑、網址、目標id、mailTo
target 屬性：_blank（新分頁中開啟）、_self（原來分頁中開啟）

圖片 img

<img src="../img/changee_logo.jpg" width="120" height="120" alt="Changee">

alt 屬性：描述圖片
由單一 tag 構成，沒有結尾 tag
<br> <input> 也都是單一 tag 的 element

無語意標籤 div, span

動手做吧

CSS 基礎

如何套用？

inline CSS：直接寫在 tag 裡面

<img src="../img/changee_logo.jpg" style="margin-top: 50px" alt="Changee">

internal CSS <style></style> 放在 <head></head> 裡面

<style>
  h1 {
    font-size: 72px;
  }
</style>

external CSS：引入外部 CSS 檔案

<link rel="stylesheet" href="style.css">

CSS Syntax

Source: W3Schools

Class and ID Selectors

class 選取器使用 "." (full stop)
id 選取器使用 "#" (hash character)
id 用來識別唯一的元素
class 用來識別多個元素

背景 Background

background-attachment, background-clip, background-position, background-repeat, background-size 跟背景有關的內容很多，多用經驗才會多。

文字 Font

px 與 em 的不同

inline, block, inline-block

Padding, Margin

Border-radius

Lea Verou: The Humble Border-radius

動手時間

進階美化

Font Awesome

Icon font
向量文字，放大解析度還是一樣

CSS3 box-shadow

Box-shadow 產生器：CSS3 Box Shadow Generator

CSS3 transition

可以玩的東西太多了，修行看個人。

GitHub 入門

版本控制

今天要做的事

1 - 建立一個專案

2 - 將專案下載下來

              git clone https://github.com/psdmac/Changee-learning-path.git

3 - 將新增加的檔案加入管理

              git add . // 將所有檔案加入管理

4 - 將程式碼提交

              git commit -am "first commit"

5 - 將提交程式碼推至遠端

              git push origin master
git log

6 - 開啟靜態頁面功能

              git checkout -b gh-pages
git push origin gh-pages

Q&A

Facebook 社團

下週課程 - 排版的技巧

預習
- Learn to Code HTML & CSS - Lesson 5 ~ Lesson 6
- 學習 CSS 版面配置
- GA DASH - Project 2
- CodeSchool - Discover DevTool Level 1 ~ Level 2

第一個靜態頁面 – HTML CSS Git 入門 – 今日任務

psdmac