iT邦幫忙

我的前端學習路程相關文章
共有 31 則文章
鐵人賽 Modern Web DAY 29
前端「設計」聖光之路 系列 第 29

技術 平面設計師轉設計前端的經驗分享

一開始的文章有提到,我原本也是從事設計,出社會以後開始轉往開發者。學習到目前也能開發到後端(還不會提到是全端工程師,畢竟術業有專攻),學開發觀念與過去學習設計有...

鐵人賽 Modern Web DAY 30

技術 Day30:: 從零開始的jQuery學習紀錄 -完-

符合條件的元件集合/jQuery選取 當你選取一個或多個元件,會回傳一個jQuery物件:一般稱此物件為一個符合條件的元件集合或一個jQuery選取。 單一選取...

鐵人賽 Modern Web DAY 29

技術 Day29::從零開始的jQuery 學習紀錄 -7-

運算子 運算式的操作必須依賴運算子,它能夠從一個或多個值中產生一個結果值。 運算子又分成 指定運算子:指定一個資料值給變數 算術運算子:執行基本數學運算 字串運...

鐵人賽 Modern Web DAY 28

技術 Day28::從零開始的jQuery 學習紀錄 -6-

什麼是變數? 程式碼會需要暫時儲存一些工作執行所需要的資料,它可以把這些資料存在變數中。 儲存在變數中的資料是可變更的(或是可變化的),變數可以運用於表示程式碼...

鐵人賽 Modern Web DAY 27

技術 Day27::從零開始的jQuery 學習紀錄 -5-

物件與特性 物件(代表事物) 電腦程式設計中,世界上每個具體物品都可以用物件(object)表示。 每個物件都會有自己的特性、事件、方法 綜合以上幾點就可以製造...

鐵人賽 Modern Web DAY 26

技術 Day26::從零開始的jQuery 學習紀錄 -4-

如何運用JavaScript增添網頁的互動性 JavaScript可以讓程式設計師位網頁增添更多的互動趣味性,主要是透過瀏覽器在呈現網頁內容時,動態進行存取(D...

鐵人賽 Modern Web DAY 25

技術 Day25::從零開始的jQuery 學習紀錄 -3-

HTML、CSS、JavaScript如何共同運作? 網頁開發人員運用三種語言建立網頁 內容層(Content Layer) 這是頁面內容放置處,HTML會給予...

鐵人賽 Modern Web DAY 24

技術 Day24::從零開始的jQuery 學習紀錄 -2-

將使用這的要求轉化成實際的專案需求是實作專案以及節省時間的重要技巧。 var pts = 250; var => 宣告變數 pts => 變數名稱...

鐵人賽 Modern Web DAY 23

技術 Day23::從零開始的jQuery 學習紀錄

什麼是jQuery jQuery是一套跨瀏覽器的JavaScript函式庫 他能簡化HTML與JavaScript之間的操作,讓使用者能快速地達成想要的網頁的動...

鐵人賽 Modern Web DAY 22

技術 Day22::我所知道的 SEO

今天的題目是SEO,因為是沒有接觸過的東西所以我會用今天一整天的時間整理自己的所見所聞與理解! 如果有什麼理解上的錯誤也請多多指正! 什麼是SEO SEO是Se...

鐵人賽 Modern Web DAY 21

技術 Day21::我所知道的 CSS重構 第六章之二

切斷CSS與JavaScript的耦合 用來為元素指定樣式的類別與ID不應該在JavaScript中被用來選取元素,因為這樣就會產生相依性(dependency...

鐵人賽 Modern Web DAY 20

技術 Day20::我所知道的 CSS重構 第六章樣式碼置放與重構策略

第六章 樣式碼置放與重構策略 從特定度低到特定度高之樣式的順序來組織CSS CSS樣式依據特定度與被引用的順序來套用,按照被套用的順序來組織CSS也是很合理的...

鐵人賽 Modern Web DAY 19

技術 Day19::我所知道的 CSS重構 第五章之二

以幾種瀏覽器進行測試 在不同瀏覽器上檢測CSS最常見的方法是以手動方式進行測試 目前主流的瀏覽器有 Google Chrome Firefox Safari...

鐵人賽 Modern Web DAY 18

技術 Day18::我所知道的 CSS重構 第五章測試

第五章 測試 測試 測試CSS可能會很困難,因為有許多不同的平台、螢幕尺寸、與裝置形體(form factors)需要進行測試。 測試為何困難? 如果要徹底檢測...

鐵人賽 Modern Web DAY 17

技術 Day17::我所知道的 CSS重構 第四章之三

影像 圖片可以透過<img>、<picture>標籤來呈現。 因為<img>元素可以在行內的格式情境中使用,此外<im...

鐵人賽 Modern Web DAY 16

技術 Day16::我所知道的 CSS重構 第四章之二

錨點標籤 錨點標籤(anchor tags)提供可連到其他HTML文件或同一份HTML文件中段落的連結 能搭配常用來顯示狀態:link、:visited、:fo...

鐵人賽 Modern Web DAY 15

技術 Day15::我所知道的 CSS重構 第四章為不同類型的樣式分類

第四章 為不同類型的樣式分類 樣式分類的重要性 網頁可以被視為是用來呈現資訊的文件集,也能被視為一套複雜的應用程式 這兩種面像都需要具語意的HTML標籤來描述要...

鐵人賽 Modern Web DAY 14

技術 Day14::我所知道的 CSS重構 第三章之三

建造較佳的盒框 盒框模型(box model)是瀏覽器決定如何渲染(render)一個方型區域的方法,因此瞭解盒框模型的運作對我們而言是很重要的,而HTML的所...

鐵人賽 Modern Web DAY 13

技術 Day13::我所知道的 CSS重構 第三章之二

高效選擇器 簡單選擇器的效能會比複雜選擇器的效能要好,簡單的選擇器應該優先被使用 這是因為他比較容易被重複使用與理解而不是因為他們比較有效率。 由右向左比對選擇...

鐵人賽 Modern Web DAY 12

技術 Day12::我所知道的 CSS重構 第三章編寫較佳的CSS

第三章 編寫較佳的CSS 善用註解 註解可以幫助自己檢視自己之前所寫的程式碼或是段落說明 應該加上註解的部分包括: 檔案內容 選取器的相依性與用法等 為何要如...

鐵人賽 Modern Web DAY 11

技術 Day11::我所知道的 CSS重構 第二章瞭解串接

第二章 瞭解串接 什麼是串接? 串接(cascade) 是瀏覽器用來決定樣式如何套用到元素上的方法。 有許多樣式可以套用到同一個元素上,當樣式沒有依照預期的方法...

鐵人賽 Modern Web DAY 10

技術 Day10::我所知道的 CSS重構 第一章重構與架構

開始要求自己的程式碼的乾淨與可視程度之後被前輩推薦了一本書 接下來幾天會以這本書為主的閱讀筆記,筆記會節錄書中的片段文章 有興趣的朋友可以買來看看,這本書真的蠻...

鐵人賽 Modern Web DAY 9

技術 Day09::我所知道的 CSS動畫

CSS也能做動畫? 沒錯,CSS也能做動畫! 在看到CSS繪圖之後我在同樣的Pen裡頭又看到了會動的簡單小動畫又激起我的好奇心! 然後我就去Google了 要用...

鐵人賽 Modern Web DAY 8

技術 Day08::我所知道的 CSS Grid Layout

CSS Grid Layout 又被稱為網格佈局 簡而言之就是將畫面切割成若干方格 再依照想要的位置把方塊放進去! 會使用到的屬性有 display:grid...

鐵人賽 Modern Web DAY 7

技術 Day07::我所知道的 CSS設計模式與架構之BEM

這次分享的是BEM BEM分別是 B=>Block E=>Element M=>Modifier Block 區塊 網頁是由多個區塊組合自成一...

鐵人賽 Modern Web DAY 6

技術 Day06::我所知道的 CSS設計模式和架構之OOCSS

從開始切版,我最容易遇到的問題就是⋯ 扣很髒很亂 今天打的程式碼睡一覺醒來後就完全看不懂程式碼在寫些什麼 切版都用不一樣的標籤,今天用header明天用top後...

鐵人賽 Modern Web DAY 5

技術 Day05::CSS畫圖好好玩

之前在CodePen上面有看見許多使用CSS製作圖案的Pen 當時看到覺得很神奇也很佩服,沒想到可以使用CSS做到這樣的事情 用CSS進行製作時,我們會需要使用...

鐵人賽 Modern Web DAY 4

技術 Day04::Bootstrap學習心得

剛開始接觸Bootstrap的時候剛好處於3跟4版本交替的時候 3的資料才看沒多久4就出來了 文件資料有看沒有懂,知道的會用的也只有row跟col,而且還用得很...

鐵人賽 Modern Web DAY 3

技術 Day03::我所知道的 CSS選擇器

CSS的選擇器種類非常多,它們到底有哪些功能呢? 剛開始學切版的時候因為實在搞不懂選擇器的用法和功能 所以我的選擇器全部都是使用#ID ... class是什麼...

鐵人賽 Modern Web DAY 2

技術 Day02::方便又好用的SCSS

什麼是SCSS SCSS是個能用更有效率的方法來編寫CSS的程式語言 語法跟CSS大同小異,但是比CSS來得好寫且更容易閱讀 SASS跟SCSS差別在那? 個人...