五倍券 Banner - 首頁 - desktop

五倍券 Banner - 首頁 - mobile

五倍的五倍券優惠活動

Blogs - Sidebar

Tailwind CSS 是新世代的框架，常常拿來跟 Bootstrap 比較

套句老師上課說的話，單純比較框架之間的好壞是沒有意義的

只要評估你現在做的專案適合哪個就使用哪個吧!

那問題來了? 我怎麼知道我現在要做的專案適合哪個框架呢?

## Bootstrap vs Tailwind CSS

先來簡單看看兩者的差異：

- Bootstrap 給你組合好的東西，整組包好給你。
ex:直接幫你寫好一個 nav-bar 或是側邊選單。
- Tailwind CSS 給你小零件，一堆小工具。
ex:將每個 css 屬性都包裝成一個個的 class，讓你組合，像是在玩積木一樣。

而筆者的小組正在做的專案是復刻網站，需要高度客製化，加上筆者自己也想玩玩看這個框架，所以我們最後選擇使用 Tailwind CSS 來切版。
因為如果使用 Bootstrap 提供的 Components 來客製化會需要加上很多的 important! 來修改，
不符合我們現在的情況，本篇會著重在介紹筆者使用 Tailwind CSS 寫專案所遇到的問題。

## 安裝 Tailwind CSS
剛開始聽說 tailwindcss 不好安裝，確實筆者也花了一點時間安裝，
最後筆者參考官網以及以下連結順利安裝。

[Tailwind 官網](https://tailwindcss.com/docs/installation)
[How to install Tailwind CSS v2.0 using Ruby on Rails](https://web-crunch.com/posts/how-to-install-tailwind-css-2-using-ruby-on-rails)

筆者在安裝時因為前面的套件都是使用 yarn add 去安裝，
聽老師說同個專案安裝套件時 yarn 跟 npm 不要混用會比較好，混用會產生一些奇怪的檔案以及可能會發生問題。
所以筆者一開始是使用 yarn add 取代 npm install 去做安裝，
後半段因為筆者是使用 rails 來做專案，所以使用 @import 取代 @tailwind，
@import 則參考官網下面的連結，寫在 app/javascript/stylesheets/application.scss 內。

安裝好之後發現 tailwindcss 似乎有內建 CSS reset，最基本的樣式都沒了，導致一開始還沒開始切版時不方便測試功能。
這時候可以照官網提供的方法把 CSS reset 拿掉，在 corePlugins 內新增 preflight: false。

```html
tailwind.config.js

module.exports = {
  corePlugins: {
   preflight: false,
  }
}
```
原本以為拿掉之後應該就沒有問題了，但後續在切版的時候發現設定單邊的 border 時會無法正常設定，
因此最後還是把 CSS reset 給加回來，不僅可以讓 border 正常設定，也讓網頁能夠統一各家瀏覽器的樣式。

## 擴充功能
如果想對原本的樣式擴充記得要用 extend。
筆者做專案做到一半要 merge 時，發現自己的樣式跟其他組員的樣式會衝到，造成版面壞掉。
原本以為是衝突解錯，花了很多時間在看衝突。
後來想起老師的話，要靜下心來看 console，有錯誤的話終端機會用它的方式跟你對話。
於是我發現我用 tailwindcss 提供的顏色居然吃不到，後來看到組員有用到自訂顏色的功能，
但因為沒有在外面包一層 extend，導致顏色只剩下他制定的那幾種可以用，
原本 tailwindcss 提供的顏色都被覆蓋掉了，這個故事給我自己一個很大的警惕就是發生錯誤時要先看 console，
這是電腦跟你溝通的一個橋樑！
例如我想客製化一個淺灰色時，可以照以下範例來寫：

**範例**

tailwind.config.js

```html
module.exports = {
  corePlugins: {
  },
  purge: [],
  darkMode: false,
  theme: {
    extend: {
      colors: {
        gray: {
          lightgray: '#222222',
        },
      },
    },
  },
  variants: {
    extend: {},
  },
  plugins: [],
}
```

## @apply
是目前比較常用的功能，可以組合多個 CSS 在一個 class 內，類似 funciton 把東西都包好，方便使用。

**範例**
加在 class 裡可以直接讓 div 吃到 @apply 後面的 CSS，讓 HTML 的 code 看起來更簡潔。
記得要在 JS 檔 import 你寫的scss 檔，不然會吃不到你寫的樣式。

app/javascript/styles/comment.scss

```html
.commentinnerbg {
  @apply flex flex-col justify-center items-center bg-white w-20 h-20 shadow-md
}

```

app/javascript/styles/index.js

```html
import "./comment";
```
...html.erb

```html
<div class="commentinnerbg">
</div>
```

最後提供一些 tailwindcss 相關的網站：

1. [Tailwind UI](https://tailwindui.com/)：跟 Bootstrap 一樣幫你刻好很多 components，是要付費的。
2. [Tailwind CSS Components](https://tailwindcomponents.com/)：同上，不過是免費的。
3. [tailwindplay](https://play.tailwindcss.com/)：可以直接在網頁上試玩 tailwindcss。

本文節選自 iThome 鐵人賽阿修 [Day 03 HTML/CSS 使用 tailwindcss 遇到的小問題](https://ithelp.ithome.com.tw/articles/10265524?sc=rss.iron)

---

>  👩‍🏫  __課務小幫手：__
>  
> ✨ 想掌握 Tailwind CSS 觀念和原理嗎？
>
> 我們有開設 💠 [升級前端技術從 Tailwind CSS 開始](https://5xruby.tw/courses/tailwindcss) 課程唷 ❤️️
>


HTML/CSS 使用 tailwindcss 遇到的小問題

HTML/CSS 使用 Tailwind CSS 遇到的小問題

## 一、前言
先前有提到，我在轉職後、進到現職公司前，其實還有錄取過另外一份 PHP 後端工程師之職缺，因為轉職時在培訓營學習過 Ruby 這個後端語言，所以在技術考時，算是回答方向還可以，有幸被錄取。

不幸的是，我入職後發現全公司都沒有人會使用 Git!!!太驚人了啊～這麼好用的東西到底為何不使用呢？我記得我才到職一週時間，每天在辦公室裡，大家都是埋頭寫扣，最常聽到的對話就是「有人剛剛刪掉我的某某某段程式碼嗎？」

後來詢問之後才了解，原來我面試時詢問公司是否有使用 Git 做版控時，主管說有，其實是沒有的…全公司前後端分離，程式碼的交換是使用共用資料夾做傳輸…所以就會有掉程式碼的問題常發生，而大家也都沒有備份的習慣，導致專案開發常常有耗時之問題！

當然除了沒有版控，其實還有其他問題，我只做一週就離職了。從中得到最寶貴的經驗，我覺得是建議剛要踏入這行的新鮮人，可以多注意版本控制這件事，不要說是協作，你一個人在家開發 side project 時也可以用啊！隨時隨地都可以練習的～

![](https://i.imgur.com/DHSE8kN.jpg)

[Photo created by freepik](https://www.freepik.com/free-photo/side-shot-young-asian-man-glasses-working-computer-office_5576673.htm#query=computer%20programmer&position=4&from_view=search)

## 二、Git 是什麼？
Git 像一個檔案系統，直接在本機上取得資料，不必連線到主機端取得資料。 每個開發者都可有全部開發歷史的本地副本，changes 從這種本地 repository 複製給其他開發者。這些 changes 作為新增的開發分支被匯入，可以與本地開發分支合併。(本段落取用自[維基百科](https://zh.wikipedia.org/wiki/Git)之定義)

上面那段我覺得可能是因為翻譯關係較為饒舌難懂，我覺得較簡單的理解是可以把 Git 當作是一個版本開發工具，你可以隨時儲存進度、保留歷史開發內容、為每一階段開發做有效命名、以及傳送至有效之 server 作為團隊合作之工具。

以下介紹我覺得入職後最常用的幾個，如果想要從頭學習或瞭解一些冷知識的話，推薦可以看龍哥的這本書<<[為你自己學 Git](https://gitbook.tw/)>>，可以依自己習慣選擇電子版或實體書籍(我個人還是喜歡實體書籍)。但入職前將下列指令熟用(稍微列幾個，但實際上也要看公司的習慣)，真的是很基本的事情！

| 項次| Git 指令| 用處| 
| -------- | -------- | -------- |
| 1 | 	git add . | 我通常都是一個小進度告一段落就會使用，然後搭配項次  2 的指令作為此進度之命名 | 
| 2 | 	git commit -m "commit message" | commit message 放的就是你對目前這個儲存的時機點所完成的進度，個人推薦全英文寫上簡單易懂之小句子，可順手培養英文單字熟練度。 | 
| 3 | 	git merge branch-name | 合併某個分支。 | 
| 4 | 	git push origin branch-name | 就是推到某個遠端的分支做同步的意思，有可能是 feature…、develop 等等。 | 
| 5 | 	git cherry-pick commit-SHA-1 | - commit-SHA-1 是指你想要的那個節點。主要是用來處理你忘記開分支出去，就開始撰寫程式碼的狀況。可以參考這個章節，有更詳細之理解。 | 

## 三、Git 觀念與習慣
Git 好用之處這邊不加以贅述，遠端共同協作更是現在身為工程師必備之技能。那擁有好的 Git 觀念，我想是要靠自己不斷練習使用、常與團隊溝通合作，自然就能累積而成。這邊介紹一下我個人堅持的小習慣，但我現職的全公司都不愛用 XDD 我不懂為何…

| 項次	 | 主題	 | 內容 | 
| -------- | -------- | -------- |
| 1	 | 使用全指令介面 | 好處是可以不用切換輸入法、增加英文字彙量、有很多指令可以活用、假裝很忙？  壞處目前想不到，因為我覺得學習曲線真的不高。
| 2	 | 分支命名	 | 第一當然是尊重團隊習慣。第二則是留意分支主題是否易懂。
| 3	 | commit 訊息	 | 盡量還是全英文書寫。有需要的話可以進到習慣介面輸入 markdown 語法詳列。保持習慣一個段落就 commit 一次，要補救或確認每日進度時很好用。

## 四、Git Server 又是什麼？
網路上有點難查到名詞定義，大概意思就是你在本地有的那些分支可以更新(push)到 **遠端共同協作的網站**，而你一直在打的那些 Git 指令是工具。

最知名的 Git Server 當然就是 GitHub 啦～聽說工程師宅宅們甚至會在上面交友，以程式碼會友～我個人等級不到還沒體驗過…但是值得一提的是它真的提供了很多服務，像是你的個人首頁看放介紹，你可以創建與你 GitHub 帳號名稱相同的 GitHub Page，大家如果有興趣可以多研究一下～(後面篇幅我也會介紹如何使用 GitHub Page)

當然，有的公司也會自架一個 Git Server，我現職的公司就是這樣的。入職後，公司會幫我們創建帳號，個人覺得和 GitHub 幾乎相同，只是那些綠點點不會長在自己的 GitHub 紀錄裡而已，但我有發現一個奇妙的點，公司自架的 Git Server 綠點點是記錄你的當日 push 次數，而 GitHub 則是記錄你當日 commit 次數，這點倒是不明白為何？

## 五、結論與自我鼓勵
總結當然首要提到的是，一定要進到一間有版控的公司啊！雖然也有很多公司長年沒有使用仍然可以存活，但我想背後應該有很多沒必要的苦工…次要則是想分享近期我公司同事轉傳給我們的「[Git Commit Message 寫法](https://wadehuanglearning.blogspot.com/2019/05/commit-commit-commit-why-what-commit.html)」，這是看公司協作和個人習慣，大家可以當作參考即可。

自我鼓勵的部分，當然是覺得佩服自己中秋連假竟然可以成功不斷賽，雖然每天行程很滿，仍然在固定時間點靜下來打文章，因為聽說人類連續 21 天就能養成一個習慣，我是一個非常容易半途而廢的人(因為有點懶惰)，所以需要常給自己鼓勵才有動力！各位鐵人們一起加油吧～

本文同步發佈於我的個人網站 [Annie Code Life](https://annielin28815.github.io/2021/09/19/2021iroman-day06/)

---

>  👩‍🏫  __課務小幫手：__
>  
> ✨ 想掌握 Git 觀念和原理嗎？
>
> 我們有開設 🔮 [坐上 Git 時光機 - 版本控制](https://5xruby.tw/courses/git) 課程唷 ❤️️
>


新手全端工程師的職場成長歷程 - 絕對要有的 Git 觀念與習慣

前端的三大天王有 HTML、CSS 及 JavaScript，這個章節的重頭戲我們就放在 CSS 身上。

在之前的章節曾提到，網頁的樣式變化就猶如替素顏的臉上化妝，馬上就帶大家認識 CSS，它的全名是 Cascading Style Sheets，縮寫為 CSS。要開始寫 CSS 的前提是，會需要一個 HTML 的文件，你才有辦法將 CSS 的化妝效果呈現出來。

很多人會以為 CSS 其實只是改改顏色或文字大小，但它的難度其實是在於要把設計師的設計稿透過程式的方式呈現成網頁格式，而呈現出來的頁面可能會因為裝置的不同而有跑版的可能，為了讓網頁可以完美呈現在其他人面前，CSS 的複雜度相對比較高。

## ❏ CSS 語法 

```css
p {
 color:red;
}
```

大家有沒有發現 CSS 的語法和 HTML 的標籤有那麼一點點不一樣？

CSS 會用 **選取器（CSS selctor）** 來讓你選取想要調整樣式的區塊，因此當你做頁面的變化時，才不會影響所有畫面。

從語法上面來看和解釋，我們會用中括號 `{}` 在裡面寫下我們希望這標籤做出什麼樣的改變。

而 color 是 **屬性** 的概念，意思是希望這個 `p` 標籤要做出顏色上變化，而冒號後面接的內容，我們稱職為 **值**，也就是我們希望 `p` 標籤變化的結果。

跟 HTML 一樣要使用符號來讓編輯器知道這個語法已經結束，因此在 CSS 裡就是使用 **分號（`；`）** 來告訴 CSS 這個樣式已經完結。

另一個大家容易發問的問題包含 CSS 語法是否會受大小寫影響，其實不管你用大寫或小寫描述都不太會出錯，但通常我們都會以小寫表示。

### [CodePen](https://codepen.io/)

CodePen 有劃分幾個欄位，就按照它提供的欄位放入對應的地方即可，就會讓網頁出現想要呈現的效果唷！
![codepen-html-css](//images.ctfassets.net/8er52l3j5u76/4TCAJ8Zlila62ymoX5aP6i/af457d9f157c2be41125bba584515c51/codepen-html-css.jpg)

### VScode

1. 寫在同一個檔案

通常會把 CSS 寫在 HTML 的`<head></head>`標籤之間，並且將語法放在`<style></style>`內。

2. 連出去外部文件

為了避免整個 HTML 的檔案寫得太過冗長，比較常用的方式，會寫一個新的 CSS 樣式文件（stylesheet），然後再會用連結的方式載入原本的 HTML 檔案。

或許用一個例子來說明你會更好懂，假設我在 VScode 開了一個新的頁面要來放 CSS 效果，另存檔名為 01，附檔格式為 .css，接著我們就會在 html 的 `<head></head>` 之間裡加入了以下這段：

![外連 style](//images.ctfassets.net/8er52l3j5u76/4MiLTFlPtrXwaDTzyOaWPo/3614c084eb55cef92670fd5e72d63964/UKqWxFK.png)

整個語法指得是，藉由 style 的標籤，連出去一個叫做 01.css 的樣式表。
這樣的寫法的好處是透過獨立的 CSS 頁面，可以讓 HTML 的頁面檔案相對變得簡潔易於維護。

## 小結
以上兩種方式都可以讓 CSS 效果正常發揮，基於開發上的好維護原則，常會使用上述的第 2 種方式，將 CSS 寫在另外一個文件，在 HTML 的標籤內用 link 的方式將樣式導入。 

### 延伸閱讀
- [認識網頁開發從生活開始](/posts/learning-web-development-1)
- [零基礎也能懂的 CSS - 概念篇](/posts/knowing-basic-css)

### 推薦課程

> 👩‍🏫 課務小幫手：
>
> ✨ 想了解更多 HTML / CSS 知識和技巧嗎？
> 也歡迎報名課程 👉 [網頁前端設計女性專班](https://5xruby.tw/courses/code-for-girl)

knowing-basic-css

零基礎也能懂的 CSS - 概念篇

[Free Stock photos by Freepik](https://www.freepik.com/free-photo/online-web-design_11428417.htm#query=Web&position=0&from_view=search)

網頁開發常會聽到前端這個名詞，其實網頁就是透過前端的 HTML 去替版面排版，接著再用 CSS 去進行美化，合作的成果就變成了我們所看見的網頁畫面。
這篇文章就要揭開 HTML 的神秘面紗，讓大家對網頁畫面的排版可以更有概念。

### ❏ 什麼是標籤？
相信大家多少都知道網頁的畫面呈現，也就是我們所謂的排版，這跟 HTML 有很大的關係， 其實 HTML 就是由標籤（tag）所組成的，最主要是希望能將內容標記成瀏覽器能懂的格式，透過將資訊標記成有架構的內容，稱為結構化。那又是要如何使用 tag 讓瀏覽器去定義網頁的文字並呈現在大家面前呢？

### ❏ 標籤的語法
HTML 標籤 (tag) 語法 如下：

```html
<h1>hello</h1>
```

從語法上，我們可以了解標籤有幾個特性：

1. 標籤（tag）幾乎都是成對的，用 `<>` 前後包住要定義的區塊或文字。而結尾的標籤需要有 `/` ，寫成 `</>` 以表示結束。
2. 標籤內的文字 hello，則是希望呈現在網頁上的內容。

在認識語法原則後，就可以知道更多不同種類的標籤，會帶來什麼樣的畫面效果，接著我們繼續往下認識更多 HTML 的標籤。

## ❏ 認識 - heading 標題標籤

接下來要跟大家介紹 h 標籤，而這個標籤很特別的地方則是會在 h 後面加上數字。其實這裡的 h 表示的是 heading，也就是標題的意思，而 heading 可以從 `h1` 分至 `h6`，在畫面上除了字級會越來越小，同時也是用來讓瀏覽器來判斷網頁上這段標題的**重要性**。

一個網頁通常只會有一個 `h1`，通常也是網頁的主標題，也是最重要的主概念，一個網頁可以一路標記到 `h6`，表示網頁內標題的重要性越來越低。

**`<h2>標籤</h2>`**

```html
<h1>網頁菜菜子的一天</h1>

<h2>網頁菜菜子的一天</h2>

<h3>網頁菜菜子的一天</h3>

<h4>網頁菜菜子的一天</h4>

<h5>網頁菜菜子的一天</h5>

<h6>網頁菜菜子的一天</h6>
```

如果我們把這些文字打完存成 `.html` 的檔案，或放到 Codepen 上會發現字級有了些微的變化：

![html- H tag 示範](//images.ctfassets.net/8er52l3j5u76/7FrzJzMvslv5t8CXr9YZul/b863df5d305e4e11c86ed0b47c07032c/s_D3520281EBAB9DACD16F76C14C72BCBF85E4CE85232A9C8CC4225FF8DC312F07_1614570086488__2021-03-01_11.40.59.png)

因為我們時常會用字體的大小來強調標題的重要性，所以特別的 h 標籤就會使用數字 1~6 來告訴瀏覽器標題在網頁畫面上的重要性。

## ❏ 認識 - paragraph 段落標籤

無論是新聞網頁或是購物商城，除了標題之外，還需要搭配內文或描述文字，這個時候可以使用 `<p>` 標籤來標記段落。
舉個例子來說，如果我寫了一篇文章，內文一共有三段，我總不能用 `<h6></h6>` 來告訴大家這裡有三段文字，所以這個時候，我們可以使用 `<p></p>` 標籤，把我們每一段的內文的寫進去，這樣就可以清楚地告訴別人，內文裡有三段文字唷！

**語法：**

```html
<p>段落內容</p>
```

該是時候來認識我們的 `<p>` 標籤了，那跟著菜菜子從下面的認識 p 標籤吧！

```html

<p>我是第一段我是第一段我是第一段我是第一段我是第一段我是第一段我是第一段我是第一段我是第一段我是第一段我是第一段我是第一段我是第一段我是第一段我是第一段我是第一段我是第一段我是第一段我是第一段我是第一段我是第一段我是第一段我是第一段我是第一段我是第一段我是第一段我是第一段我是第一段我是第一段我是第一段我是第一段</p> 

<p>我是第二段我是第二段我是第二段我是第二段我是第二段我是第二段我是第二段我是第二段我是第二段我是第二段我是第二段我是第二段我是第二段我是第二段我是第二段我是第二段我是第二段我是第二段我是第二段我是第二段我是第二段我是第二段我是第二段我是第二段我是第二段我是第二段我是第二段我是第二段我是第二段我是第二段</p>

<p>我是第三段我是第三段我是第三段我是第三段我是第三段我是第三段我是第三段我是第三段我是第三段我是第三段我是第三段我是第三段我是第三段我是第三段我是第三段我是第三段我是第三段我是第三段我是第三段我是第三段我是第三段我是第三段</p>
```

還記得標籤的特性嗎？成對使用，並且結尾的標籤要使用 `/` 表示結束。而這裡的 p 指得是 paragraph 段落的意思。

可能看到剛剛的例子，有人會問，為什麼沒有 p 標籤沒有 h 標籤一樣用數字去劃分字級大小呢？

如果以字級大小來說，其實之後會學到 CSS，他可以控制畫面和字級，而 HTML 的任務是把網頁上的文字或是表格透過標記讓瀏覽器可以正確呈現給使用者知道，而數字的標記最重要是要讓瀏覽器知道，在整個網頁裡，哪一個最重要，又或是哪一個是次等重要的。

## ❏ 認識 - list 清單標籤

如果你想今天看衣服的購物網站，想要知道這件針織衫的特色有哪些，網頁上也許會用列表的方式呈現；又或是食譜可以依照步驟條列，這些都可以輕鬆使用清單標籤中的**有序清單**和**無序清單**來達成唷！

清單的標籤語法如下：

```html
<li>內容</li>
```

首先我們已經使用 `<li>內容</li>` 告訴瀏覽器說這個網頁裡有個清單，接下來我們就要告知，這份清單是需要使用編號按照順序排序下去，這時就可以再內容的地方加上 **有序清單 `ol`（order list）** 的標籤來完成。

```html
<ol>
 <li>打開冰箱</li>
 <li>拿出啤酒</li>
 <li>大口喝下</li>
</ol>
```
而加入有序清單的寫法，為 `ol` 標籤裡再包個 `li` 標籤。從上面的語法我們可以知道，一個標籤裡還可以在第二個標籤，這樣的寫法我們可以稱之為**巢狀結構**，像鳥巢一樣，一層層地包裹。

-   無序清單的使用時機，例如我們要陳列一堆條件，但沒有排序的需求，就可以使用 **ul（unorder list)** :

```html
<ul>
 <li>打開冰箱</li>
 <li>拿出啤酒</li>
 <li>大口喝下</li>
</ul>
```

## ❏ 認識 - img 圖片標籤

如果你想在網頁置入一張圖片，就可以使用：

```html
<img src="https://fakeimg.pl/300/" >
```

圖片標簽的來源如果從網路上的公開資訊取得，就可以直接帶入網址，我們稱這種方式為**絕對路徑**。

有沒有一種可能，是你自己的手繪插圖，並沒有發佈到網路上，僅存在你的本機端，如果是你在這個專案底下開了一個資料叫做 photos，專門放要製作網頁的圖片，裡面其中一張叫做 pic1，這時候我們要怎麼把這張圖片放上我們的網頁呢？這時候，只要使用**相對路徑**即可。

```html
<img src="https://fakeimg.pl/300/" >
```

另外，我們引用圖片的時候，可能會發生圖片無法正常讀取的時候，這時候我們會加上圖片說明，讓搜尋引擎在圖片破圖時，可以顯示出你命名的文字，讓使用者可以更快解讀出這張無法顯示的圖片。

```html
<img src="https://fakeimg.pl/300/" alt="這是我的圖片">
```

假設今天圖片失效，維護者也可以從 `alt` 的屬性中，了解原先要配置的圖片內容。

Google 也會對 `alt` 來判斷這張照片資訊，同時也可以讓無法看到圖片的使用者來理解圖片，所以 `alt` 盡量已簡短好理解的關鍵字來寫，留下正確的圖片資訊也是 SEO 優化很重要的要素。

## ❏ 認識 - 區塊標籤

div 可以解釋為區塊，用 div 標籤包起來的東西，瀏覽器會將包起來的地方視為一個區塊，我們可以將畫面分成很多區塊，並讚每個區塊放入放入排版的 HTML 標籤。

```html
<div></div>
```

這樣子就是在網頁畫一個區塊，一個畫面可以切成很多區塊，每個區塊裡面都可以做些變化。

但問題來了，如果我們想在網頁裡面畫成上下兩個區塊，我們要各別給這兩個區塊名字，給他們一個值，這樣網頁才會知道這些變化分別在哪些區塊裡，所以值的表示可以這樣寫：

```html
<div class="top">內容</div>
```

```html
<div class="down">內容</div>`
```

這就是要告訴網頁，用 `class` 去告訴網頁：「這個網頁有用 HTML 分成兩個區塊唷」，用等於 `＝` 這個符號去告訴網頁我所分類的區塊，它的名字叫做 top ，另外一個容器叫 down 唷！

另外如果你僅僅只是貼上 `div` 標籤，裡面沒放內容物，那麼很有可能會顯示不來他的效果，因為就像我剛剛講的 `div` 是一個容器，裡面可放入你想要的文字或是清單標籤。若你寫了 `div` 標籤卻沒給他內容，就會看不出變化唷。

## ❏ 小結

網頁開發新手們可以試著把剛剛學會標籤，放到 Codepen 或是任何編輯器裡，存成 `.html` 的檔案，就會看到預期的變化效果！

而 HTML 的標籤不僅止於以上的介紹，網路上也有很多資源可以尋找，如果你想了解更多的標籤，也可以從 [W3C](https://www.w3schools.com/tags/ref_canvas.asp) 網站上的 HTML Tags 去知道其他標籤的使用方式。

### 延伸閱讀
- [認識網頁開發從生活開始](/posts/learning-web-development-1)
- [零基礎也能懂的 CSS - 概念篇](/posts/knowing-basic-css)

### 推薦課程

> 👩‍🏫 課務小幫手：
>
> ✨ 想了解更多 HTML / CSS 知識和技巧嗎？
> 也歡迎報名課程 👉 [網頁前端設計女性專班](https://5xruby.tw/courses/code-for-girl)


build-your-first-web

順利實作你的第一個網頁畫面

[Photo created by tirachardz - freepik](https://www.freepik.com/photos/travel)

> 曾想想過自己花多少時間上網嗎？

重度網路成癮症的我們每天拿著手機滑呀滑的，通勤時滑，就連上班和上廁所的時候都在滑，就這樣，我們每天在不同的社群平台瀏覽大量資訊，在不同的網頁上來回擷取資訊，滑手機漸漸變成現代人一種戒不了的癮！

你可能心裡有個網站待看清單，每天固定來回瀏覽 Facebook 和 Instrgram 又或是網拍的新品登場，你也可能沈迷於社群媒體，深怕錯過周遭身邊親友的分享，讓自己一不小心就變成時代的眼淚（擦）；你也可能透過某個網頁獲得知識，經由連結或是搜尋進到其他網站，資訊的流通彈指間就能完成。

> 你最常瀏覽的網站又是哪些呢？

也許有人會說 PChome 或是 Ikea，但不論是哪一個網站，你曾經想過自己的視覺習慣嗎？每次瀏覽網頁時，哪些網站會特別留住你的目光呢？它們有什麼共同的特色或是風格呢？

如果你是網頁菜菜子，不妨跟筆者的腳步認識一下網頁是什麼，跟著我的視角來練習，一步一步打穩網頁的基本概念！

> 網站怎麼組成了呢？

我們每天瀏覽的網站到底是怎麼組成呢？這邊簡單地將網站分為「前端」和「後端」。

- 前端：掌管一個網站的所顯現的畫面和排版。
- 後端：控制一個網站的功能或是資料庫管理，例如：金流或是發信系統。

這是最籠統的分類，不管是前端和後端，它們的學問極深，都有各自的發展規則，彼此可能卻有息息相關。

![認識網頁開發從生活開始](//images.ctfassets.net/8er52l3j5u76/6iJfm6d28xcWpyq54C0hPO/ace6bf3f5b72d5549880326a972b5c6a/17gSk3d.png)
[Photo by Florian Olivo](https://unsplash.com/photos/4hbJ-eymZ1o)

## ❏ 前端的三大基礎天王

筆者要帶大家稍微認識前端的三大基礎天王，用一個簡單的例子讓大家可以更好理解。
想像一下，如果我們把網站想像成一個人，「前端」- 負責一個人的外貌長相有沒有突出，而「後端」就控制人的器官和四肢能不能正常運作。

前端，你必須要認識三大天王，它們分別為 HTML 和 CSS 以及 JavaScript。有了以上三位的幫忙，一個人的肢體表現才能活靈活現！

- HTML：就是臉上的五官和身體的四肢要擺在對的地方，總不能把嘴巴擺在眼睛的上面。
- CSS：可以想成化妝品和裝飾品， CSS 替你的身體穿上一件漂亮的洋裝還是帥氣的皮外套；又或是要替你的嘴巴畫上淡橘還是現在流行的奶茶色口紅，跟外觀相關的就由 CSS 來決定。
- JavaScript：則是掌管身體的神經元素，讓骨架可以移動，讓身體可以改變姿勢。

透過這樣簡單的介紹，從生活開始認識網頁，對於「前端」這個名詞在網站上代表的意思，是不是具體多了呢！

## ❏ 網頁起步走

仔細回想大家開網站的習慣，都我們透過連結又獲釋搜尋引擎進入網站，而網站內又按主題分類分成數十個網頁。
我們就先從網頁寫在哪裡開始認識吧！

## ❏ 網頁寫在哪裡呢？

無論你是要寫在電腦裡頭的記事本，又或是 Office 的 Word ，只要能把文字寫下來的應用程式都可以用來寫網頁，要特別注意的是網頁是由 HTML 格式完成的，不過你用什麼應用程式，副檔名記得改成 `.html`，這樣在瀏覽器 (Chrome、Safari、Firefoxe 等)開啟檔案時，才能正確讀取唷！
但一般寫網頁會在專門寫網站的工具編輯器或網站上撰寫喔！ (別擔心，這篇文章將會一步一步帶你認識這些工具！)

### ❏ 寫在 CodePen 
你甚至可以使用線上的程式碼編輯器 [CodePen](https://codepen.io/) 學習，優點是每個輸入的步驟都會同步更新，讓你可以立刻所見即所得。

![認識網頁開發從生活開始-codepen](//images.ctfassets.net/8er52l3j5u76/8v44ofoxiXTFguz7GKjUu/10f3ab5940ac0997ba7d3632710efbcb/s_D3520281EBAB9DACD16F76C14C72BCBF85E4CE85232A9C8CC4225FF8DC312F07_1614572800191__2021-03-01_12.25.03.png)

接著點選左邊的 Pen 後，畫面則會被切為兩半，上半又分為 HTML、CSS 和 JavaScript 三個部分，下半部則會根據你上方所做的動作而呈現出來的內容。

![認識網頁開發從生活開始-codepen](//images.ctfassets.net/8er52l3j5u76/3034YLTCwvjMEUilOMNWH0/4692bc1b0d5ef7ad4d8248d519282a3d/s_D3520281EBAB9DACD16F76C14C72BCBF85E4CE85232A9C8CC4225FF8DC312F07_1614573587711__2021-03-01_12.37.38.png)

看看 CodePen 的結構，我們已經很清楚的知道 HTML、CSS 以及 JavaScript 可以寫在對應的欄位，當你寫在對應欄位，畫面上的效果也會跟著語法而改變。

### ❏ 寫在 VScode

市場上有著各種不同的程式碼編輯器，無論是哪種都有各自的擁護者，就趁這篇文章來大家簡單介紹開源免費的編輯器 **[Visual Studio Code](https://code.visualstudio.com/)**，目前也是市場上使用人數最多的編輯器唷！

#### 下載起步走

![認識網頁開發從生活開始-vscode](//images.ctfassets.net/8er52l3j5u76/1ezj2BJfem61TOcttoXc3Q/e0e7a8ccf31a61ce9abea50ef4fb6bc8/s_D3520281EBAB9DACD16F76C14C72BCBF85E4CE85232A9C8CC4225FF8DC312F07_1585757180295__2020-04-02_12.05.50.png)

下載完 Visual Studio Code 後，可以安裝一些套件，可以大幅減低輸入語法的時間。

![認識網頁開發從生活開始-vscode](//images.ctfassets.net/8er52l3j5u76/7KnNwOepMl9OWcMR8nqM6L/4ddea52e3eb6a27413ac91c606e4dbb3/s_D3520281EBAB9DACD16F76C14C72BCBF85E4CE85232A9C8CC4225FF8DC312F07_1585757180295__2020-04-02_12.05.50.png)

#### VS Code 在寫，套件要有

-  [ fakimg](https://marketplace.visualstudio.com/items?itemName=yoyoys.fake-img-snippet-collection)：快速生成假圖。
當我們在開發一個網站時，會想要大概排出圖片和文字的位置，有時候可能是還沒找到對應的圖片，這時候就可以使用假圖來先畫出心中預設的網頁畫面。

-   [live-serve](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer)：看語法在瀏覽器所呈現的畫面。
每當寫好一個標籤或是效果的時候，想要看它在瀏覽器所呈現的畫面，這個時候就可以用 live-serve 的套件直接看畫面，讓你可以不用存好檔案再打開來看。

-   [Chinese Lorem](https://marketplace.visualstudio.com/items?itemName=KevinYang.ctlorem)：可快速產生無意義的中文文字，讓你可以快速放入。
為了暫時版面網頁的畫面效果，可以先穿插一些假字來預先呈現網頁的整個雛形。

-   [Auto rename tag](https://marketplace.visualstudio.com/items?itemName=prasadbobby.auto-rename-tag)：改了標籤後，重複的標籤可以選取一起更改。
每個語法都會有一些規則，這些規則往往是重複書寫的，這時候如果使用該套件，一些語法就可以快速一鍵生成或是一鍵修改。

既然介紹下載 VS code，就趁現在好好的安裝以上介紹的這些套件，之後也有助於自己可以更有效率地開發網頁。今天的網頁面面觀到此為止，下篇文章我們再來好好介紹語法寫在編輯器上的規則和呈現方式！

### 延伸閱讀

- [順利實作你的第一個網頁畫面](/posts/build-your-first-web)
- [零基礎也能懂的 CSS - 概念篇](/posts/knowing-basic-css)

<br>

---

### 推薦課程

> 👩‍🏫 課務小幫手：
>
> ✨ 想了解更多 HTML / CSS 知識和技巧嗎？
> 也歡迎報名課程 👉 [網頁前端設計女性專班](https://5xruby.tw/courses/code-for-girl)

認識網頁開發從生活開始

[Photo by Wes Hicks](https://unsplash.com/photos/ptXljygBu-0)

## 寫在前面
上課前就常常聽說 Ruby on Rails 在 Window 作業系統環境裡很麻煩很難用，但我在上課跟做專案的時候都一直是使用 Windows 筆電，用起來其實沒有想像中的可怕，真的完全不支援的東西很少，最多就是跑測試或要建立 server 的時候比較慢而已，但我私自認為速度會很慢有一部份也是因為電腦的配備問題。之前買筆電的時候就有特別考慮速度所以買了三萬多塊稍貴的筆電，可能也是因為這樣，用 wsl 跑 rails 相關的東西時其實也是順順的。因為開始新工作的關係拿到一台新的 MacBook Pro（此生第一台），剛好跟大家分享一下在設定開發環境還有習慣 MacBook 的一些小故事

（由於公司使用了 docker，所以其實很多地方都被包起來了，現在也還太嫩無法參透包起來的方法）

## 從 Windows 轉 MacOS 的一些小心得跟好用工具：

- Windows 轉 MacOS 的快捷鍵：

  之前在 Windows 上的 `Ctrl` + `C`... 都換成 `Cmd (Command)` + `C`

  這可能真的要習慣一下，但其實用久了感覺差異不大，另外要直接前往上下左右的最邊界就按 `Cmd` + `方向鍵`，要單字跳躍就按著 `opt` + `方向鍵`，這個大幅提升作業速度，好用！
  另外補充如果在 iTerm 裡面要使用這個功能的話可以依照下面的方法操作：

  進入 Preference
![](https://i.imgur.com/ZwLMS1w.jpg)

  依照指示改變設定即可
![](https://i.imgur.com/ISYsxHU.jpg)

- [Xnip](https://xnipapp.com/)：
   截圖好物，顧名思義就是用來截圖的，操作簡單。

- [Spectacle](https://www.spectacleapp.com/):
  能夠讓螢幕快速分割定位的工具，我自己其實不太常用，但要用的時候能用真不錯。

- [Amphetamine](https://apps.apple.com/us/app/amphetamine/id937984704?mt=12):
  就算你的螢幕保護程式設很短會鎖起來，用了就可以讓他一直醒著，幫助你專心還可以一邊幫你計時！ 

- 其他小叮嚀：
  善用連點兩下選取字詞、連點三下選取整行文字，都可以節省時間。

![Ruby on Rails 入門 - 幫助你開發的 Mac 小工具分享](//images.ctfassets.net/8er52l3j5u76/7mVFkBx0ZpyivFA4jH0aoy/9eea3dac7ebb1fa228f80ad9788a5d12/uWuGi8F.png)
[Photo by Christopher Gower](https://unsplash.com/photos/m_HRfLhgABo)

## 寫在後面
從 Windows 轉 MacOS 真的會有一段陣痛期，還要一直巴著用 Mac 的朋友問一些感覺說出來都有點羞恥的問題，但其實你會想到的問題應該網路上都有很多人想知道答案，只要 Google 一下應該都會找到想要的解答，只要用雪亮的眼睛去好好鑑定答案的真實性與正確性，應該都能輕鬆解決問題。

（像是我剛剛不知道全形頓號怎麼打? 就查了 ”Mac 全形 頓號” 然後就知道要按 (|) 這個鍵就會跑出來了）
讓我們一起微痛轉換作業系統吧！一起交流好用的地方 XD

本文節選自 ASTRO Camp 學員薑薑薑薑的 iThome 鐵人賽文章[ Day 2 Mac 環境小工具](https://ithelp.ithome.com.tw/articles/10266103?sc=rss.iron)

---

>  👩‍🏫  __課務小幫手：__
>  
> ✨ 想掌握 Ruby on Rails 觀念和原理嗎？
>
> 我們有開設 🏓 [Ruby on Rails 實戰課程](https://5xruby.tw/courses/ruby-on-rails) 課程唷 ❤️️
>
>


Ruby on Rails 入門 - 幫助你開發的 Mac 小工具分享

<small>Photo by [Danielle MacInnes](https://unsplash.com/@dsmacinnes) on Unsplash</small>

## 什麼是 Ruby on Rails ?

Ruby on Rails 是一種結合 Ruby 這款程式語言與 Rails 函式庫的一種網頁程式框架！

Ruby 以自然、簡潔、快速著稱，全面支援物件導向程式設計。

而 Rails 則是 Ruby 廣泛應用方式之一，在 Rails 上設計出一套獨特的 MVC 開發架構，不但減少了開發中的問題，更簡化了許多繁複的動作。

所以在學習 Ruby on Rails 的之前，我們必須要先掌握 Ruby 這款程式語言！

但......我應該要去哪裡學習？

### 友善的網路世界

網路上對於 Ruby on Rails 的教學資源不計其數，但對於完全程式新手來說，尋找一個有系統且免費的學習平台實在是相當不容易...... 

> ~~而且通常免費的東西都沒有好貨~~

喂！不要亂講～這世界有很多樂於分享的人，願意無償的教學，只為了讓程式的世界更美好！

在我成為工程師之前，我也不覺得這世界上有這麼多熱心的人，但當你真正的踏入這個領域後，你會發現人性還是本善的呢。

今天我也要擔任那個傳遞善心的人，我會把我篩選過後的免費學習資源推薦給看文章的你 / 妳！

## [The Odin Project ( 全英文 ) ](https://www.theodinproject.com/courses/ruby-on-rails)

主打全課程免費的 Odin Project 是一個開源專案，從一開始就以教學做為核心精神，整個網站的目標是希望可以幫助對於網站開發有興趣的人能夠從零開始到獨當一面。

從 Ruby 教到 Ruby on Rails 甚至是 JavaScript 以及 Git。

最有幫助的地方在於，每一個章節都有幫助初學者編列作業以及目標，可以快速的讓你理解這個章節應該要學會什麼！

課程的後半段也會有小型專案實作，上傳至 GitHub 展示。

這樣的流程能夠幫助初學者理解從建立檔案到呈現在瀏覽器上的過程，未來更能對於不同的工具舉一反三，利用模式比對的方法找到解決方案！

### 特點：
1. 適合新手上路，內容平易近人。
2. 涵括前後端的基礎教學，甚至還有 Git！

---

> **冷知識分享：**
>
> 為什麼叫做 Odin Project？
> Odin 就是我們熟悉的希臘神話人物，宇宙之王。
> 
> 相傳他為了獲得魯納斯的智慧而把自己的右眼給犧牲了。
> 
> ~~所以這邊就是希望我們可以貢獻生產力直到右眼失明。~~ 

喂～當然不是這樣啊，網站開發可不是一個簡單的任務，這個故事是希望我們可以像奧丁一樣渴望知識，不斷地成長～

但眼睛還是要顧ㄟ，一天一顆葉黃素，讓你眼睛保得住。

## [Codecademy ( 全英文 )](https://www.codecademy.com/learn/learn-ruby)

Codecademy 是一個提供基礎程式教學的網站，在上面可以學到基礎的 HTML、CSS、Ruby、Rails 等等，都是不需要收費的！

但其實它也有提供更進階的課程，需要升級付費才可以使用的選項，但基於今天是介紹免費的資源，就不著墨太多付費課程的內容。

對於新手來說這個網站有很大的特點是它提供了線上的開發環境，讓你可以不需要安裝編輯器就可以開始學習，從基礎的 Ruby 語法開始上手，這樣的環境對於真正的新手來說，可以先拋開環境設定以及安裝程式語言的問題，直接地開始學習程式語言。

網站還會根據帳號的學習程度來製作百分比提示你的學習情況，能夠讓新手理解自己大概學了多少的程度，而且 Codecademy 也有一個強大的社群討論版，能夠在上面找到問題的答案，或是主動發文提問，也能夠大幅度的加速學習效率！

### 特點：
1. 線上編輯環境，免去環境設定問題。
2. 搭配提示直接動手寫程式，快速顯示成效。
3. 介面清晰的討論版，快速掌握問題。

## [為你自己學 Ruby on Rails ( 中文 )](https://railsbook.tw/)

> **衷心建議：**
>
> 新手要記得先打好程式語言的基礎觀念，否則直接學習框架是一件危險的事情。
>
> 尤其是 Rails 有許多的黑魔法，更應該要打好基礎！

剛剛推薦了一個全英文的免費學習資源，這邊幫大家補上一個中文的免費學習資源。

我知道你們要說這是在業配我老闆的書，但相信我，這本書真的有非常多基礎的觀念，而且我知道中文對於初學者來說有多麼的友善～

但為了讓想窺探框架的人能夠有所獲，這本書中強調了許多關於 Ruby 的基本知識，讓你能夠理解 Ruby on Rails 的黑魔法以及他能做些什麼！

最有趣的地方就是書中有許多圖片以及口語化的敘述，讓人能夠抽象化思考過程的本質，針對 Rails 的 MVC 架構 以及 Route 也有著有趣的說明，使初學者能夠快速地了解不同物件之間的交互作用！

書本尾段的購物車實作，更能讓人體會到程式語言這麼抽象的東西，到底是如何呈現在網頁上？

跟著做過一次之後，才能體會到那些抽象的東西，到底是從哪裡傳向哪裡，在這過程中又得到什麼？轉變了什麼？原來電商是這樣子啊......

啊......不說了不說了，我也要來去做一遍，不然要落後給別人了呢～

### 特點：
1. 中文書，看起來就是爽！
2. 使用會發生在身邊的案例來解釋重要觀念。
3. 手把手的環境安裝教學。

## [UPCASE by thoughtbot ( 全英文 )](https://thoughtbot.com/upcase/rails)

> **衷心建議：**
>
> 看著影片學習刻畫雖然會有短暫的成就感。
> 
> 但別忘記要內化成自己的東西，才有辦法舉一反三，做出自己的作品唷

[thoughtbot](https://thoughtbot.com/) 本身是一間設計以及開發諮詢的公司，針對客戶的 APP 提供諮詢和顧問的服務！

他們在指導客戶團隊時，發現缺少了許多中等級別的教材，所以他們決定建立 [UPCASE](https://thoughtbot.com/upcase/rails) 這個網站來填補那些空白！

除了 Rails、Git、JavaScript 之外，甚至還教你用 Vim 的課程都有提供，相信我，學會 Vim 這個輸入法，對於撰寫程式的速度有著極大的提升......

不小心離題了，總之這是個難度比前面兩個免費資源稍稍高一些的網站！

但當你有確實的學習並理解前面兩個免費資源後，這個網站對於提升你的理解又有更大的幫助。

雖然 [Intermediate Ruby on Rails](https://thoughtbot.com/upcase/intermediate-ruby-on-rails-five) 這部教學是 Rails 5 的版本，且其內容也確實稍稍難了一些，但版本對於學習 Rails 的基礎並沒有太大的不同，反而能夠看到一些有趣的寫法呢！

### 特點：
1. 下方有討論區，可以看看別人對於影片內容是如何提問的，對！提問很重要。
2. 每支影片的標題都很明顯，還有 Note 來告訴你這支影片你該學會什麼。
3. 不定期會發布深度討論 Rails 的影片。

## [Ruby on Rails Guide ( 全英文 )](https://guides.rubyonrails.org/)

等等......這看起來一臉官方手冊，是不是拿這種網站在交差了事？

你先聽我娓娓道來，這個網站的作用就像是字典一樣，當你在前面的學習資源遇到瓶頸的時候，歡迎進來這個網站逛逛，嘗試找到你不懂的名詞，裡面都會有非常詳細的說明和範例！

我知道第一次進入這個網站的時候，會有一種 我在哪 我是誰 的感覺！

以下會帶你做一次追尋答案的過程是什麼情形？

假設情境：

看著學習課程中，出現了一段沒有看過的程式碼......

```ruby
class UserController < ApplicationController
  before_action :find_user # << 這是什麼？

  def index
  ....
end
```

真是的，我完全不理解這個 `before_action` 到底是什麼東西？

登登登愣！`Ruby on Rails Guide`

這時候就派上用場了，我們先根據這個名詞出現的場合來做分析！

可以得知他在 Controller 的下面，那我們把畫面跳轉到 Ruby on Rails Guide 

![Ruby on Rails Guide](https://i.imgur.com/5S4qN6i.png)

點擊黃色框框處會彈出一塊面板，這時候我們仔細的找到 Controller 相關的標題

![Controller-Ruby on Rails Guide ](https://i.imgur.com/y4jdmFv.png)

點擊 `Action Controller Overview` 就會進入到介紹 Controller 的頁面！

勇敢地使用你網頁的搜尋功能 ( mac: `command + f`，window: `CTRL + f` )

打上 `before_action` 這時候就會協助你跳到這個名詞出現的地方，我們就可以看到關於 `before_action` 的敘述

![搜尋 Ruby on Rails Guide](https://i.imgur.com/0xGnUZ5.png)

以上，Ruby on Rails Guide 就是幫助你查找的工具，希望有幫助到你！

### 特點：
1. 絕對正統，不容質疑，基本上不會有錯誤資訊。
2. 完整度也是不容質疑，即便是工程師也還是會翻來自我檢視一下。

## 自我學習的優缺點

### 優點：

自我學習很棒的優點在於可以自行安排學習時間以及進度。

若你是一個學習速度快、自制力也很高的人 ( 英文也要很好 )，那我很推薦你可以在家裡面自我學習，畢竟參加線下課程的進度是規劃好的，若你的學習速度太快，老師也不會為了你而加快進度。

在家自己學習就可以根據自己的理解來調整該學些什麼，也可以在想要休息的時候休息，比較不會有被綁死在一個地方的感覺！

### 缺點：

我認為自我學習最大的缺點在於缺乏社群團體的推力！

畢竟學習程式語言本身並不是一件簡單的事情，當自己一個人學習又找不到問題的答案時，很容易陷入自我放棄的漩渦，以及你沒有辦法驗收自己的學習程度。

怎麼說呢？假設你今天已經自學了兩個月了，但你很有可能不知道自己現在的學習情況到底是好是壞，畢竟沒有人可以告訴你現在的方向是正確的，還是其實已經歪掉了？

還有關於團體討論的問題，因為人類的腦袋很容易陷入錨定效應，若在撰寫程式的時候，沒有加入其他人的意見來激盪你的腦力，很容易寫出自己覺得很棒，但其實成效不好的程式碼！

## 自我學習的小訣竅

誰都會有需要自我學習的時候，一些嶄新的技術，或是你自己有興趣的技術都是，都會需要自己上網查看文件，看看別人的 Demo。

我自己的方式都是先看成品，了解整個運作的方式，再來想像背後的邏輯，而且不會要求自己一定要想到正確的答案，畢竟這並不是一件好事，當你被正確答案的桎梏住的時候，就更容易陷入尋找所謂正確答案的漩渦。

在一開始你可以先用自己的理解來說服自己，然後持續的吸收相關知識，看更多的討論，有些時候你就會遇到 `aha moment`，這種豁然開朗的感覺，是自我學習的時候最棒的時候了！

> aha moment 也稱作尤里卡效應：指的是人類突然理解一個以前無法理解的問題或概念時的時刻。一個以前無法解決的難題突然變得清晰和明顯。這種從不理解到自發理解的轉變往往伴隨著喜悅或滿意的感嘆。

還有在剛開始學習程式語言的時候，也能透過聯想的方式，和現實生活中的例子做連結，找到可以讓自己快速理解的方式！

## 結語

說了那麼多關於自我學習的方向和優缺點，免費學習資源其實才是這篇文章的主軸啦！

我們從上述的免費學習資源來看，到處都充滿著英文的文件和影片，這也意味著英文對於軟體工程師是不可或缺的工具！

希望不要因為是全英文就放棄掉自我學習的機會，如果對於你的英文沒有信心的話，那現在更是你練習的好機會，因為是自學的關係，你可以大方地打開你的 Google 翻譯，趁著這波自我學習順便把程式常常出現的英文記起來吧！

也要謹記學習框架的優缺點，不要本末倒置，學習好 Ruby 這個程式語言會讓你事半功倍喔！

---

>  👩‍🏫  __課務小幫手：__
>  
> ✨ 想掌握 Ruby on Rails 觀念和原理嗎？
>
> 我們有開設 🏓 [Ruby on Rails 實戰課程](https://5xruby.tw/courses/ruby-on-rails) 課程唷 ❤️️
>
>


Post - 自學 Ruby on Rails 推薦的免費資源 TOP 5

自學 Ruby on Rails 推薦的免費資源 TOP 5

## 為什麼需要知道 HTML ？

![](https://i.imgur.com/RopQh7S.jpg)

如果你的工作會和網站工程師溝通，或是你的工作是網路行銷、網頁設計師、數位產品 PM ，時常會需要和工程師溝通網頁需要新增哪些功能、會出現哪些文字、樣式會是什麼樣子，或者網路行銷要調整網站的 SEO 等，都需要了解網頁的 HTML 架構，至少要理解眼前所見的頁面、圖像、元件，背後都是由 HTML 組成。

## 什麼是 HTML ?

HTML 是一種用來建構網頁的 **標記語言** 而非程式，可以想像網頁就像一頁文件，而文件內會有標題、內文、圖片、頁尾等元素。**HTML 是告訴瀏覽器網頁上有哪些標題、圖片、文字等**。

![什麼是 HTML?](https://i.imgur.com/TAaSk4L.jpg)

而這些元素包含了標籤、內容，不同的元素，會用標籤 `<>`  標示出來，例如標題 `<h1>` 、網頁內容 `<body>`、圖片 `<img>` 等。
呈現方式會像以下：

![什麼是 HTML? 標記語言說明](https://i.imgur.com/fxISuUE.jpg)

少部分標籤沒有結尾標籤，例如圖片：

![什麼是 HTML? 圖片標記](https://i.imgur.com/jRzK3uI.jpg)

附帶一提，在上方圖片標籤 `<img>` 可以看到裡面包含了 `src` 和 `alt` 這些都是這個標籤的『**屬性**』；每個標籤都有提供不同的屬性，讓這個元素標籤的資訊能夠更完整。

## 什麼是 Emmet ？

![Emmet](https://i.imgur.com/EhQk0mI.jpg)

如果你開始寫 HTML ，會發現他的文件可能有很多細節需要注意，讓我們看一份最基本的 HTML 文件：

![什麼是 Emmet ？](https://i.imgur.com/UKcjjZ9.png)

可以從上面看到，一段文字開頭和結束，都會出現標籤。當網頁的元素越來越多時，工程師可能會漏寫一個標籤而導致頁面跑版(和預期的顯示結果不同)或是要重複寫同樣的標籤等。

因此，就有 [Emmet](https://emmet.io/) 這個套件，讓工程師可以寫短短幾個代表字和快捷鍵，就能自動產生完整的標籤。減少漏寫標籤，或是一次產生多筆的標籤等。加速開發的效率。

除此之外是他在主流的開發者用的編輯器(用來寫 HTML 和程式的工具)像是 [VS Code](https://code.visualstudio.com/)、[Sublime Text](https://www.sublimetext.com/) 還有線上即時渲染的網站 [codepen](https://codepen.io/) 、[JS Bin](https://jsbin.com/?html,output)、[JS Fiddle](https://jsfiddle.net/) 都可以使用喔！

現在就開啟你熟悉的編輯器，和我一起試試看以下這些常用的 Emmet 語法吧！ ✈️

---

### 1. `>`：建立裡面的(子層) Tag

Emmet 範例： 輸入 `ul>li>p` + `Tab 鍵`

HTML 結果：

```html
<nav>
  <ul>
     <li></li>
  </ul>
</nav>
```

讓我們來看一下實際示範：
![](https://i.imgur.com/gPetJ6q.gif)

### 2. `+`：建立接連著(兄弟層)的 Tag

Emmet 範例：輸入 `div+h1+h2` + `Tab 鍵`

HTML 結果：

```html
<div></div>
<h1></h1>
<h2></h2>
```

### 3. `*` ：建立重複的 Tag

Emmet 範例：輸入 `ul>li*5` + `Tab 鍵`

HTML 結果：

```html
<ul>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
</ul>
```

### 4. `{ }` ：Tag 內的文字

Emmet 範例： 輸入 `ul>li*5{這是清單}` + `Tab 鍵`

HTML 結果：

```html
<ul>
  <li>這是清單</li>
  <li>這是清單</li>
  <li>這是清單</li>
  <li>這是清單</li>
  <li>這是清單</li>
</ul>
```

### 5. `$` ：建立編號

Emmet 範例：輸入 `ul>li*5{清單編號：$}` + `Tab 鍵`

HTML 結果：

```html
<ul>
  <li>清單編號：1</li>
  <li>清單編號：2</li>
  <li>清單編號：3</li>
  <li>清單編號：4</li>
  <li>清單編號：5</li>
</ul>
```

### 6. `@-` ：編號降冪 (需再放在 `$` 之後)

Emmet 範例：輸入 `ul>li*5{清單編號：$@-}` + `Tab 鍵`

HTML 結果：

```html
<ul>
  <li>清單編號：5</li>
  <li>清單編號：4</li>
  <li>清單編號：3</li>
  <li>清單編號：2</li>
  <li>清單編號：1</li>
</ul>
```

### 7. `[ ]` ：輸入屬性

Emmet 範例： 輸入 `a[href="www" target="_blank"]` + `Tab 鍵`

HTML 結果：

```html
<a href="www" target="_blank"></a>
```

### 8. `.` / `#` ：建立 `class` 或 `id` 命名

Emmet 範例： 輸入 `.box` 或 `#name` + `Tab 鍵`

HTML 結果：

```html
// .box 👇
<div class="box"></div>

// #name 👇
<div id="name"></div>
```

想要知道更多 Emmet 細節嗎？歡迎查閱 Emmet 文件 👇
[https://docs.emmet.io/cheat-sheet/](https://docs.emmet.io/cheat-sheet/)

<br>

---

### 推薦課程

> 👩‍🏫 課務小幫手：
>
> ✨ 想了解更多 HTML / CSS 知識和技巧嗎？
> 也歡迎報名課程 👉 [網頁前端設計女性專班](https://5xruby.tw/courses/code-for-girl)

五倍紅寶石・專業程式教育機構

ASTRO Camp

線上課程

短期課程

技術文章

五倍消息

技術文章

HTML/CSS 使用 Tailwind CSS 遇到的小問題

新手全端工程師的職場成長歷程 - 絕對要有的 Git 觀念與習慣

零基礎也能懂的 CSS - 概念篇

順利實作你的第一個網頁畫面

認識網頁開發從生活開始

Ruby on Rails 入門 - 幫助你開發的 Mac 小工具分享

自學 Ruby on Rails 推薦的免費資源 TOP 5

快速生成 HTML！Emmet 語法大公開！

訂閱文章

電話 | (02) 2331-5247

信箱 | [email protected]

地址 | 10046 台北市中正區衡陽路 7 號 5 樓

專業課程

ASTRO Camp

線上課程

短期課程

關於我們

關於五倍紅寶石

聯絡我們

媒體報導

加入我們

部落格

技術文章

五倍消息

幫助與政策

常見問題

隱私權政策

服務條款