這次要把上次寫好的人員卡片來做個互動效果，讓使用網頁的人覺得不無聊，畫面預計滑鼠經過後會有這樣的效果，如下圖。 SCSS 是這樣編寫的，程式碼如下 .card...
今天筆者要來分享一個超好用的 VSCode 擴充套件給大家： 這個擴充套件好用在哪裡呢？ 減少因打錯字所浪費的時間。 不用再自己搜尋指令或參數，它會幫你全部...
DAY 13 互動式遊樂場 (Part 7) 錯誤及警告 Errors and Warnings 當你在編輯程式碼的時候，錯誤和警告都會用波浪底線來突顯出來，...
用 CSS 寫出方形不太困難，但寫出三角形真的是滿酷的一件事情，不用圖片本身去製作，而是直接用 CSS 來製作三角形的遮罩感，想要呈現的如下圖: 這次算是學到了...
DAY 12 互動式遊樂場 (Part 6) 程式碼摺疊 Code Folding 在編輯一份大檔案時，你可以把區塊內的程式碼摺疊來增加程式碼的可讀性，把目前...
每次看 Amos 老師寫程式根本就是飛快，非常羨慕有這樣的能力，也不斷透過影片跟著老師的思維再走，看他怎麼編寫網頁的，首先先把 HTML 的架構編寫好，確認架構...
DAY 11 互動式遊樂場 (Part 5) 程式改名重構 Rename Refactoring 如果你想要統一修改一個函式或變數的名字，你可以先把游標移動到...
鐵人賽寫到今天，發現到網頁的知識什麼我很熟？ 什麼我很常用？ 什麼東西寫過就忘了？ 網頁程式資料真的很多，打開 W3School 已經超多可以看，還有 jQue...
DAY 10 互動式遊樂場 (Part 4) 單行動作 Line Action 因為在寫程式的時候，我們真的會很常對某一行內的所有文字一些動作，所以 VS C...
終於又來到了這個網頁的尾聲，用 footer 來結尾，想要呈現的樣式如下： footer 的內容不用太多，但目標要明確，比如在 header 沒有呈現的補充資訊...
DAY 9 互動式遊樂場 (Part 3) 解決 Suggest 功能快捷鍵和中文輸入法衝突 由於 Windows 預設的 editor.action.trig...
音樂網頁一定要有影音可以聽，這次來分享怎麼把 youtube 影片嵌入網頁中，預計畫面如下： 看起來好像很難，是不是要寫什麼播放語法，還是怎麼寫入影片啊...其...
DAY 8 互動式遊樂場 (Part 2) 多重游標編輯 Multi-cursor Editing 這個多重游標編輯主要是指區塊選擇、選擇所有相同的選取內容或...
ul li 列表寫法用途真的很廣泛，能呈現的方式也非常多。想要呈現的方式如下： HTML 程式碼如下 <div class="prefer...
DAY 7 互動式遊樂場 (Part 1) 在 VS Code 的 Welcome 頁面中，有一個 Interactive Playground，可以幫助你認識...
這次要寫一個新聞欄位，是用 ul li 做成的圖文並茂，標題為連結，可以點擊的樣式畫面如下呈現: 其實寫道今天有發現到 ul li 相當常被使用到，只是內容有不...
DAY 6 喜好設定 今天我打算來介紹一下我自己喜歡的喜好設定，基本上喜好設定這種東西因人而異，我今天介紹的東西，如果你覺得喜歡就可以直接設定到你的 VS Co...
VS Code 說到安裝環境除了提到Anaconda之外，怎麼能不提到好用的Python的編輯器呢? 雖然就算沒有好用的編輯器也可以寫程式，不過一個好用的程式碼...
DAY 5 客製化主題 心情不好？改變顏色可以調節情緒！雖然說我很喜歡這個原本預設的黑黑的畫面，但是我今天還是會來教你怎麼修改「色彩佈景主題」和「檔案圖示主題」...
今天要來寫一個滿版圖片，但不使用 img 的標籤，想呈現下方畫面 這次做法跟先前一個練習類似，但這次有一個地方有優化了一下，就是在這個地方增加下列屬性 .con...
Hi我阿寧啦今天是第三天 要來建立專案囉 還沒下載VS Code的人我勸你是做好快點去下載喔(派VS Code真的很好用，有很多實用的擴充功能適合多種開發環境安...
DAY 4 快速上手 (Part 3) 在昨天的文章中，你應該已經對 VS Code 的介面有初步的認識了，今天我就要來教你可以對你的編輯器做什麼初步設定。 工...
本文同步發表於斜槓女紙部落格：Day3 編輯器擴充套件設定+引入Vue.js 嗨～今天要來說說我習慣使用的開發環境，由於我的mac已經設定好了，捨不得打掉重...
左邊的欄位已經寫完了，這篇開始從右側欄位開始撰寫內容，預計 header 會長這樣，左邊是一排選單，右邊有一個按鈕，給客戶做意見回饋用，如下圖: 為了要讓兩欄的...
DAY 3 快速上手 (Part 2) 在昨天的文章中，你應該已經把 VS Code 安裝完成了，今天我就要來帶你認識 VS Code 打開後的畫面啦！ VS...
aside 終於進入最後一個部分，也就是播放器了，預計呈現樣式如下圖： 這次用了比較多技巧跟方式，慢慢的講解吧!!HTML 如下： <div class=...
DAY 2 快速上手 (Part 1) 要寫一個軟體的教學文章，不免俗的總要來個安裝教學，但是我只想要提我覺的值得注意的部份，另外，由於我平常的使用環境是 Wi...
進入 aside 中間部分的編寫，想要寫成下方畫面程式碼滿簡單的，跟前面的程式碼差不多，但這次加入了畫面優化跟效果， 先來看一下 HTML 程式碼 <u...
DAY 1 前言 Visual Studio Code (簡稱 VS Code) 是由微軟開發，同時支援 Windows、Linux、macOS 且開放原始碼的...
這次要寫一個播放器的清單，在編寫之前，我先把 navbar 優化了一下，如下圖呈現的樣式，但我還是沒有研究出來 search 要怎麼對齊在 navbar 的中間...
Tim Hsu
Leo
戴均民
RRR怕大星
ganin0302
鍾小呆
iThome鐵人賽
看影片追技術