前言 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 重置清空。
前言 正規表達式是什麼？簡單來說他可以幫你定義好格式，像是註冊表單中的信箱、手機、地址…等。也就是說在 Python 中的 RegEx 可以當作格式驗證以及字串的提取功能。
前言 Python 程式語言非常好上手，以及大量函式庫支援可以減輕程式上的負擔。本篇文章就來統整 Python 程式中常見的使用方法與技巧。這些將會是實戰中常會遇到的問題，例如邏輯控制 (if…else)、迴圈 (for loop)、資料容器中的串列 (List)。
第15屆iT邦幫忙鐵人賽 AI & Data 組 [佳作]
第13屆iT邦幫忙鐵人賽 AI & Data 組
第12屆iT邦幫忙鐵人賽 影片教學組 [優選]