iT邦幫忙

front-end相關文章
共有 486 則文章
鐵人賽 Modern Web DAY 26

技術 [DAY26] 今天天氣怎樣?等等我打一下 API 再跟你說

我想說的是API 串接範例練習,就是這麼簡單 上一篇中安裝了 axios 於是我們就準備好了工具接下來要做練習,試試看實際執行的結果 我們先直接在 Mass...

鐵人賽 Modern Web DAY 2

技術 第 2 幅 - 圖形入門:心裡有坐標,幾何自然來

相信每個人的童年都有一個幾何積木玩具,今天我們就是要重返童年,一起用 Canvas 完成一些常用的幾何圖形! 準備好畫布 剛開始就先不用框架,以 Vanilla...

鐵人賽 Modern Web DAY 9

技術 #9 CSS3 Flexbox: main style setting

What is Flexbox? Flexbox = Flexible Box "CSS3 Flexbox was designed as a o...

鐵人賽 自我挑戰組 DAY 4

技術 Day 04 HTML<表單標籤>

表單標籤主要功用是用來收集使用者資料 常用情況 : 註冊頁面... 主要由 表單域、表單元素、提示文字 這三種內容組成 以MOMO註冊頁面為範例: 1.表單域...

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

技術 React 走出新手村 — 樣式的選擇

選擇障礙 這個話題在 React 生態系裡面永遠討論不完,這次想分享我自己使用上的見解,別看我都在講些hook function的使用,css 我也是略懂略懂,...

鐵人賽 Modern Web DAY 12

技術 Angular 深入淺出三十天:表單與測試 Day12 - 單元測試實作 - 被保人 by Template Driven Forms

今天我們要來為我們用 Template Driven Forms 所撰寫的被保人表單寫單元測試,如果還沒有相關程式碼的朋友,趕快前往閱讀第十天的文章: Te...

鐵人賽 自我挑戰組 DAY 19

技術 Day-19 專案演練 - 打造表格排序功能 react-table

Day-19 專案演練 - 打造表格排序功能 react-table 表格排序指的是用表格的標題的內容來排序整個表格,雖然可以排序的東西是不限任何型態,只要是...

鐵人賽 Modern Web DAY 29

技術 [DAY29] 多 DOM 的動畫之我等了這篇 29 天之我完全不介意

我想說的是:其實基礎的多個 DOM 的動畫,跟一個差不多多個的就是專業的部分,我不清楚 上一篇中已經可以控制一個 DOM 元素的動畫效果而想控制多個動畫 r...

鐵人賽 Modern Web DAY 5

技術 #5 Types of CSS Selector

After the previous 2 articles of CSS basic introducttion, let's talk about 5 Typ...

鐵人賽 自我挑戰組 DAY 1
JS30 學習日記 系列 第 1

技術 Day 1 - JavaScript Drum Kit

前言 JS 30 是由加拿大的全端工程師 Wes Bos 免費提供的 JavaScript 簡單應用課程,課程主打 No Frameworks、No Compi...

鐵人賽 Modern Web DAY 14

技術 [DAY14] 一個蘿蔔一個坑之 JSX 幾個坑

我想說的是JSX 註解的寫法和一般的 HTML 不一樣 寫程式不寫註解,就像是大腸麵線沒加香菜雖然能,但吃就是少一味;還有些人特別討厭加寫註解還是有些好處的...

鐵人賽 Modern Web DAY 10

技術 #10 CSS3 Flexbox: nav style setting

What is nav? nav = navagator “The &lt;nav&gt; HTML element represents a sectio...

鐵人賽 自我挑戰組 DAY 21

技術 介紹了好多天的 RWD,今天來排一個完整一點的版型

我們花了好多天的時間來介紹 RWD 的設計概念,但是每一個概念都比較片斷與零散一點,今天我們來把所有的概念整合一下,變成一個完整的 RWD 網頁吧,來看一下我們...

鐵人賽 Modern Web DAY 1

技術 #1 Entry-Level Front-End Web Development

Before learning the front-end web development, let’s talk about my plan in the f...

鐵人賽 自我挑戰組 DAY 21

技術 Day-21 專案演練 - 打造表格分頁功能 react-table

Day-21 專案演練 - 打造表格分頁功能 react-table 表格分頁是這個專案使用 react-table 製作的最後一個功能,在安裝功能之於,將整...

鐵人賽 自我挑戰組 DAY 29

技術 將之前的 RWD 版型範例全面改寫成 Sass 的 SCSS 碼吧

之前我有一篇文章在說明 RWD 版型在瀏覽器縮放時進行的變化,那時候的 CSS 是直接用原生 CSS 撰寫的,這幾天我們花了一點時間說明了 CSS 預處理器 S...

鐵人賽 自我挑戰組 DAY 28

技術 什麼東西是 Sass Maps?

Sass Map 是 Sass 的地圖嗎?當然不是囉,但既然它取名為 Maps,姑且我們可以暫時以地圖的按圖索驥的精神來想像它。 過往,我們提到了 Sass 的...

鐵人賽 自我挑戰組 DAY 14
JS30 學習日記 系列 第 14

技術 Day 14 - Object and Arrays - Reference VS Copy

前言 JS 30 是由加拿大的全端工程師 Wes Bos 免費提供的 JavaScript 簡單應用課程,課程主打 No Frameworks、No Compi...

鐵人賽 Modern Web DAY 20

技術 #20 JS: Object Fundamentals

What is an Object? Introduction by W3C School Elements creating Object: prope...

鐵人賽 自我挑戰組 DAY 25

技術 Day-28 安裝的 vscode 套件分享

Day-28 安裝的 vscode 套件分享 套件跟書一樣,都是要用到的時候才會感覺自己讀的少,之所以到最後才分享工具跟套件,是因為有感覺難用過才會知道套件到底...

鐵人賽 Modern Web DAY 28

技術 #28 JS: Timing Events - Part 2

After introducing about the 2 methods for timing events in the last article, let...

鐵人賽 自我挑戰組 DAY 3
JS30 學習日記 系列 第 3

技術 Day 3 - Playing with CSS

前言 JS 30 是由加拿大的全端工程師 Wes Bos 免費提供的 JavaScript 簡單應用課程,課程主打 No Frameworks、No Compi...

鐵人賽 Modern Web DAY 19

技術 #19 JS: Modified functions & how function create spaces

Modified functions(變形函式) Before introducing modified function, let's recall our...

鐵人賽 自我挑戰組 DAY 9

技術 Day 09 CSS <背景屬性>

CSS背景屬性 可以給頁面元素添加背景樣式背景屬性可設置背景顏色、背景圖片、背景平舖、背景圖片位置、圖像固定等等 1.背景顏色background-color屬...

鐵人賽 Modern Web DAY 26

技術 高級型別

在一開始我們就介紹了 聯合類型和交叉類型 這兩種常用到的高級型別,威爾豬自己也是比較常使用它們。這次我們來看看還有哪些高級型別可以使用: 映射類型 ( Mapp...

鐵人賽 自我挑戰組 DAY 5

技術 Day 05 CSS <基礎選擇器>

CSS的選擇器分為基礎選擇器以及複合選擇器本日將先說明基礎選擇器 DAY6將繼續說明複合選擇器 CSS中的基礎選擇器單個選擇器組成,包含標籤選擇器、類選擇器、i...

鐵人賽 Modern Web DAY 4

技術 Vue 頁面結構

在寫頁面之前,先來介紹 Vue 頁面結構。 首先先在 src/components 底下建立一個 home.vue 跟寫一個 html 頁面很像,一樣是分成...

鐵人賽 自我挑戰組 DAY 20

技術 在 media query 內使用 float:none 清除浮動效果

float的使用,我們常會用在 desktop 的排版上,不管是要將區塊並排顯示,或是要將選單橫列,常常都會使用到{float:left;}。今天我們要提到的是...

鐵人賽 Modern Web DAY 1

技術 [DAY01] 開門見山地說

我想說的是:這是個原本只會 JQuery 的後端工程師學 React 的筆記並不會有甚麼高深的內容,但是可以保證會有很多垃圾話、冷笑話、鄉民哏 Oxford...