[筆記] HTML 與 PUG 線上格式轉換
這篇筆記下網路上好用的 HTML 和 PUG 格式互相轉換的工具。若你是使用 Visual Studio，那麼也有不少好用的轉換器可供使用。 HTML 轉成 P Read More …
標籤: hexschool
[筆記] 網頁切版直播班 2020 春季班 – 第七週
進入到第七週，主要是強調視差動畫效果該如何實現。透過關鍵影格(keyframe)以及 x,y,z 方向的移動，自然而然就可以完成基礎的動畫效果。 第七週課程重點 Read More …
[筆記] 使用 Gulp 進行網頁前端自動化 – 用一般 HTML 來製作樣板並排版
雖說用 pug 來進行排版算是很方便，不過對於已經習慣 HTML 標籤格式的我來說，要上手還是有一點難度。於是經過了無數測試和尋找後，最後選定用 gulp-te Read More …
[筆記] 使用 Gulp 進行網頁前端自動化 – 依照開發環境調整佈署內容
這篇筆記下如何依照開發環境來調整佈署的內容，同時在佈署前，自動先清理掉先前產出的靜態檔案內容，並依照現有的檔案來生成全新的檔案，已確保前後檔案的一致性。 交付正 Read More …
[筆記] 使用 Gulp 進行網頁前端自動化 – 架設簡易伺服器和壓縮程式碼
這篇要筆記下的是讓前端開發時可以擺脫伺服器，達成編譯完後可以自動打開瀏覽器瀏覽，同時壓縮你的程式碼。 架設 WebService 1. 先安裝 BrowserS Read More …
[筆記] 使用 Gulp 進行網頁前端自動化 – Gulp 和 Bower 串接
Gulp 搭配上 Bower 和 Bootstrap 4 前端套件，可以快速的做到前端樣板管理。不過 Gulp 4 和前一版的作法有些不同，這邊筆記一下串接的方 Read More …
[筆記] 網頁切版直播班 2020 春季班 – 第六週
Bootstrap 是使用 mobile first 的架構，但要用 desktop first 來撰寫也是可以的。藉由格線系統的幫助下，讓排版不再是一件難事。 Read More …
[筆記] 使用 Gulp 進行網頁前端自動化 – PostCSS 自動加上前綴 & Load Plugins
這篇筆記下用 gulp-postcss、autoprefixer……等等套件，節省你的時間和加強瀏覽器相容性。 加強 CSS 相容性 由 Read More …
[筆記] 網頁切版直播班 2020 春季班 – 第五週
這週的內容主題放在「表單」，這個讓設計師、工程師往往爭論不休、對使用者來說稀鬆平常的部分。除了表單標籤的必備成員外，也提到了手機版的呈現差異。接著進入 Boot Read More …
[筆記] 使用 Gulp 進行網頁前端自動化 – 初始化你的第一個 Gulp 編譯專案
這篇筆記下用 Gulp 來編譯你的檔案，需要安裝 gulp-jade, gulp-sass, gulp-plumber 後，再 gulpfile.js 進行修改 Read More …
[筆記] 使用 Gulp 進行網頁前端自動化 – 簡介
Gulp 是一個前端自動化工具。由於瀏覽器只認識原生的 HTML, CSS 和 JavaScript (ES6的支援度各瀏覽器不同)，而 Gulp 可以幫你節省 Read More …
[筆記] 網頁切版直播班 2020 春季班 – 第四週
本週的知識含金量比起過往幾週，有者顯著性的提高。這週提及了模組化管理的基礎(像是 Pug 和 Gulp)，也講述了如何製作多頁式網頁，並擅用 SASS 的方式來 Read More …
[筆記] 網頁切版直播班 2020 春季班 – 第三週
本週主要講究響應式(RWD)網頁的重點，可以運用百分比、CSS、media 等等設定來確保不同螢幕大小，都有良好的使用體驗。 第三週課程重點 基礎知識 網頁要在 Read More …
[筆記] 網頁切版直播班 2020 春季班 – 第二週
第二週的重點主要放在 Flex 的版型運用。從基礎的配置開始，到如何分析一張設計圖的架構，進而切出符合設計稿樣式的結果，是這一週的重點。同時，為了加速開發和熟悉 Read More …
[筆記] 網頁切版直播班 2020 春季班 – 第一週
專注於前端課程的六角學院，近期開了一個切版直播班，手把手的透過直播帶領大家釐清觀念，同時練習各種各樣的版型，大家在日後切版的速度可以更加快且準確。 第一週課程重 Read More …
