Example Image with Text
Use this Image with Text block to balance out your text content with a complementary visual to strengthen messaging and help your students connect with your product, course, or coaching. You can introduce yourself with a profile picture and author bio, showcase a student testimonial with their smiling face, or highlight an experience with a screenshot.
Example Text
Use this Text block to tell your course or coaching’s story.
Write anything from one-liners to detailed paragraphs that tell your visitors more about what you’re selling.
This block - along with other blocks that contain text content - supports various text formatting such as header sizes, font styles, alignment, ordered and unordered lists, hyperlinks and colors.
Example Title
Use this block to showcase testimonials, features, categories, or more. Each column has its own individual text field. You can also leave the text blank to have it display nothing and just showcase an image.
Example Title
Use this block to showcase testimonials, features, categories, or more. Each column has its own individual text field. You can also leave the text blank to have it display nothing and just showcase an image.
Example Title
Use this block to showcase testimonials, features, categories, or more. Each column has its own individual text field. You can also leave the text blank to have it display nothing and just showcase an image.
Example Curriculum
- 安裝 Chrome 瀏覽器 (2:15)
- 安裝 VS Code 編輯器 (3:36)
- 安裝 VS Code 套件 - 讓介面變成中文化 (4:17)
- 開始撰寫 HTML (6:27)
- 撰寫 h1 標籤、 p 段落 (8:11)
- CodePen 教學 - 將你的程式碼分享給別人 (4:20)
- 建立 HTML 環境 (7:40)
- HTML 環境語法
- Emmet 載入環境語法 (6:29)
- 插入圖片，了解圖片路徑規則 (8:48)
- 載入外部圖片方式 (4:30)
- 在網頁上加上 a 連結標籤 (6:18)
- 段落 p 與連結 a 的混合應用 (3:08)
- 認識 ul li 列表標籤 (8:26)
- HTML 標籤教學 - 小節作業 (3:55)
- 網頁容器介紹 (6:50)
- CSS Reset - 清空瀏覽器預設樣式 (11:42)
- display: block 區塊元素介紹 (12:39)
- display: inline 行內元素介紹 (12:15)
- display 容器特性 - 區塊跟行內 (5:49)
- div 與後代選擇器運用 (14:44)
- margin 產生外邊界距離 (11:52)
- padding 產生留白距離 (6:17)
- margin、padding 投影片介紹 (2:04)
- Box Model（盒模型）詳細介紹 (10:54)
- margin 0 auto 區塊水平置中 (10:15)
- text-align 文字水平調整 (5:16)
- 不想算盒模型的推擠？試試 CSS3 box-sizing 吧！ (5:11)
- 小節練習 (3:04)
- Flex 排版技巧介紹 (4:32)
- CodePen 講解 Flex 技巧 (1:47)
- Flex 外層屬性 (container) 介紹上集 (11:53)
- Flex 外層屬性 (container) 介紹下集 (9:20)
- 主軸介紹 - 要熟練 Flex ，必修軸線技巧 (2:13)
- flex-direction - 決定 flex 軸線 (6:16)
- justify-content - 決定主軸對齊方式 (11:45)
- 設計一個 Flex 並排選單吧！ (8:10)
- flex-wrap - 決定換行屬性 (4:29)
- align-items - 交錯軸對齊方式 (7:07)
- 透過 VS Code 插件，開啟一個即時預覽的 Web Server (5:02)
- Flex 練習前置作業 (9:26)
- Flex 小節作業 (16:50)
- Sass/CSS 模組化簡介 - 打破你對設計模式的無限想像 (7:16)
- SMACSS - 最好入門的設計模式介紹 (2:20)
- SMACSS - 教您用 Base 打好地基 (上) (4:44)
- SMACSS - 教您用 Base 打好地基 (中) (4:24)
- SMACSS - 教您用 Base 打好地基 (下) (4:55)
- SMACSS - Layout 佈局管理 (上) (3:36)
- SMACSS - Layout 佈局管理 (下) (8:05)
- 為何 CSS/Sass 需要模組化？ (3:48)
- SMACSS - 模組化核心語法 (8:49)
- SMACSS - 元件觀念講解 (3:15)
- SMACSS - 載入按鈕模組流程 (3:51)
- SMACSS - HTML 標籤優化 (3:20)
- OOCSS - 讓結構更加乾淨 (5:18)
- OOCSS - 容器與內容分離 (5:13)
- OOCSS - 容器與內容分離 - 以格線系統設計為例 (5:51)
- OOCSS - 樣式與結構分離 (6:44)
- 設計模式小試身手 (2:39)
- 為什麼需要學函式？ (1:48)
- 函式寫法教學 (4:32)
- 註冊多組函式流程 (4:23)
- 函式裡面仍可以執行函式 (4:47)
- 函式參數介紹 (5:24)
- 參數寫法-參數只存活在大括號 (2:31)
- 參數寫法-兩個數字相加工具 (3:25)
- 輸入跟輸出的重要性 (3:09)
- return 寫法教學 (6:47)
- return 宣告 let (2:40)
- return 可以有多個 (2:26)
- return 可以有多個-範例Code (5:11)
- 判斷是否為偶數 - 畫流程圖 (6:45)
- 判斷是否為偶數-寫Code流程(上) (12:19)
- let 全域與區域變數邏輯 (4:13)
- 判斷是否為偶數-寫Code流程(下) (3:59)
Example Image with Text
Use this Image with Text block to balance out your text content with a complementary visual to strengthen messaging and help your students connect with your product, course, or coaching. You can introduce yourself with a profile picture and author bio, showcase a student testimonial with their smiling face, or highlight an experience with a screenshot.
Example Featured Products
Showcase other available courses, bundles, and coaching products you’re selling with the Featured Products block to provide alternatives to visitors who may not be interested in this specific product.
