在初學網頁排版的時候，文字、段落、列表的排版可以說是比較好上手的，只要稍微透過margin、padding、border及文字顏色上調整，就可以輕易獲得一段美美的文字。

然而要去調整圖片的大小及其他相關效果，就不是那麼容易的一件事了，往往在開發時，都會出現圖片效果不如自己預期的狀況。


【自學程式】如何設定網頁的背景圖片？多層次背景圖、漸層背景教學

職場

原本最近學習學到一個段落，準備著手準備前端作品集，不曉得是不是上天看到我的努力，竟然在我只有將課程作品放上 cakeresume 的狀態下，收到不少面試邀請，也順利地收到 offer 。
要感謝、要記錄的過程太多了，於是我著手撰寫了這篇文章，希望可以幫助正在轉職苦海努力的你。

【轉職心得】從零到前端工程師，我到底做了哪些努力？

明明想要某個欄位的寬高為 200px，卻發現自己不知道為什麼怎麼更改都會改不動，又或者寬高更改了，卻沒有辦法與其他元素並列。
上述的狀況，通常都是在不熟悉 HTML display 特性而產生的狀況下才會出現⋯⋯

【CSS 教學】inline、block、inline-block 使用時機講解

相信大家在一開始接觸 CSS 時，一定會很疑惑為什麼除了 width 外，還會有 max-width 及 min-width 語法呢？
當要開發響應式網頁時，到底要使用什麼語法來控制「斷點」？

【自學CSS】min-width、max-width 到底怎麼用？響應式網頁應用解析

在一個網頁上，會需要使用到圖片的地方有非常多處，像是品牌主視覺、橫幅廣告、側邊廣告、主要內容的預覽圖片、縮圖、背景圖片等。


【自學程式】如何調整網頁背景圖片大小？解決背景重複、圖塞不滿問題

HackMD 是一個協作共筆文件彈性很高的工具，但也因為彈性高，更需要學習系統性的管理方式。
當瞭解 HackMD 的編寫邏輯，就能依照協作文件的性質，來進行不同的管理方式。


【筆記軟體教學】如何打造架構式筆記？使用 HackMD 書本模式提高專案協作效率

這一次再分享心得，主要是要跟大家聊聊，在結束 JavaScript 直播班後，我發現自己的切版技能跟不上實作功能的開發速度，於是又再投入了同樣是六角學院開的切版直播班之學習心得。

【前端課程】六角學院切版直播班值得推薦嗎？全勤實戰心得

前陣子有讀者來信詢問我：「嗨！Vivian，我想要請問妳都是在哪裡學程式的呢？是實體課程嗎？」


【前端課程】六角學院JS直播班值回票價嗎？全勤實戰心得

在 2021 年 6 月的時候，我帶著前端學習者的身份，第一次用影片的方式跟大家分享了自己學習前端的歷程。
老實說，即便當時的我非常有目標地在準備轉職，也了解只要自己持續努力，最後有一天一定會轉職成功。
但在心中依然會有一些自我懷疑的聲音：「我真的可以嗎？」
當然不算！
關於我：


【跨領域轉職】要準備到什麼程度才可以找第一份前端工程師的工作？

對於前端初學者來說，在切版時會出現很多規則、不規則的網頁區塊，這時候我們會嘗試用各種相對定位、絕對定位、margin 或是 padding 的方式來進行網頁區塊的推擠。

【CSS 教學】什麼時候該使用 margin 、padding？前端都該要懂的盒模型！ 

在HTML程式語言中，有一種能讓HTML元素與其他程式語言（CSS、JavaScript）運作的更加順利的語法，它叫做「HTML屬性（HTML Attribute）」。

那HTML屬性是怎麼運作的呢？


【自學程式】HTML 屬性是什麼？解析常見 HTML 屬性用法

在還不是工程師以前，我非常著迷於「自學」這個詞，不論在工作上、興趣方面的問題，我都會告訴我自己：「嗯！我可以自己學起來！」
於是乎我就有了「自學行銷」、「自學設計」、「自學吉他」等，各式各樣的自學行為，有時候我會買書學習，但有時候又會覺得：「啊，網路上這麼多免費的資源，我多看幾個影片就可以學會了。」

【自學程式】何謂自學？五個你不該踏進的學習盲區

在前端開發中，很常會有需要轉址的需求，且處理的手法滿因人而異的，所以今天就想要來整理一些常見的 JavaScript 頁面轉址方式，以及各自的差異。


【前端開發】如何使用 JavaScript 進行頁面的轉址？

說到 HTML 元素的換行效果，在前端有滿多種實作方式的最常見的方式是使用 <br /> 這個 HTML 元素來進行換行 ⋯⋯

【前端開發】如何透過 CSS 實作段落的斷行效果，white-space 語法應用

自己在剛開始進入前端領域時，很剛好遇上需要使用 TypeScript 的案子，一開始都是跟著前輩怎麼寫就怎麼寫，不太有其他餘力來思考「為什麼」會需要寫這門程式語言，直到自己後來使用了 TypeScript 完整開發了電商的購物流程，才慢慢理解到使用 TypeScript 的好處與優勢。


【前端開發】TypeScript 是什麼？優化 JavaScript 開發體驗的程式語言

前端工程師可能會隨著工作經驗的累積，而開始想要寫出更好的網頁架構，又或者是能有一套方法讓組織間的溝通、工作模式更加順暢。

【前端開發】什麼是原子設計（Atomic Design)？優化網頁元件架構的設計原則

Firebase Realtime Database 是一個 NoSQL 即時雲端資料庫，支援多平台（JavaScript SDKs、Android、iOS），可以讓使用者即時取得資料庫的資料。

【前端開發】如何透過 Firebase Realtime Database 建立假資料、簡易資料庫（noSQL）

Functional Programming 中文譯作函式程式設計，或是功能性程式設計，常簡稱為：FP，是一種透過使用純函式（Pure Funciton）進行軟體開發，且避免副作用的程式設計典範，比起宣告式的流程控制，在 FP 採用主要以表達式的方式撰寫程式碼。


【前端開發】FP 基礎：純函式 ＆ 柯里化

在 Modern Web 的世界中，已經有非常多的套件、語法、框架，可以解決大部分網頁排版問題。
以我近期的觀察來說，在專案開發時，大部分公司會為了讓下一個接手、維護的開發者能更快上手專案架構，而採取原生的 CSS 寫法，而不是仰賴快速又方便的套件。


【自學程式】那些年你沒搞懂的 Flexbox 及實務應用技巧

「Hi，Vivian 想要請教妳有沒有在寫程式的時候遇過瓶頸呢？」這大概是我在經營自媒體後，最常收到的問題了。

說實話，身為非本科系的我，在還沒掌握寫程式的精髓時，多多少少都會有感到很挫折的時候，在分享我自己的狀況前，先來聊聊讀者及一些朋友與我分享他們在學習程式時卡關的狀況：



【自學程式】如何突破程式卡關期？五個推薦成長密技

相信透過之前的介紹，大家對於 CSS 選擇器（CSS selector）已經不陌生了，今天我們要來聊聊兩個在實務上非常好用的偽類（pseudo class ）語法，他們分別是 :nth-child() 與 :nth-of-type()，在了解這兩個語法之前，我們首先要先來聊聊什麼是「偽類」呢？


【自學程式】好用的 CSS 偽類選擇器 :nth-child() 與 :nth-of-type()

X 是一個在目標執行上風格跟我很不一樣的朋友，在一天悠閒午後的閒聊中，X 提到當有計劃之外的空閑時間或是假日時，就會特別想要跑出去玩，又或者是盯著手機滑整天，一不小心時間就過去了。
有時候想要做點什麼，閒下來時卻又突然不知道該幹嘛、腦筋一片空白，朋友 X 對此感到特別的煩惱。
關於我：


【高效職場力】為什麼需要設定目標？五個你該寫下待辦清單的原因

Hoisting 可以說是 ES6 問世之後，去面試還是會爾偶被問到的面試考題，雖然 Hoisting 離 Modern JavaScript 的技術有點距離，實作上幾乎不太會用到，但透過了解 Hoisting 的概念，可以對這門語言有更深的了解與掌握度。


【自學程式】Hoisting 到底是什麼？前端常見面試考題

對於剛接觸前端開發不久的人來說，可能會對var、let 與 const 的差異略懂略懂，但又說不太出三者實際哪裡不一樣。


RD少女養成計畫

所有文章