iT邦幫忙

鐵人檔案

第 12 屆 iThome 鐵人賽
回列表
Modern Web

30天前端網頁技術超入門介紹 系列

這系列算是將這些時間學習的成果撰寫成文章,提供給比筆者更菜的新手參考XD
利用30天的時間去介紹前端技術,順便當作是對自己的複習。看完這系列也許在成為前端工程師的路上可以少踩一點雷@@?

鐵人鍊成 | 共 30 篇文章 | 21 人訂閱 訂閱系列文 RSS系列文
DAY 1

Day1. 前端寫作的旅程從這裡開始

人生第一次參賽,在此之前只是個平凡的學生,平凡的上學,也不曾對任何賽事感興趣,所以是真正程度上的第一次。接下來就讓我好好的來體驗下吧~ 系列主題 本系列針對...

2020-09-10 ‧ 由 Haruna Lin 分享
DAY 2

Day2. SCSS 簡單介紹

什麼是 SCSS? 簡單一句話概括就是用來管理 CSS 的工具。 那 SCSS 到底?? SCSS 只是 Sass 的其中一種寫法,所以並不能稱為語言。SCSS...

2020-09-11 ‧ 由 Haruna Lin 分享
DAY 3

Day3. SCSS 簡單變數介紹

昨天寫完才想到忘記說必須在副檔名 .scss 的檔案內撰寫 SCSS 才行。大概是這樣 檔名前面用 _ 符號表示在打包時不會被編譯成 CSS 檔案,多用於在需要...

2020-09-12 ‧ 由 Haruna Lin 分享
DAY 4

Day4. SCSS Mixin

前端開發時,常會遇到重複寫著相似的程式。相似的程式有共同的特性。因為共同特性而重複出現,這時就會需要使用 mixin。 此圖是之前專案的截圖,簡單來說這3個區塊...

2020-09-13 ‧ 由 Haruna Lin 分享
DAY 5

Day5. CSS 設計模式(一) - SMACSS

無論何種設計模式皆屬於參考,只要能將你的 CSS 收納、歸類好,任何模式皆能提升開發時的效率。所以請找到適合自己的模式吧! 什麼是 SMACSS? SMAC...

2020-09-14 ‧ 由 Haruna Lin 分享
DAY 6

Day6. CSS 設計模式(二) - OOCSS

合適的歸納方法是很重要的喔~~ 謹記。 今天要講的是 OOCSS,與 SMACSS 同樣是個歸納、整理 CSS 的方法。 直接切入重點, OOCSS 注重...

2020-09-15 ‧ 由 Haruna Lin 分享
DAY 7

Day7. CSS 設計模式(三) - 命名基本

取個好名字一直都不容易,每當有個新同事要進來時,還沒看到人先聽到名字總是會猜想外表呢~名字說不定也算是第一印象的一種? 不過 CSS 的命名就不是這麼難的事...

2020-09-16 ‧ 由 Haruna Lin 分享
DAY 8

Day8. CSS 設計模式(四) - BEM

不知道各位客官看到現在是否找到屬於自己的方法呢? 今天是我最愛的 BEM 設計模式,為什麼呢? 還記得我之前說過寫久了就會找出自己的設計方式嘛~~ 在接觸 CS...

2020-09-17 ‧ 由 Haruna Lin 分享
DAY 9

Day9. JavaScript 基礎常識介紹(一) - 變數

終於到前端最重要技術之一的 JavaScript 了(嗚呼~~今天要來介紹的是變數,也是每本課本一開始幾乎都會講的東西。 變數該怎麼寫? var varName...

2020-09-18 ‧ 由 Haruna Lin 分享
DAY 10

Day10. JavaScript 基礎常識介紹(二) - function

雖然表定清單寫函式介紹啦,不過函式函數又常聽到有人說,我還是全部用 function 來表示好了。 變數介紹完就來說說 function 吧,這時終於開始要...

2020-09-19 ‧ 由 Haruna Lin 分享