前言
前言 如果你需要 For 迴圈疊代一個數列的話，使用內建 range() 函式就很方便。如果需要建立一個有序的數列(ex: 1, 2, 3…)。就不適合用內建 range() 函式。那兩者關係為何？本篇文章就會帶給你一些對於 range 的基礎觀念。
前言 Flex 可以將內容物的所有元素並排成一列，使用時機是在父元素加上 display: flex;。接著內元件的排版就會以 X 軸方向由左至右排列，如果我們想將內容排序方式顛倒變成由右至左，或是由上往下，都可以透過 flex-direction 來設定。
前言 Flex 是一種網頁排版方式，現今大多數網頁都會使用 CSS 的 Flex 進行任何樣式的排版。在使用之前你必須了解 Flex 有行、列的軸線觀念以及需要建立一個外容器(Container) 並採用 Flex 來控制內元件的排版。此外 Flex 提供多種排版對齊方式，例如靠左、靠右、置中、左右對齊。
前言 寫 RWD 網頁通常可以使用框架實現自適應這種裝置的排版，例如當今嘴火紅的 Bootstrap、Tailwind、Pure.css…等。如果你要純手刻網頁或是客製化網頁，勢必需要使用到 CSS Media Queries 技巧來調整畫面樣式。當然最常見做法是先為 PC 客戶做視覺設計，接著再進行隨身裝置平板、手機。我們可以發現畫面大小是由大至小，這就稱為 PC 優先。然而在 Bootstrap 的架構是採手機優先，也就是順序是從小裝置到大裝置。
區寬度自適應 我們先舉個沒有自適應網頁的例子，建立一個 div content 的區塊，並設定寬 width: 800px;。接著我們將網頁的寬縮小看看，將會發現區塊會被遮住。第二張圖可以看到底部 Ｘ 軸出現，詳細內容必需要左右拖移才能看見。
前言 現今網頁設計開發，最基本地要求就是符合響應式網頁設計 (RWD, Responsive Web Design)。如果你聽到這個名詞，就表示你的網頁必須要支援跨平台(手機、電腦、平板…)，能夠自適應不同的設備大小。
前言 由於每一個 HTML 標籤元素都有 CSS 預設值設定，早期各家瀏覽器尚未統一這些預設 CSS。因此為了程式上的方便，我們在進行網頁前端設計時通常都會統一 CSS 預設。例如下圖是在 chrome 瀏覽器中建立一個空白網頁，我們開啟開發人員模式可以看到預設的 body 幫你加上了 margin。所以在這種情況下我們會加上 CSS Reset 將無用的 CSS 重置清空。
第15屆iT邦幫忙鐵人賽 AI & Data 組 [佳作]
第13屆iT邦幫忙鐵人賽 AI & Data 組
第12屆iT邦幫忙鐵人賽 影片教學組 [優選]