Sass 我們應該大部分的人都有聽過那它到底是什麼東西呢??我們先來介紹它到底是啥 維基百科https://zh.wikipedia.org/wiki/Sass...
寫CSS最痛苦的事情是什麼？ 介紹SCSS之前，先想想寫CSS最痛苦的地方是什麼？ 寫法很囉唆 不容易維護 例如以下這個例子 div { color: #...
大家好，我是 Eric。 我們今天來到了 CSS 篇章的最後一部份，關於 CSS 的編碼標準及 SCSS/Sass。如同我們在 HTML 的編碼標準裡提到的，這...
今天，我們要先將 scss 導入專案中，scss 是 css 的預處理器，可以使我們將樣式做許多管理，首先，我們需要將 scss 下載下來，輸入指令 npm i...
繼上次的 ESLint 後，這次要來介紹的是 StyleLint，那就廢話不多說開始吧！ StyleLint StyleLint 一個檢查 CSS Coding...
Sass/Scss是一個非常好用的預處理器，所謂預處理器，就是可以在我們轉變成CSS之前，更有結構性寫、簡潔、清晰且好維護的 CSS 程式碼，在大型專案中可說是...
這次來要來寫上面的練習，訂房頁面會有的畫面。 先記錄左邊步驟，要寫下方畫面 HTML <div class="room__price&qu...
前言 這次找了 The F2E 前端修練時光屋 的稿件，找到了這份稿件(如果您有興趣，可以再找自己喜歡的設計稿來練功)。 其實原本滿逃避面對這件事情，因為對於...
程式設計的世界有一句俗話叫做，不要重複造輪子，意思就是說，別人已經寫好了的程式，就不要再自己重複寫了，除非是想要練習，想要了解原理，讓自己將來也有機會為別人造...
★ 首先這篇文章適合以下背景的人閱讀： 1.大概了解什麼是格線系統，甚至有用過2.有使用過 Sass 管理及撰寫 CSS，並且對基礎 Sass 語法 (SCS...
鐵人賽結束了，但說過了寫文章是 to be continued 的，今天就要先來記錄一下這個購物車頁面的 RWD 移動概念。 回歸正常學習進度，檢視了一下作業與...
前言 本篇進入到導入 SCSS，但因為 TypeScript 的特性，導致 SCSS 還要再經過一層封裝，才有辦法被讀到 .tsx 中，詳細做法會在文中說明！...
繼鐵人賽後，想把自己再推前進一點，在 30 天的陶冶後，發現每天撥一點時間思考與撰寫程式，可以提升對於程式的熟悉感，並可以爬梳自己所理解的東西，就算可能當下不了...
這次的練習是用 SMASS 跟 OOCSS 還有 BEM 的概念來練習，要呈現是下方的畫面 但我覺得有點單調，所以我就把它優化了變成這樣 HTML 本身不難，難...
音樂網頁一定要有影音可以聽，這次來分享怎麼把 youtube 影片嵌入網頁中，預計畫面如下： 看起來好像很難，是不是要寫什麼播放語法，還是怎麼寫入影片啊...其...
ul li 列表寫法用途真的很廣泛，能呈現的方式也非常多。想要呈現的方式如下： HTML 程式碼如下 <div class="prefer...
這次要寫一個新聞欄位，是用 ul li 做成的圖文並茂，標題為連結，可以點擊的樣式畫面如下呈現: 其實寫道今天有發現到 ul li 相當常被使用到，只是內容有不...
今天要來寫一個滿版圖片，但不使用 img 的標籤，想呈現下方畫面 這次做法跟先前一個練習類似，但這次有一個地方有優化了一下，就是在這個地方增加下列屬性 .con...
左邊的欄位已經寫完了，這篇開始從右側欄位開始撰寫內容，預計 header 會長這樣，左邊是一排選單，右邊有一個按鈕，給客戶做意見回饋用，如下圖: 為了要讓兩欄的...
aside 終於進入最後一個部分，也就是播放器了，預計呈現樣式如下圖： 這次用了比較多技巧跟方式，慢慢的講解吧!!HTML 如下： <div class=...
進入 aside 中間部分的編寫，想要寫成下方畫面程式碼滿簡單的，跟前面的程式碼差不多，但這次加入了畫面優化跟效果， 先來看一下 HTML 程式碼 <u...
前言 SCSS 是 CSS 的預處理器，就是替原本的 CSS 再加上一些強大的語法，讓我們在寫 CSS 的時候可以更加直觀，相關說明可以查閱 官方文檔 ，本篇就...
這次要寫一個播放器的清單，在編寫之前，我先把 navbar 優化了一下，如下圖呈現的樣式，但我還是沒有研究出來 search 要怎麼對齊在 navbar 的中間...
小弟平常喜歡聽音樂，台灣音樂串流平台的始祖 KKBOX，從一推出就使用至今，也看到 KKBOX 在台灣的音樂圈越來越具有代表性，並且還有自己的風雲榜演唱會，真是...
小弟熱愛音樂，前一週自己發想一個音樂主題的頁面網站，記錄各樣的網頁撰寫方式，接下來這一週要向 KKBOX 致敬，撰寫內容如下 navbar 導覽列 左邊 si...
終於來到第一個網頁的內容結尾，通常結尾會有一個表尾，我們俗稱 footer，用來做最後的資訊用，但我個人比較喜歡簡單的樣式，所以就來寫一簡單的 footer 吧...
今天在這個網頁內嵌入一個 map 跟寫一個 form，左邊放入地圖，右邊放入註冊資訊，會如下方所示 HTML會長這樣 <section3>...
一個網頁的產生，除了跟消費者介紹產品與提供資訊外，最重要的就是要提供下單服務啦!!這次要寫的樣式如下 這次要用 ul li 的清單方式來寫一個產品下單的列表，H...
一個音樂網頁主視覺下方會有一個最新的資訊，就讓我們來寫一個三欄式的主要資訊吧!! 預計要寫如下方所示: 首先 HTML 的程式碼如下 <secti...
網站中最重要的主視覺大圖，大部分會落在 header 上，今天就來寫個 header 吧!!預計會長這樣HTML 的寫法很簡單，如下方 <div cla...
tso1158687
Eric 桓桓
Alec
神Q超人
Tim Hsu
iThome鐵人賽
看影片追技術