iT邦幫忙

菜鳥前端相關文章
共有 310 則文章
鐵人賽 Modern Web DAY 8

技術 [Day 8]開賽八天即遭遇難題(前端篇)

挑戰目標: MockNative Camp前端 今天原本是要來refactor和解決hover的問題的,但是在將navtab給component化時遭遇難題,...

鐵人賽 Vue.js DAY 7
試試用Vue建立網站吧 系列 第 7

技術 Day7-試試Vue3-首頁增加會員頁面

(1)新增會員頁面檔案路徑 src / views 底下新增 front 資料夾,並於此增加 LoginView.vue 檔案。html 架構同註冊頁面(表單驗...

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

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

鐵人賽 Modern Web DAY 10

技術 [Day 10]怎麼每天都像在趕末班電車R(前端篇)

挑戰目標: MockNative Camp前端 週末也是很多事要做,每天大概都晚上9點到12點是鐵人賽的工作時間,寫code, test, debug和截圖之...

鐵人賽 Vue.js DAY 9
試試用Vue建立網站吧 系列 第 9

技術 Day9-試試Vue3-主頁歡迎訊息顯示會員名(Pinia)

這裡要將會員登入頁面(LoginView.vue 檔)中 axios.get() 取得的會員 name 儲存到 Pinia 裡的 store 。再透過該 sto...

技術 旅館預約服務練習紀錄-Bootstrap 4 + Scss

繼鐵人賽後,想把自己再推前進一點,在 30 天的陶冶後,發現每天撥一點時間思考與撰寫程式,可以提升對於程式的熟悉感,並可以爬梳自己所理解的東西,就算可能當下不了...

鐵人賽 Modern Web DAY 16
33歲轉職者的前端筆記 系列 第 16

技術 33歲轉職者的前端筆記-DAY 16 使用 jQuery 寫出動畫效果

新增畫面及移除畫面 點擊show時會呈現以下結果: 點擊hide時會呈現以下結果(消失了): jQuery 程式碼可以這樣寫: <script>...

鐵人賽 Modern Web DAY 21
33歲轉職者的前端筆記 系列 第 21

技術 33歲轉職者的前端筆記-DAY 21 英吋轉公分單位轉換器練習筆記

基本語法筆記 四捨五入: Math.round(); 無條件進位: Math.ceil(); 無條件捨去: Math.floor(); 英吋轉公分單位轉換器...

鐵人賽 Vue.js DAY 30
試試用Vue建立網站吧 系列 第 30

技術 Day30-試試Vue3-老天鵝~撐到30天了

終於撐到連續發文的第30天,分享個賽中小故事。 (1)主題名稱由來其實起初參加第 15 屆鐵人賽的主題不是「試試用Vue建立網站吧」,而是「跟著雲端前輩用Vue...

鐵人賽 自我挑戰組 DAY 6

技術 【2023 挑戰賽 Day10】找工作囉!當自己的經紀人吧~(2)模擬面試

可以不要找工作嗎QQ 我在準備完兩個專案(原生JS、Vue)之後就開始投履歷了。心裡其實相當惶恐害怕,記得準備履歷前,還跟我 mentor 說:「蛤~我這樣真的...

鐵人賽 Vue.js DAY 28
試試用Vue建立網站吧 系列 第 28

技術 Day28-試試Vue3-後台管理者頁面(1)

後台管理者頁面設計概念同本專案的前端頁面。管理者於指定的頁面登入後,主頁功能除首頁、登出外提供「管理餐廳列表」一項功能。因後台模板與前端相似,開發過程會簡單說明...

鐵人賽 Vue.js DAY 20
試試用Vue建立網站吧 系列 第 20

技術 Day20-試試Vue3-建立會員餐廳API

同「Day5-試試Vue3-建立會員API」與「Day13-試試Vue3-建立餐廳API」篇採用 json-server 方式建立 API。 (1)新增 use...

技術 前端相關知識

前端語言 HTML(骨架)(看官方文件) CSS(美編)(看官方文件) Tailwind CSS - Rapidly build modern websi...

鐵人賽 Modern Web DAY 17

技術 [Day 17]獨自一人的全端攻略(前端篇)

挑戰目標: MockNative Camp 最近這兩年在工作上一直想要有同事可以交流進步,或者是遇到可以學習的同事,但終究在這兩份工作中都屬於自己一個人單打獨...

鐵人賽 Modern Web DAY 2

技術 [Day 2]我也好想要有鑑定技能(前端篇)

如果被老闆發現我們可以一眼鑑定出需求的細節和問題的原因,那我們的工作量會不會變更多 Mock的第一步就是先觀察 今天我們來觀察此次挑戰的目標 NativeCa...

鐵人賽 Modern Web DAY 1

技術 [Day 1] 主角總是最後登場的 (前端篇)

其實只是拖延症點到滿等的我,說是主角其實只是拖延症發作 有看過某些YT頻道的應該有聽過這段話什麼樣的人適合閱讀此挑戰- 不在意內容的人(此為自己的挑戰,能做到...

鐵人賽 Modern Web DAY 15
React 走出新手村 系列 第 15

技術 React 走出新手村 — 表單進化論

表單處理 這篇文章是我從事教學很常遇到的統整,我有系列專門解釋怎麼一步一步讓自己邁向 pro 的過程,有興趣了解更多的話可以參考這個連結,裡面有所有我所統整的R...

鐵人賽 Vue.js DAY 26
試試用Vue建立網站吧 系列 第 26

技術 Day26-試試Vue3-餐廳實評頁面(1)

因開發過程細節較多會分成兩篇來說明。 (1)新增餐廳實評頁面檔案路徑 src / views / front 底下新增 CommentView.vue 檔案。...

鐵人賽 Vue.js DAY 16
試試用Vue建立網站吧 系列 第 16

技術 Day16-試試Vue3-口袋餐廳選單(1)

本篇開始會對「Day15-試試Vue3-口袋餐廳的html架構」的內容進行調整,試將資料內容改用 JavaScript 來動態渲染畫面。因開發過程細節較多會分幾...

鐵人賽 Vue.js DAY 29
試試用Vue建立網站吧 系列 第 29

技術 Day29-試試Vue3-後台管理者頁面(2)

資料來源是先前建立的餐廳 API(採用 json-server 方式建立),管理者具有新增餐廳的權限。本系列旨在練習開發前端畫面,因為現有前端技術僅支持簡單的...

鐵人賽 Vue.js DAY 14
試試用Vue建立網站吧 系列 第 14

技術 Day14-試試Vue3-規劃口袋餐廳的頁面

對於前端新手來說,編寫 JavaScript 可能較具挑戰性。譬如如何使用 v-for 進行資料渲染等 JavaScript 方法,建議先專注於建立想要的 ht...

鐵人賽 Vue.js DAY 10
試試用Vue建立網站吧 系列 第 10

技術 Day10-試試Vue3-歡迎訊息顯示會員名(Pinia)下

分享寫「Day9-試試Vue3-主頁歡迎訊息顯示會員名(Pinia)」時整理幾種其他歡迎訊息顯示會員名的寫法,及從中學到的新知識點。會分兩篇介紹。 (1)登入會...

鐵人賽 自我挑戰組 DAY 7
從零開始學習前端 系列 第 7

技術 #從零開始6️⃣:box-sizing圖解

為了要讓各個區塊、內容外觀符合設計稿或者更好看,計算每個樣式帶來的影響和結果,有的時候也是很煩(算錯的時候更煩),這個時候box-sizing就派上用場了! b...

鐵人賽 Vue.js DAY 13
試試用Vue建立網站吧 系列 第 13

技術 Day13-試試Vue3-建立餐廳API

同「Day5-試試Vue3-建立會員API」篇採用 json-server 方式建立 API。 (1)新增 restaurant.json 檔案建立資料專案根目...

鐵人賽 Vue.js DAY 15
試試用Vue建立網站吧 系列 第 15

技術 Day15-試試Vue3-口袋餐廳的html架構

此篇接續介紹口袋餐廳頁面的靜態 html 架構。 (1) html 程式碼畫面示意圖請參考前一篇。介面開發的技巧如下: 導覽(nav)架構請參考「Day8-試...

鐵人賽 Vue.js DAY 24
試試用Vue建立網站吧 系列 第 24

技術 Day24-試試Vue3-口袋餐廳的口袋清單(2)

接續處理口袋餐廳清單右側的「移除」鈕功能。 (2)口袋餐廳清單-移除鈕分為資料渲染與觸發方法兩部分說明。 1.「移除」鈕的限制只能移除口袋餐廳清單(以下簡稱口袋...

鐵人賽 Vue.js DAY 12
試試用Vue建立網站吧 系列 第 12

技術 Day12-試試Vue3-使用者故事(會員主頁)

這篇簡單說明使用者故事(以會員角度)。 假定華特義式餐廳為一餐飲集團,旗下有多個義式料理相關的餐飲品牌。為提供集團會員更多便利和互動性,會員主頁除首頁、登出外提...

鐵人賽 Vue.js DAY 18
試試用Vue建立網站吧 系列 第 18

技術 Day18-試試Vue3-口袋餐廳選單(3)

(3-1)動作拆解-品牌受眾分為資料渲染與觸發方法兩部分說明。 1.下拉選項內容使用 v-for="item in restaurants"...

鐵人賽 Vue.js DAY 21
試試用Vue建立網站吧 系列 第 21

技術 Day21-試試Vue3-口袋餐廳選單(5-1)

說明口袋餐廳的表單提交前,先調整登入會員的 Pinia store 與會員登入頁面。將會員登入時的電子郵件與 id 也儲存於登入會員的 Pinia store...

鐵人賽 Vue.js DAY 23
試試用Vue建立網站吧 系列 第 23

技術 Day23-試試Vue3-口袋餐廳的口袋清單(1)

口袋餐廳頁面下方區塊是篩選後的清單,以表單形式顯示所選的口袋餐廳。畫面示意圖請參考「Day14-試試Vue3-規劃口袋餐廳的頁面」篇。 (1)口袋餐廳清單-主表...