iT邦幫忙

前端新手村相關文章
共有 116 則文章
鐵人賽 Modern Web DAY 3
實作經典 JavaScript 30 系列 第 3

技術 Day03:來做個鍵盤鼓手(二)

接續第一天的練習, 我們成功加上了樣式,卻沒有移除它。 開始來想辦法在我們不需要這個樣式時,將它移除 JS的監聽器也是可以監聽元素的變化, 這時我們監聽的動作會...

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

技術 Day02:來做個鍵盤鼓手(一)

WES BOS系列影片 Alex快速導讀系列影片 Day01-JavaScript Drum Kit 思考需要的功能 1.按鍵按下後需要發出聲音 2.發出聲音的...

鐵人賽 Modern Web DAY 1

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

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

技術 [鼠年全馬鐵人挑戰] Week27 - JavaScript 練習題- 比較運算子

這周來練習比較運算子,也是我不太熟練的一個章節 要好好努力練習了~ 題目 請觀看以下文章後,解答以下題目: [JS] 判斷筆記 比較運算子 重新認識 JavaS...

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

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

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

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

技術 [鼠年全馬鐵人挑戰] Week26 - JavaScript 練習題- 變數型別判斷與弱型別轉型

又是一個星期過去了 最近準備婚事真的忙翻啦~ 所以上週忘了更新文章了QQ 沒關係 再來繼續加油努力:) 變數型別判斷與弱型別轉型練習 請觀看此文章後,解答以下題...

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

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

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

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

技術 鼠年全馬鐵人挑戰 WEEK 23: JavaScript 陣列處理方法

小明自從開啟了真理之門,就不斷思考著何謂「一為全,全為一」? 此時小明走著走著撿到了一本寶典 --- JavaScript 語法大全 --- 裡面寫著這麼一段話...

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

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

技術 [鼠年全馬鐵人挑戰] Week22 - 超新手學前端 - JavaScript 使用時機

學了一陣子的JavaScript遇到了不少問題 其中遇到一個最大的問題是 學了那麼多語法要怎麼運用? 我知道函式、物件、陣列但我不知道什麼時候該用哪個? 不知道...

技術 鼠年全馬鐵人挑戰 WEEK 22: JavaScript 判斷式 - if...else / switch

小明崩潰問道:難道奶奶、你和我都是程式所構成的嗎? 此時大家陷入沉默,不發一語 黑衣人打破沉默:如果你想知道這世界的真相,就問問真理吧! 在真理的世界只有 tr...

技術 鼠年全馬鐵人挑戰 WEEK 21: JavaScript 箭頭函式 Arrow function

奶奶一臉震驚說:你...你是... 黑衣人說:我這次回來是要把我畢生所學給傳授下去。 小明腦中出現了很多想法,回來?畢生所學?什麼東西阿!搞得我腦子好亂! 黑衣...

技術 鼠年全馬鐵人挑戰 WEEK 20: JavaScript 函式 function

小明是某雜貨店的員工,有天店裡來了位客人,身著國民品牌uniqlo黑色的短T, 下著百搭卡其褲,腳採萬年不敗adidas拖鞋,走進店裡拿了一罐水、 二條七七乳加...

技術 鼠年全馬鐵人挑戰 WEEK 19: JavaScript 運算子 運算式

以前數學課有個直線方成式y=ax+b,想必大家都不陌生吧! =、*、+,我們稱為運算子,而y=ax+b,就稱為運算式。 JavaScript 有以下常用的運算子...

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

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

技術 鼠年全馬鐵人挑戰 WEEK 18: JavaScript 變數 型別

變數 變數命名規則 變數可以由字母數字下劃線和美元符號($)組成 變數必須以字母開頭 變數也能以 $ 和 _ 符號開頭 變數名稱對大小寫敏感(a 和 A 是不...

技術 [鼠年全馬鐵人挑戰] Week18 - 超新手學前端 - HTML table 小概念

又過了一周啦~ 最近開始學習如何用 table 排版,在學習的過程中順手記下筆記讓自已更有概念:) 何謂table table 是在 HTML 排版的一種方式,...

技術 鼠年全馬鐵人挑戰 WEEK 17: CSS transform

transform:(動作的函數),通常會配合animation或:hover來做些動畫效果 範例 transform-origin:x y; 指定動作的參考點...

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

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

技術 鼠年全馬鐵人挑戰 WEEK 16: CSS Animation

CSS3 中有兩個用來做動畫的屬性,一個是 Transition,另一個是 Animation。 Animation 起手式 div{ animati...

技術 鼠年全馬鐵人挑戰 WEEK 15: 上上 下下 左左 右右 要怎麼解決呢? CSS nth-child

最近切版常常遇到看似規則,但又不規則,一下偏左,一下偏右, 在我還沒遇到nth-child前, 我的解決方式都是一千零一招,複製貼上各個class, 每次邊貼心...

技術 鼠年全馬鐵人挑戰 WEEK 14: 我想亮白、我想復古、我想___?CSS filter

CSS filter簡單來說就是濾鏡功能,以下整理幾個常用的功能。 1.blur模糊(px) 越大越模糊,如果想要朦朧美就參考這個吧! filter:blur...

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

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

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

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

技術 鼠年全馬鐵人挑戰 WEEK 12: 提升切版速度!Emmet原來可以這樣用!

最近參加了六角學院的切版班,想要提升自己的切版速度,分享幾個我常用的方式。 如果有更好或覺得不錯的方法,可以留言分享喔! 需要你們打開我的新世界 基本用法 !=...

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

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

技術 鼠年全馬鐵人挑戰 WEEK 10: 這時我看見他的背影,我的淚很快地流下來了。 box-shadow

還記得國中時,老師國文課時上到朱自清-背影, 雖然內容不多,但內容卻十分豐富,國中時我還是位懵懂的少年,不經世事的孩子, 對文章的真情未必有深入的感受及透澈。僅...

技術 鼠年全馬鐵人挑戰 WEEK 09: 月亮圓又圓,用 border-radius 讓你圓又圓

雖然離中秋節還很遠, 已經想烤肉了XD ,但每次抬頭仰望星空,看到月亮一點一滴的變化, 讓我心中掀起小波瀾,心中思考著要如何讓月亮長存,而不是只有黑夜。 如何使...