iT邦幫忙

網頁前端相關文章
共有 112 則文章
鐵人賽 Modern Web DAY 13

技術 Day 13 JavaScript 的資料型態

JS 的資料型態主要分成物件型態及原始型態。 Object 物件型態 物件型態的資料可以使用屬性及方法。ex: 陣列[ ]、物件{ }、函式 Primitive...

鐵人賽 Modern Web DAY 1

技術 Day 01 阿修補坑中

第一天先來聊聊我的背景以及為什麼我會想寫這個主題 原本我是一名品保工程師,做了3、4年發現這份工作開始不符合我的需求,所以想轉換跑道。而人生要挑戰才算好玩(By...

技術 準備開始一些前端相關的技術文章

如標前端小白我打算開發分享一些目前為止所學的前端知識,順便透過分享知識來提高自己對於程式的記憶點, 對大家也是win win double win啦!這幾天會乘...

鐵人賽 Modern Web DAY 2

技術 [DAY02]設定以及安裝基本環境(上半部)

VScode 想必對會寫網頁的大家來說,VScode肯定不陌生吧!首先,我們要先安裝VScode。怕有些人可能不知道VScode是什麼,這邊介紹一下,VScod...

技術 【前端動手玩創意】側邊超質感選單|幫你的網頁多一點質感好嗎?(14)

目錄 【前端動手玩創意】等待的轉圈圈效果 (1) 【前端動手玩創意】google五星評分的星星(2) 【前端動手玩創意】CSS-3D卡片翻轉效果(3) (今天難...

技術 前端小試身手(6)--IMG複製大師,懶人專用小腳本

目錄 前端小試身手(1)--幫「發問/發文頁」新增"編輯"鈕~ 前端小試身手(2)--it幫跳轉到最佳解答 前端小試身手(3)--增添系列文...

技術 前端小試身手(5)-備份it幫的發問!

目錄 前端小試身手(1)--幫「發問/發文頁」新增"編輯"鈕~ 前端小試身手(2)--it幫跳轉到最佳解答 前端小試身手(3)--增添系列文...

技術 前端小試身手(9)--文章縮圖預覽(以codeLove論壇為例)

目錄 前端小試身手(1)--幫「發問/發文頁」新增"編輯"鈕~ 前端小試身手(2)--it幫跳轉到最佳解答 前端小試身手(3)--增添系列文...

技術 前端小試身手(8)--教你寫出「思想審查警衛」,過濾垃圾雜訊的利器!

目錄 前端小試身手(1)--幫「發問/發文頁」新增"編輯"鈕~ 前端小試身手(2)--it幫跳轉到最佳解答 前端小試身手(3)--增添系列文...

技術 如何判斷何時需要將軟體組件模組化

在開發軟體時,模組化是一種常用的設計模式。但是,如何判斷是否需要將組件模組化呢?不妨考慮以下四個因素: 複雜性:如果一個組件有很多邏輯或視覺元素,將其模組化...

鐵人賽 SideProject30 DAY 23

技術 營養師不開菜單的第二十三天 - Next.js 前端實戰 - 狀態管理及 RWD

前言 經過從設計到後端的細緻實作後,我們現在進入了至關重要的前端實作階段。在這個階段,我們不僅要將畫面與資料結合,更要為我們的應用程式注入靈魂。前端不僅僅是視覺...

鐵人賽 Modern Web DAY 12

技術 Day 12 JavaScript var vs let (2)

今天介紹 JS 內 var 與 let 的後兩點差異。 執行環境 Execution Context 宣告 declaration 執行環境 Executi...

鐵人賽 Modern Web DAY 18

技術 【Day18】常見切版應用(2)彈跳視窗

您在瀏覽其他網站時,是否常常被突如其來的彈跳視窗惹到心煩呢?不論是廣告、強迫訂閱、最新資訊…等,網頁常常使用彈跳視窗來宣傳。雖然惱人,但無法否認使用者確實被吸引...

技術 ReactJS基礎實作問題(lifecycle, state, props, router, hooks)

簡述React生命週期 mount是component首次被渲染到DOM的階段,在functional component中,我們通常會在componen...

鐵人賽 自我挑戰組 DAY 25

技術 Bootstrap 表單驗證(Validation)

預設瀏覽器就會有表單驗證的功能,在input中加入required屬性。例如: <label for="validationDefault01&...

鐵人賽 Modern Web DAY 8

技術 【Day08】前端撰寫(5)CSS Position

在上一篇中,我們提到了CSS中,快速排版向的屬性:display: flex 。但有時,flex並不適用於較小且單一的元件,也無法協助我們更精細地刻出我們所想要...

技術 [DAY0]30天挑戰從零開始設計並實作網頁

雖然不小心錯過了鐵人賽的報名,還是希望可以利用此機會複習過去所學內容並養成學習的習慣,因此這邊將利用30天的時間,從製作設計稿開始,一步一步做出自己設計的網頁,...

鐵人賽 Modern Web DAY 25

技術 【Day25】淺談 React.js(4)公共元件 & 頁面跳轉 Router

在碰到純前端的大專案時,專案內有許多頁面是必然的。都是在同個專案,當頁面跳轉時,想必也都會使用到相同的元件。但是,在創建新頁面時,我們不僅要複製多個元件,甚至是...

鐵人賽 Modern Web DAY 24

技術 【Day24】淺談 React.js(3)React useState & useEffect

介紹完React的動態生成後,本篇將帶您進入到React Hook的領域。 甚麼是React hook?簡單來說,它是一種React的函數,可以讓您在無需使用c...

鐵人賽 Modern Web DAY 23

技術 【Day23】淺談 React.js(2)React動態生成

在上一天中,我們了解到React中的元件構成和基礎語法,今天,我們要一同探索的是 ── 更便捷的生成語法! 動態生成 在介紹jQuery的篇章中我們曾提過,我...

鐵人賽 自我挑戰組 DAY 19

技術 網頁親和性與Bootstrap 表單overview

甚麼是網頁親和性? 網頁親和性(Web accessibility),又稱網路無障礙、網路可達性、網路可用性,旨在確保任何人,不論是身體、心理、技術上遭受障礙,...

鐵人賽 影片教學 DAY 20

技術 一起來實作響應式網頁設計:初探Array Day20

影片教學 重點回顧 Array 陣列 當有性質相近的資料要存放一起時,可以使用array array 可以包含多種資料類型 array 不是 primiti...