iT邦幫忙

前端新手村相關文章
共有 335 則文章

技術 鼠年全馬鐵人挑戰 WEEK 05:CSS為什麼老是吃不到?讓我們來瞭解CSS權重!

以前我在寫css的時候,常常發現沒寫錯但為什麼沒反應?然後開始陷入debug迴圈,後來才發現是權重出了問題,我想這也是大家都經歷過的痛吧! 在剛開始寫CSS的時...

技術 [快速入門前端 10] CSS 選擇器 (1) 基本選擇器 — 通配符、元素、類別 Class、id、屬性

CSS 選擇器 選則器的功能在於讓瀏覽器知道樣式要套用在哪個或哪些元素中,主要依據選擇器的複雜程度分為基本選擇器和複合選擇器。本篇我們會介紹常用的基本選擇器,主...

技術 [鼠年全馬鐵人挑戰] Week20 - 超新手學前端 - JavaScript:監聽

嗨 大家早安午安晚安這周開始 JavaScript 的直播班了發現自己吸收程度真的很慢很多都看不懂QQ還好有提供直播錄影連結可以把不懂的重複看到懂~ 這周就來紀...

技術 [鼠年全馬鐵人挑戰] Week02 - 超新手小知識:HTML、CSS、JavaScript的關連性

Hi~大家 我們又見面啦:)上星期那篇文章出乎我的意料的有很多人關注真的嚇歪我啦XDDD謝謝大家對於我這個剛碰程式的新手小嫩嫩那麼大的支持呀~讓我有更多的動力去...

鐵人賽 Modern Web DAY 1

技術 《For 前端小幼苗的圖解筆記》參賽宣言

首次挑戰鐵人賽,不囉嗦,首發直接上目錄&自我介紹! 《For 前端小幼苗的圖解筆記》 Day About Subject 01 Author 關於...

技術 [快速入門前端 51] JavaScript:Array 陣列 (2) 陣列值的新增、刪除、修改和判斷

陣列 在上一篇文章中我們提到如何宣告值和取得陣列值,但其實在 JavaScript 中還有很多對陣列的操作方法,例如新增、刪除、修改、或過濾陣列值等等,接下來就...

鐵人賽 Modern Web DAY 11
實作經典 JavaScript 30 系列 第 11

技術 Day11: 在Canvas畫布上,用滑鼠畫畫(ㄧ)

WES BOS系列影片Alex快速導讀系列影片 今天要用滑鼠在網頁上畫畫。初探Canvas元素的使用方式,可與MDN的Canvas教學手冊搭配服用但若是只想知道...

鐵人賽 自我挑戰組 DAY 6

技術 Day 06 CSS <複合選擇器>

CSS的選擇器分為基礎選擇器以及複合選擇器本日將將繼續說明複合選擇器 複合選擇器可以更準確更高效的選擇元素(標籤) 是由兩個或多個基礎選擇器透過不同方式組合而...

鐵人賽 自我挑戰組 DAY 20

技術 Day 20 CSS & HTML5 <CSS的初始化 & HTML5 新增的語意化標籤>

CSS的初始化 簡單理解 : CSS初始化是指重設瀏覽器的樣式 (也稱 CSS reset) 每個網頁都必須首先進行 CSS初始化 初始化範例 : /* 把我们...

鐵人賽 自我挑戰組 DAY 26

技術 Day 26 CSS3 < 3D轉換 transform>

3D轉換跟2D轉換不同的是使用三維坐標系(多了Z軸座標) 1.三維坐標系是由三個軸共同組成的 X軸 : 水平向右 注意: X軸右邊是正值 左邊是負值 Y軸 :...

技術 [快速入門前端 9] 開發人員工具

瀏覽器開發人員工具 在我們開始講選擇器種類之前,先來介紹瀏覽器中好用的工具 —— 開發人員工具。開發人員工具是瀏覽器自帶的一個開發工具套件,可以看到當前網頁結構...

技術 [快速入門前端 48] JavaScript:迴圈 (3) 雙重迴圈

雙重迴圈 雙重迴圈,又被稱為「巢狀迴圈」意思是兩個 for 迴圈嵌套在一起,成為一個 for 迴圈中又有另一個 for 迴圈的架構。 for (外層初始化變數;...

鐵人賽 自我挑戰組 DAY 8

技術 新手村08 - Fun with HTML5 Canvas

08 - Fun with HTML5 Canvas 俗話說的好,一天一蘋果,醫生遠離我 一天一 JS,What the f*ck JavaScript? sm...

技術 如何利用 JavaScript 做出一個時鐘

如何利用 JavaScript 做出一個時鐘 本文同步發於:https://jason06286.github.io/20200819/44267/ 作品範例...

技術 鼠年全馬鐵人挑戰 WEEK 01:無經驗非本科技轉職前端歷程

Photo by Pixabay on Pexeles正在看著文章的大家們,這是小弟第一次參加鐵人挑戰賽,也是開啟我的文章生涯,再請大家不吝嗇的指教!ヽ༼ಢ_...

鐵人賽 Modern Web DAY 15
實作經典 JavaScript 30 系列 第 15

技術 Day15: 自製的影片撥放器(一)

WES BOS系列影片Alex快速導讀系列影片 今天要來製作自己的影片撥放器,覺得原始的控制套件很醜?那就自己做一個,不過作者已經幫我們做好樣式了。我們還是注重...

技術 鼠年全馬鐵人挑戰 WEEK 25: Git branch 合併 Merge Rebase

分支 在開發中我們會有許多版本,像是開發版、測試版,測試功能都正常,才會合併到上線版。 分支就像是影分身術的概念,而我們會透過 git 的指令,來取需要分身的...

技術 前美妝小編的前端工程師之路--- Start!

嘿,大家好!雖然不知道這篇文章會不會有人看,還是想跟網頁前的你打聲招呼!其實一直都沒有寫網誌的習慣,哪怕是一直都有看到前輩們非常鼓勵以寫網誌的方式留下自己學習的...

鐵人賽 Modern Web DAY 14
實作經典 JavaScript 30 系列 第 14

技術 Day14: 一次選取想要選取的checkbox

WES BOS系列影片Alex快速導讀系列影片 今天要嘗試做一個todo-list的小功能,按下shift鍵時,可以一次勾選代辦事項。 1.首先抓出所有chec...

技術 [快速入門前端 33] 進階樣式屬性 (3):3D Transform 和 Transition 轉場效果

3D Transform 上一篇我們講完了 2D Transform,今天我們就來介紹 3D 的部分,其實 3D 只是加入 Z 軸,有了立體和透視的概念。在 3...

技術 鼠年全馬鐵人挑戰 WEEK 02:瞭解Html標籤及特性-標籤下的好,架構沒煩惱!

瞭解Html標籤及特性 每個Html標籤都有其功能及特性,或許很抽象。我用遊戲來做譬喻,Html標籤就像是遊戲中的職業有各種功能,而屬性就像遊戲中的公會,每個職...

鐵人賽 自我挑戰組 DAY 5

技術 第五天-新手向CSS懶人包

上次介紹完html的基本用法,這次來介紹css!! css簡單來說就是html的形容詞+動詞,用來把每個區塊給予一個形容((外觀))或是動作((超級廢話))。(...

技術 鼠年全馬鐵人挑戰 WEEK 03:CSS盒模型-box-model

什麼是box-model? 意思是在 CSS 裡面,html 的每個元素都可被視作為一個盒子,然後可以針對這個盒子去做調整 Margin -負責調整 元素與元...

技術 [快速入門前端 12] CSS 選擇器 (2) 複合選擇器 — 後代選擇器及兄弟選擇器

元素間的關係 除了我們之前講到的交集、併集選擇器外,複合選擇器還有後代、兄弟、子選擇器等依照元素間結構關係來選取到該元素的選擇器,所以在講接下來的選擇器之前我們...

技術 [快速入門前端 54] JavaScript:Function 函式 (2) 參數和回傳

參數 在上一篇文章中我們有提到在定義函式時,小括號 () 中放的資料是參數 (parameters),在 JavsScript 中,() 中的參數就像是 Fun...

技術 鼠年全馬鐵人挑戰 WEEK 13: CSS | 假的!假的!這一切都是假的!偽元素 - 基本用法

什麼是偽元素? 它不是網頁元素,但行為、表現又像元素一樣,可以用CSS操控。簡易來說它就是個分身術,常用的偽元素有::before、::after兩種。 ::b...

技術 [快速入門前端 65] JavaScript:事件 (1) 事件和綁定方法

事件 Event 事件(event) 是指在網頁上的動作或者發生的事情,可以是瀏覽器的行爲,例如頁面加載完成,也可以是用戶的行為,例如點選按鈕、頁籤等動作。當網...

鐵人賽 自我挑戰組 DAY 18

技術 Day 18 CSS <Sprite 精靈圖>

1. 為什麼需要精靈圖 一個網頁中會需要很多小的背景作為修飾,若圖像過多服務器頻繁接收&amp;發送會造成服務器壓力過大,將降低頁面加載速度 因此,為了有效減少...

技術 鼠年全馬鐵人挑戰 WEEK 08: head裡面到底在寫什麼?我怎麼看不懂?

剛開始學HTML時,都從body裡的內容開始學,很少用到head裡面的標籤,當打開別人的網頁時,看到head怎麼寫得滿滿的,看到就頭昏眼花 ,於是就激發了筆者的...

技術 鼠年全馬鐵人挑戰 WEEK 24: 從零開始,如何從Git push 到 GitHub?

本篇適用於完全不會Git的人,將一步步帶你上傳檔案至GitHub 1. 安裝 首先到 Git 官網 ,下載Git以下為 windows 環境下示範 ,開始選單...