iT邦幫忙

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

技術 關於 localStorage 使用說明

為什麼要學 localStorage,原因大概如下面所說一樣: 將資料從頁面中的程式碼儲存到 Web瀏覽器的儲存空間當中。如此一來,本來存入程式碼當中的資料,...

技術 前端入門-VS code安裝與前端套件介紹

小弟在前端打滾多年最近發現有越來越多人想學習前端 首先我們需要先安裝一個寫code的環境 1. 安裝vs code 市面上的IDE(整合開發環境)百百種包括a...

技術 如何利用 Gsap ScrollTrigger 做出滾動動畫? Vue 專案 載入 ScrollTrigger

最近看了很多滾動動畫,實在讓人驚嘆!!查了背後邏輯發現是用 Gsap 裡的 ScrollTrigger 套件完成,就決定要好好研究這個套件。萬事起頭難,我們先從...

技術 [鼠年全馬鐵人挑戰] Week08 - 超新手入門:HTML 的基本語法

Hi~又見面啦:) 想必很多剛開始碰前端程式語言的新手都會對一堆程式碼搞的頭很痛(嗯,我就是...)新手一開始必定會接觸到 HTML 及 CSS語法,但我該用哪...

技術 鼠年全馬鐵人挑戰 WEEK 11: 水平垂直置中、排版黑魔法 CSS-Flex

在還沒認識Flex前我的水平垂直置中招式,永遠都只有這幾招,line-height+margin auto或用postion來設定,但每次遇到的狀況還不一定能用...

鐵人賽 Modern Web DAY 30
前端新手村 系列 第 30

達標好文 技術 前端新手村 系列目錄

系列目錄 初衷是想寫給新手的一些正確觀念,以及這一路以來脫離新手的重要觀念。對我來說的過程,是 30 天的 w3.org 之旅。幾乎一天一篇,很過癮,也很辛苦。...

技術 [鼠年全馬鐵人挑戰] Week14 - 超新手學前端-前端工程師必學技能

寫了超過十篇文章才發現都沒有介紹到學習前端工程師需要學習的技能XD這週就來記錄一下當時我收集的資訊吧:) 前端工程師需要學習的語言 想往前端工程師這條路前,首先...

鐵人賽 自我挑戰組 DAY 7

技術 Day 07 CSS <字體屬性>

CSS Fonts(字體) 屬性用於定義字體系列、大小、粗細 和文字樣式(ex:斜體) 1.字體系列font-family 屬性定義文本的字體系列 &lt;st...

技術 2022 鐵人賽|Day2 【JavaScript】取整數

附上為何鐵人賽文章會出現在這裡的說明:2022 鐵人賽|Day1 報名失敗,還是要開賽吧! 背景脈絡 在自我介紹時有提到,目前筆者正透過兩種管道在學習前端語言,...

鐵人賽 Modern Web DAY 1

達標好文 技術 【D1 - 歡迎來到前端學到暈島】我要怎麼學前端?

村長 : 請輸入您的島的名稱...: ...「前端學到暈島」 各位當你踏上這個島你就要注意到幾件事情~ 前端是一個肥大的東西,當你想要學一個工具~你就要繼...

鐵人賽 Modern Web DAY 5

技術 Day 05 - 行前說明 — UI 元件分類你知多少?

今天是行前說明的最後一篇了,前面幾篇都是很架構面的知識,而今天要講的就是真的很貼近 UI 元件的分類系統了。 首先想先回答一個問題:「UI 元件為什麼要分類呢...

技術 [快速入門前端 42] JavaScript:運算式和運算子 (3) 三元運算子與運算子的優先性

運算子 三元運算子 三元運算子又稱為條件運算子,語法為 條件 ? 語句1 : 語句2,意即在條件為 true 時會執行語句1,false 則執行語句2,下面讓我...

技術 [鼠年全馬鐵人挑戰] Week07 - 新手學習筆記: RWD 基礎語法

Hi~又見面啦 今天來學習一下 RWD 的基礎小語法,希望可以學習練習的過中程能熟能生巧呀 想要讓原本在桌上型電腦能看的網頁加上 RWD 自適應網站功能時需先加...

技術 [鼠年全馬鐵人挑戰] Week23 - 超新手學前端 - JavaScript 練習題-環境與變數環境 part 1

最近好忙好忙 發現久沒碰js都有點生疏了 接下來的文章就來練習題目加深自已的印象吧 感謝六角學院js特訓班提供的題目可以讓新手練習 環境與變數環境 第一題 va...

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

技術 Day04:用CSS + JS 做一個時鐘

WES BOS系列影片Alex快速導讀系列影片 原作者的時鐘版本比較簡易些,對於時間的算式也比較不直覺,而Alex大大的版本將時鐘做得更細緻,時間算式也更完整。...

技術 [快速入門前端 28] Float 浮動

Float 浮動 Float 在設計之初是用來呈現文繞圖的效果,可以將元素指定為靠左或靠右浮動,在 CSS 中,所有的元素都可以加入 float 屬性。 範例:...

技術 [快速入門前端 1] 網頁和開發工具

基礎觀念 什麼是前端? 前端,故名思義就是指網頁架構的前端部分,也就是我們日常在瀏覽網頁時看到的部分。前端主要包含幾個主要功能:獲取從後端傳來的資料、將資料呈現...

技術 [快速入門前端 4] 什麼是 HTML 標籤 (2) — 表格(Table) 和表單(Form)

HTML 標籤 表格 - table &lt;table&gt; 顧名思義就是表格標籤,用來呈現二維資料的表資訊,不過 &lt;table&gt; 標籤只是作為...

鐵人賽 自我挑戰組 DAY 2

技術 新手村02 - JS and CSS Clock

02 - JS and CSS Clock 俗話說的好,一天一蘋果,醫生遠離我 一天一 JS,What the f*ck JavaScript? small s...

技術 [快速入門前端 21] CSS 常見屬性(1) 字體樣式和顏色

字體 font 系列 屬性 說明 語法 font-size 設定文字大小 font-size: 20px; font-weight 設定文字粗...

技術 [快速入門前端 36] 初探 JavaScript

JavaScript 是什麼? 在「快速入門前端」這個系列中,我們已經介紹過組成網頁的 Structure (HTML) 和 Presentation (CSS...

技術 [快速入門前端 61] JavaScript:DOM (3) 取得元素的屬性值

取得元素屬性值 在前篇文章中我們提到了如何抓取 HTML 的 element node,既然我們都可以抓到元素了,下一步就是取得更詳細的資料,也就是該元素的屬性...

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

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

技術 [快速入門前端 23] CSS 常見屬性(3) 邊框、表格及列表屬性

border 邊框 border,指的是邊框,擁有三個必要屬性 border-width、border-color、border-style,分別指定邊框的寬度...

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

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

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

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

技術 [快速入門前端 25] HTML 元素的 Display 方式

HTML 元素的顯示方式 在之前學習 HTML 的內容中,我們會發現每個元素預設的特定都不太一樣,有些會獨佔一整行的空間,例如 &lt;p&gt;、&lt;di...

技術 [快速入門前端 6] 區塊元素和超連結

DIV (區塊元素) &lt;div&gt;元素(HTML 文件區塊元素)是無標籤語意的容器元素,雖然它不代表任何意義,卻是使用最多的標籤之一,主要用來把相似或...

鐵人賽 Modern Web DAY 1

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

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

技術 [快速入門前端 8] CSS 引入方式和撰寫規則

什麼是 CSS? CSS (Cascading Style Sheets)是一種用來為結構化檔案 (例如 HTML 和 CSS)加入樣式設定的語言,又被稱作階層...