五倍直播間

Blogs - Sidebar

# 2022 最適合你的前端框架： React 發展趨勢和前景！

爲什麼你該了解 React？
因為世界級知名的網站，如 Netflix、Uber、Airbnb 等等都採用 React。前端框架在使用率上， React 佔據了不可撼動的位置，而近期這股風潮，更是吹向台灣各大電商，紛紛採用 React 前端框架開發。

如果你會這個前端開發框架，幾乎是拿到年薪百萬的入場券！
因此，如果你正在思考你的下一個程式語言該學什麼，你沒看錯，是下一個程式語言， 因為如果是初學者的話，現在是開始要學第一個程式語言的話，可能要依據你周邊資源，才能決定哪個語言更適合你！推薦你看這篇[「自學程式現場」新手應該要學什麼程式語言？](https://kaochenlong.com/2021/09/17/your-first-programming-language/)

綜上所述，如果正在思考「你的下一個程式語言該學什麼」
不妨到五倍紅寶石 Youtube 看看這場[直播](https://www.youtube.com/watch?v=WOSdD7_dywo)。以下為五倍紅寶石課程團隊為大家準備的重點整理！

## 江湖在走，工具要有！2022 為什麼 React 還是受歡迎？

### 為什麼國內外企業愛用 React ？

1. Data Binding 框架的出現：以往沒有使用框架時，在 1.資料改變後，還需 2.透過操作 DOM (Document object model) 來告訴畫面要怎麼變動，過程繁複，且 code 寫起來會比較囉唆。但透過 React 的 data binding，便能在改變資料的當下，同時更新畫面，對團隊成員來說，更能注重在程式邏輯面。
2. Component (元件) 化：工程師們可以透過分工，每個人負責設計不同的元件，如此不會有重工的問題，且功能、外觀相近的元件，也可 (在微調後) 輕鬆的在專案內被重複使用，如常出現的「下一步」按鈕，便可透過更改文字及綁定的 function，達到重複使用的效果。
3. React Native：可以用 React  開發 iOS 或是 Android APP。以往在開發手機 App 時，可能得用 Swift 寫一個放在 iOS 系統的 APP、再用 Kotlin 寫一個放在 Android 系統的 APP，工程師要開發及維護兩個專案，是很辛苦且費時的一件事。但現在有許多企業或是區塊鏈的公司，他們的 APP 多數是以 React native 開發，便能讓你用一個專案，同時部屬到 iOS 跟 Android。擁有比起其他市面上的框架，所做不到的強大功能。

### 業界哪些企業使用 React ?

1. 國外企業：Facebook, Disney+, Netflix, Instagram, WhatsApp, Dropbox, Line 部分功能
2. 國內企業：蝦皮、東森購物

### 對於 React 未來發展的看法？

1. React 只開發及提供 React 框架，所使用的語法為標準的 JavaScript。React 是 JavaScript 的 framework，JavaScript 可以寫前端、後端、APP，通吃所有的平台，JavaScript 可以做到的， React 也可以做到，只要有 Web 存在的一天，就會有網站開發的需求。
2. React 維護者是 Facebook，有一整個團隊在營運 framework，版本迭代的頻率高，如有出現嚴重 Bug，也會即時快速更新。

## 工具升級，謹慎更新！React 18 新版本

### 對於 React 18 有什麼看法？使用後有什麼立即的影響嗎？
這次版本的修改，主要是程式的核心效能，對一般的開發人員來說，並不會有任何的影響。唯一要注意的 React 18 是不支援 IE 11，如果公司專案還需要顧及 IE11 的話，建議維持在 React 17。從 React 17 升級為  React 18 只需要改一行程式進入點，而其他程式碼完全相容。

### 效能提升有何好處？
改善 Automatic Batching 問題，以前某些狀態下會造成過多 render (渲染) 的問題，升級為 React 18 後，為了要讓網站效能好，就不再做過多的渲染。再者，升級後的 React 18 多了一些新的函式，更能優化專案效能。

## 工具在手，希望無窮！針對不同階段工程師學習 React 建議

### 對於尚未學習過前端框架的工程師，想以 React 為優先學習，會給予什麼樣的建議？

學習 React 難度一開始會比較高，學習之前必須要先知道物件導向程式語言，且 React 的撰寫過程中，常常使用到 JavaScript ES6 的語法，所以需要具備 JavaScript ES6 的一些基礎知識，如：Functions, 變數宣告等等，會更方便寫 React。
在學習前，可以嘗試不看官方文件，使用純 JavaScript 寫出 To Do List，至少對 JavaScript 熟悉，也清楚事件的傳遞機制，在這樣的情況下學習 React 會更適合。在學習 React 後，才會知道 React 的優勢可以解決什麼樣的問題。

### 對於已有 React 基礎的工程師 要如何再更上一層樓？
Redux 為狀態管理的套件，被 React 發揚光大，如果工程師對 React 已經熟悉了，接下來可以學習 Redux。React 的資料主要傳遞方式為，透過 props 由父層傳到子層，而這樣的做法，在專案越發龐大的情況下，為了讓某個很深的子層拿到父層的資料，在資料一層一層的傳遞下，會造成一種叫做 props drilling 的現象 (drill 即為鑽的意思)。
Redux 便可解決這種問題，Redux 透過將資料置放於一個全域的 state，在設立資料的狀態與規則後，便可(視需求)傳遞到應用程式的各個角落，而避開 props drilling 的問題。
當專案非常龐大的時候，又需要讓所有的 component 存取某些資料的話，Redux 就是很好的選擇！

> 👩‍🏫 課務小幫手：
> ✨ 想掌握 React 觀念和原理嗎？
> 我們有開設 [ React 全攻略入門班](https://5xruby.tw/courses/react) 課程唷 ❤️️

2022 最適合你的前端框架： React 發展趨勢和前景！

# HTML、CSS 和 SEO 間的緊密關係

如果要讓自己的網站在搜尋引擎頁面的第一頁，最為關鍵的是該網站需要提供豐富且有意義的內容，藉此給使用者一個良好的體驗；也要避免塞入過多無法成意的關鍵字，又或是提供很多無意義的外部連結來獲取流量，一旦搜尋引擎查到了，就會給予扣分的懲罰，進而影響搜尋引擎上的自然搜尋排名。

當然你可以靠著買廣告讓網站出現在搜尋的第一筆資料，但是除了花錢之外，以長遠的角度來看，藉著完整的網頁架構，讓搜尋引擎在判讀時，輕鬆知道你所提供的服務，並根據你的架構是否完整來判斷你的網頁品質，在搜尋引擎的計算下，分數越高搜尋頁面的排序也就會越前面。

身為開發團隊，無不希望網站的自然排序能夠越前面越好，可以快速吸引使用者瀏覽和消費。如果要維持好的自然搜尋排序，你可以從哪些方面著手呢？雖沒真正的數據證明，但根據經驗來看，在 HTML 裡有可能影響 SEO 有幾個要特別留意的標籤，接下來將做更仔細的說明。

## 如何優化 ##

### HTML 端

- title：網站在搜尋頁面上的名稱。建議落在 27 個中文字或是 56 含空格的英數字。不宜過短或太長，並且強調重點，讓搜尋引擎或是消費者，一眼看懂這個網站所提供的服務。
- meta description：使用者在搜尋時看到的網站簡介，大約 80 個中文字左右以符合搜尋引擎規格。不要過度使用關鍵字去堆疊成無意義的字詞。

![SEO](https://images.ctfassets.net/8er52l3j5u76/70FC8YBETq7mdBnq2x2C0B/0d32823150d01c4290ad2bdc89b096d5/DVCNxvP.png)

- 善用語意化標籤：在適當的位置用合適的標籤，例如 `h1` 到 `h6` 是用於標題的，`p` 適用於段落的。讓搜尋引擎可以正確判讀內容，並推薦給需要的使用者。
- 圖片可以使用 `alt` 屬性加以說明當作替代文字。當圖片失效無法顯現，瀏覽器則會出現替代文字。
- 網頁必須要有 `charset` 的宣告。其實宣告對 SEO 本身沒太大影響，但如果因為沒有做好宣告，導致亂碼的問題，就會讓跳出率變高。

### CSS 端

- 謹慎使用 `display：none` ：因為搜尋引擎會過濾掉 `display:none` 其中的內容。
- 網頁如果有圖文並茂並且有多媒體內容可以讓訪客的時間拉長，使用者的停留時間越久，搜尋引擎會認為這個網站正在提供有價值的服務給使用者。
- 網頁內應避免有隱藏連結，或是太小字或太小尺寸的圖檔連結：明明網頁存在的內容，卻設計為隱藏，會被搜尋引擎視為欺騙，進而影響排名。
  - 白色的背景用白色的文字。
  - 將文字的字體大小設為零。
  - 將連結至於非常小的文字或是圖片上。
- 在網頁上設計方便的社交按鈕，透過有效分享提升在搜尋引擎上的可信度。

#### 如果你是前端工程師

透過技術提昇網頁的價值，寫出精簡且架構完整的網站，當搜尋引擎在爬資料的同時，就可以快速透過語意標籤來找到你的網站，進而推薦給適合的使用者使用或消費。

#### 如果你是專案經理

專案經理若能理解網頁的架構和程式原理，這對開發效能會有一定程度的幫助。甚至前端畫面需要討論修改時，專案經理也能因為有「共同語言」，減少溝通阻礙，加速頁面調整的速度。

#### 如果你是行銷人員

當然如果定期的觀察，也許是兩週或是一個月，觀察到站流量是否有突然增加或是減少的現象，如果有應該立即找出問題，例如關鍵字的熱搜度改變，或是按鈕的點擊不直覺等，好適時調整網頁內容以符合使用者體驗，當品質分數越高，自然會引進流量。

## 小結

擁有基本的的前端技術，無論是在技術或是行銷領域都是一件加分的事情，如果你想認識前端，掌握高流量的秘密，推薦給你五倍紅寶石[前端網頁設計女性班](https://5xruby.tw/courses/code-for-girl)，課程強調頁面規劃與結構設計，除了基礎教學外，也提供許多實務上專案合作時的技法，讓業界經驗豐富的老師 - Amos 一次傳授，讓你課間結束就能實作出屬於自己的網頁！


HTML、CSS 和 SEO 間的緊密關係

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 使用 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) 課程唷 ❤️️
>
>


技術文章