iT邦幫忙

鐵人檔案

第 12 屆 iThome 鐵人賽
回列表
自我挑戰組

前端新手的學習筆記 系列

記錄每天的學習

鐵人鍊成 | 共 32 篇文章 | 8 人訂閱 訂閱系列文 RSS系列文
DAY 11

Day11:每天一個小練習 - CSS咖啡杯01

先刻基本狀態,明天再加動畫和陰影。 練習範例:Pure CSS Cute Cup 目前練習進度: 步驟: 先畫出基本架構 <div class=&quo...

2020-09-25 ‧ 由 Sesame 分享
DAY 12

Day12:每天一個小練習 - CSS咖啡杯02

接續昨天,今天加上陰影和動畫效果完成畫面: 加上杯蓋陰影 .cup { &-lid-top-shadow { width: 3...

2020-09-26 ‧ 由 Sesame 分享
DAY 13

Day13:每天一個小練習 - Bootstrap修改變數

正在寫六角學院的Bootstrap作業,今天就來記錄如何修改變數吧。 首先用npm下載Bootstrap套件,安裝好後出現node_modules資料夾,裡面...

2020-09-27 ‧ 由 Sesame 分享
DAY 14

Day14:每天一個小練習 - Bootstrap自訂元件

還在和作業奮鬥。 元件的好處是可以直接搬到其他專案上,不用全部重寫。 先開個components資料夾,新增一個box.scss檔案。然後在all.scss...

2020-09-28 ‧ 由 Sesame 分享
DAY 15

Day15:每天一個小練習 - CSS毛玻璃效果

還在和BS作業奮鬥。今天突然發現JS30這個超讚的JS課程,充滿了相見恨晚之感,決定明天開始找時間練習。 這個練習有用到一些BS標籤,可以比較快速的製作。要刻...

2020-09-29 ‧ 由 Sesame 分享
DAY 16

Day16:每天一個小練習 - JS30-01-JS Drum Kit

依照Alex老師的教學練習 首先去官網的Github下載範例檔,直接寫JS即可。先寫出立即執行式,並放入要使用的監聽 (function () { //...

2020-09-30 ‧ 由 Sesame 分享
DAY 17

Day17:每天一個小練習 - JS30-02-JS and CSS Clock

今日編輯文章的勵志小語 「做不到」這三個字,有時候是鐵錚錚的事實,但有時候只是一個藉口,讓你在其它事情上止步不前的藉口。-約翰.伍登 一樣是看Alex老師...

2020-10-01 ‧ 由 Sesame 分享
DAY 18

Day18:每天一個小練習 - JS30-03-CSS Variables and JS

到處都是烤肉味和煙火聲... 依照Alex老師的教學 練習用的HTML <div class="controls">...

2020-10-02 ‧ 由 Sesame 分享
DAY 19

Day19:每天一個小練習 - JS30-04-Array Cardio

Alex老師教學影片今天練習的是陣列的使用。 Q1: // Array.prototype.filter() // 1. Filter the list o...

2020-10-03 ‧ 由 Sesame 分享
DAY 20

Day20:每天一個小練習 - JS30-05-Flex Panels

練習資料:Alex老師的教學PJCHENder筆記 原始畫面用CSS調整版面 .panels { (略) display: flex; } .pan...

2020-10-04 ‧ 由 Sesame 分享