CSS 裡的「寬度，最大寬度，最小寬度」分別是什麼呢？
➊ width 用來設定元素的寬度，且 width 作用範圍僅在 content-box 區塊
➋ max-width → 用來設定元素的最大寬度
➌ min-width → 用來設定元素的最小寬度

學習

音樂藝文

以行動支持創作者！付費即可解鎖

從零開始，記錄網頁設計的學習過程。

學習如何學習

CSS 習作｜響應式網站・width、max-width、min-width 是什麼？

我想分享給那些曾有過相同感受的同學，覺得自己能力不適合、在學習中感到自卑想要放棄的那些時候。而後半篇則想分享自己對於老師、助教的感謝。

職場產業

親子與教育

課程心得｜六角學院切版直播班：學習失敗、做不擅長的事

本篇為隨筆紀錄，將看完的影片疏理為短小筆記 。
特別有感的是，現在回頭看，發現影片中每個提及的知識點或是誤區自己都踩過好幾輪了，這是在學習及練習中很常會反覆發生、需要注意的地方，提醒自己在接下來的練習中，能將老師提及的思維及作法吸取並應用。

健康與情感

CSS 習作｜初學 CSS 必經的犯錯道路

本篇將不同 Sass 學習資源彙整在此，作爲學習筆記，大多來自 w3schools 和六角學院，相關連結也一並記錄下來，以便可以隨時查看、更新。

文化生活

CSS 習作｜Sass 入門學習資源，使用 VS Code 插件 Live Sass Compiler

養成 1px 都不差的切版練習，紀錄我的訓練過程。

<div class="draft-block draft--p left">阿太好了，看到前輩的筆記，收穫良多！希望我也能早點跨過這個檻இ௰இ</div>

修行習作｜Pixel perfect kata 學習筆記

本篇習作內容進入到 CSS 排版實作，一起瞭解 Flexbox，開始第一個網頁排版吧 💪🏻！


網頁教學如此淺顯易懂，就是金魚都能懂的網頁設計入門啦
前端的聖品亦也是前端的毒品，用過就回不去了，這是Amos最常聽到的內心話了，究竟今天談的內容是前端的聖品還是前端的毒品，我想就留待各位去體驗了，歡迎各位把您的心得留在下方留言區一起跟Amos分享喔。
歡迎Line搜尋『@CSScoke』加入Amos公開帳號
#網頁設計 #CSS教學 #網頁教學 #CSScoke #Flex教學

本影片同步發表於 2019 iT 邦幫忙鐵人賽
https://ithelp.ithome.com.tw/articles/10205967

Line搜尋「@csscoke」加入CSS可樂公開帳號，可以收到 Amos 第一手資訊喔

👍若你喜歡我的影片，歡迎利用下方任一方式斗內支持我，謝謝您
💰打賞 AMOS 喝杯咖啡 
❤️街口支付 901377766
❤️綠界 https://p.ecpay.com.tw/BBEA2
❤️歐付寶 https://tinyurl.com/amos-css-coke

完整版30集 - 金魚都能懂網頁設計入門
https://www.youtube.com/playlist?list=PLqivELodHt3iL9PgGHg0_EF86FwdiqCre

阿莫師の網頁料理室
https://www.youtube.com/playlist?list=PLqivELodHt3j3enODFSs2n1EzzXcZPvO9

大師常來聊
https://www.youtube.com/playlist?list=PLqivELodHt3igUDMZVPK_Z5rLbhSg1ZvB


超入門 - 金魚都能懂的網頁教學(2HR)
https://www.youtube.com/watch?v=uFXweZepi1o&list=PLqivELodHt3iF_Spzdz_6LsOSPOyfDx-R

Bootstrap3 CSS原始碼導讀
https://www.youtube.com/playlist?list=PLqivELodHt3hlbKqIIFlQ9_wajptq0UTU


背景圖片來源
https://unsplash.com/photos/g48qHsWhvPw
■□■□■□■□■□■□■□■□■□■□■□■■□■□■□■■□■□■□■□■□■□■□■□■
每周二晚上直播 https://www.youtube.com/c/CSScoke/live
■□■□■□■□■□■□■□■□■□■□■□■■□■□■□■■□■□■□■□■□■□■□■□■
訂閲看最新影片 https://goo.gl/nXQfZG
■□■□■□■□■□■□■□■□■□■□■□■■□■□■□■■□■□■□■□■□■□■□■□■

金魚都能懂網頁設計入門 : 排版的聖品 - 鐵人賽第十三天 | 網頁教學 | CSS教學 | Flex教學

大家好，我是卡斯伯老師
- Flex 語法太複雜，觀看文件不是很能理解嗎？
- 想要直接看線上示範，認識每個語法嗎？
- 想知道 Flex 有哪些延伸運用嗎？
本次直播，就來介紹 Flex 的語法以及延伸運用！
直播文件：https://hex.school/yjksF

時間：5/18 20:00

CSS Flex 超詳解，彈性版型任你操控！

歡迎Line搜尋『@CSScoke』加入Amos公開帳號

今天來玩玩 CSS Flex的功能，與大家分享一下 Flex 的一些記憶方式跟小技巧
前面等待時間有跟大家聊了一下
若想跳過可把時間跳到3分40秒處開始喔
#網頁設計 #HTML教學 #網頁教學 #CSScoke

👍若你喜歡我的影片，歡迎利用下方任一方式斗內支持我，謝謝您
💰打賞 AMOS 喝杯咖啡 
❤️街口支付901377766
❤️綠界https://p.ecpay.com.tw/BBEA2
❤️歐付寶 https://tinyurl.com/amos-css-coke
■□■□■□■□■□■□■□■□■□■□■□■■□■□■□■■□■□■□■□■□■□■□■□■
每周五晚上直播 https://www.youtube.com/c/CSScoke/live
■□■□■□■□■□■□■□■□■□■□■□■■□■□■□■■□■□■□■□■□■□■□■□■
訂閲看最新影片 https://goo.gl/4ZDGk9
■□■□■□■□■□■□■□■□■□■□■□■■□■□■□■■□■□■□■□■□■□■□■□■
CSS GRID / CSS格線好好玩【完整版】
https://youtu.be/fYcz3FUqv7M

過年連續直播用bootstrap切版五天紀錄---第一天
https://youtu.be/aYEL_4ugzXQ

過年連續直播用bootstrap切版五天紀錄---第三天
https://youtu.be/NyStE4dmQtU

過年連續直播用bootstrap切版五天紀錄---第四天
https://youtu.be/3WJHAXlc3vA

過年連續直播用bootstrap切版五天紀錄---第五天
https://youtu.be/AjSxgBJBmqI

玩轉 CSS FLEX | CSS教學 | 網頁教學 | 網頁設計

CSS 習作｜Flexbox 網頁排版術

box-sizing 是 CSS 屬性的一種，它使我們可以改變盒模型的計算方式。

軟體開發

CSS 習作｜Box Sizing 盒模型計算方式

本篇習作加強自我對 CSS Box Model 的觀念，也是在實作練習中發現自己雖然看似理解了盒模型，但其實在應用上尚不熟悉，因此藉由筆記重新梳理和練習，將 CSS Box Model 的基礎觀念整理並釐清，一起來看看吧！


網頁教學如此淺顯易懂，就是金魚都能懂的網頁設計入門啦
網頁到底是怎麼排出來的呢? 為什麼我明明照著步驟做就是會壞掉? 事實上網頁設計中有許多小技巧是需要特別注意到的，尤其是網頁區塊的尺寸計算，這其中可以簡單的區分兩種尺寸的記憶方式，今天就跟著Amos一起來了解吧。
歡迎Line搜尋『@CSScoke』加入Amos公開帳號
#網頁設計 #CSS教學 #網頁教學 #CSScoke

本影片同步發表於 2019 iT 邦幫忙鐵人賽
https://ithelp.ithome.com.tw/articles/10204303

Line搜尋「@csscoke」加入CSS可樂公開帳號，可以收到 Amos 第一手資訊喔

👍若你喜歡我的影片，歡迎利用下方任一方式斗內支持我，謝謝您
💰打賞 AMOS 喝杯咖啡 
❤️街口支付 901377766
❤️綠界 https://p.ecpay.com.tw/BBEA2
❤️歐付寶 https://tinyurl.com/amos-css-coke

完整版30集 - 金魚都能懂網頁設計入門
https://www.youtube.com/playlist?list=PLqivELodHt3iL9PgGHg0_EF86FwdiqCre

阿莫師の網頁料理室
https://www.youtube.com/playlist?list=PLqivELodHt3j3enODFSs2n1EzzXcZPvO9

大師常來聊
https://www.youtube.com/playlist?list=PLqivELodHt3igUDMZVPK_Z5rLbhSg1ZvB


超入門 - 金魚都能懂的網頁教學(2HR)
https://www.youtube.com/watch?v=uFXweZepi1o&list=PLqivELodHt3iF_Spzdz_6LsOSPOyfDx-R

Bootstrap3 CSS原始碼導讀
https://www.youtube.com/playlist?list=PLqivELodHt3hlbKqIIFlQ9_wajptq0UTU


背景圖片來源
https://unsplash.com/photos/g48qHsWhvPw
■□■□■□■□■□■□■□■□■□■□■□■■□■□■□■■□■□■□■□■□■□■□■□■
每周二晚上直播 https://www.youtube.com/c/CSScoke/live
■□■□■□■□■□■□■□■□■□■□■□■■□■□■□■■□■□■□■□■□■□■□■□■
訂閲看最新影片 https://goo.gl/nXQfZG
■□■□■□■□■□■□■□■□■□■□■□■■□■□■□■■□■□■□■□■□■□■□■□■

金魚都能懂網頁設計入門 : 區塊尺寸計算 - 鐵人賽第八天 | CSS教學 | CSS盒模型 | 網頁教學

CSS 習作｜認識 Box Model 運作原理，padding 和 margin 的使用時機是什麼？

本篇習作內容，除了練習六角預習影音內的常用語法章節外，也額外整理了其它常用於文本的 HTML 元素，希望能透過這樣的整理，在未來設計結構更複雜的網站介面內容時，能扎穩根基。

HTML 習作｜常用於文本的元素：<p>、<h1>、<span>、Text Formatting

display 是一種 CSS 屬性，指定「 是否 / 如何 」顯示元素，而每一個 HTML element 都有預設的 display value，然而在預設的情況下，新手如我在剛接觸時常踩入深不見底的盲區，
一起來釐清學會辨識吧！

Draw.com