［AC 黑客松］開始做自己的 Side-Project
前言從 AC 的課第一次聽到 Side-Project 之後，網頁技術還學不深的我並沒有太多想法，後來想轉職或是想申請像 AppWorks School 這類培訓營，看到條件都要求作品集，就萌生想製作屬於自己的 Side-Project 的念頭，但我印象中的 Side-Project 好像都要很厲害才拿得出來，我就開始先從日常生活中發想，有什麼主題可以製作，覺得先有想法再來一步一步實作完成。
因為不論是找工作或是申請培訓營都需要履歷表，也剛好在練習 BootStrap ，就先用 BootStrap 刻出一個屬於自己的一頁式網站履歷，完成這個網頁非常有成就感～
今後也多了屬於自己的排版的網頁履歷表可以用，我覺得超棒！
後來陸續又想了好多點子，但每次要實作的時候都因為腦袋思緒太過混亂、網頁技術程度不足不懂得怎麼做才能達到目標、、、等好多原因放棄‧（簡單來說就是自己懶又容易放棄） ╮(╯∀╰)╭
不過一直都還是有在嘗試拿別人做過的專案來練習，某一天做到 todo-list 的時候，突然靈機一動想到，這樣的東西好像可以拿來做一點延伸！
於是開啟我的小小 Side-Project 專案目標 ( ...
［六角學院 密室逃脫心得］第二關 — 找出行動版 X 軸問題
怕分享的內容會不正確，我會於助教批改作業後確定過關後，才分享解題過程及心得喔～
前言因為自己工作有要用到，所以看了 Amos 大大的幾個 Youtube 影片好對 BootStrap 這個套件有點了解， Amos 老師的講解真的很清楚，加上公司同事操作一遍如何加上 CSS 把套件變成自己想要的樣子，我就大概能上手，也自己組出幾個頁面玩了一下，感覺自己對 BootStrap 的特性算是清楚。
看到這關的題目的時候還在心裡想說，嗯嗯嗯 很簡單啊！感覺都會解！
解題前 OSX 軸是什麼還不知道，先放著。
BootStrap 卡片想要等高的話，就是把卡片們的高度設定統一就行了！
行動版要呈現單欄這根本小 case ，我自己練習的時候做過好幾遍！
正式解題google 了一下，原來 X 軸就是頁面拉窄之後顯示的橫向卷軸，如果跑出這個卷軸的話，代表網頁不是響應式的，我記得會顯示這個卷軸的原因應該是 < meta > 標籤沒有設定好，檢查一下原始檔，這裡的標籤有設定好，那一定是有某個元素的寬度被寫死了，用 dev tool 看一下哪個元素的寬度太寬，修改一下就行！
卡片的部分都給他們 ...
［六角學院 密室逃脫心得］第一關 — 初來乍到，GitHub 真香
初衷練習和讀了很久的 HTML/CSS/JS 各種形式的教學
因為在職場上不可能完全只接觸到這些
總有些更重要的很難自己練習或光靠讀教學就能學會
去年雙十一鐵下心買了六角學院的網頁設計組合包(到現在還沒看完 XD)
這次又被「專為前端量身打造的線上遊戲版密室逃脫」吸引到
標題「你要留下 還是塊陶？」以遊戲的方式帶入真實前端設計師在職場會面臨到的各種情境
邊遊戲邊引導和教學 感覺跳脫一直看影片的學習方式 對我來說很有趣
看到用 Line 傳訊息的部分 覺得更入戲 就下定決心報名了！
終於等到開課啦趁著剛開始沒多久先記錄一下心得
密室逃脫第一關 — 初來乍到，GitHub 真香
名副其實要帶領我們學習 GitHub
對於我來說… 真是第一關就直接打到痛點
我超級不會 GitHub
真的就像是剛進到新公司的前端菜鳥 硬著頭皮去詢問操作方式(抖
好在有詳細的教學 帶領我一步一步操作
不熟悉的慢慢跟著教學操作 然後終於完成 開心的交出我的作業！
結果隔天回平台看 我的作業居然審核沒通過 哪尼？！ Σ(ﾟДﾟ；≡；ﾟдﾟ)
原來是我搞錯要 fork 的專案…
只好又再重作了一次 希望能順利過關 ...
JavaScript實作練習 part.3-2
幫前一篇做的時鐘版面加上 CSS 美化～
前情提要，本篇講述這篇文後續美化！JavaScript實作練習 part.3-1
這兩篇文更新間隔有點久，因為工作忙再加上不斷學新的技術，追線上課程的進度 QQ
還有我一直卡關過不去，在想我每張截圖的時間都不是同一天，而且我美化後的程式其實跟原本的差超多怎麼辦．．．
後來覺得算了，我就是分很多天擠出一篇文章的，所以文章截圖的時間本來就不同天喔！
完成圖
其實這篇跟上一篇的電子鐘從頭到尾都不同，因為我後來覺得這樣比較簡單好看 XD
程式的部分，因為已經知道利用 getFullYear() 可以取得時間，再利用 document.getElementById("Show-year").innerHTML = yy + "年"; 把取得的時間推回我們要顯示時間的格子去顯示出來。
所以我把它們都加以改寫一下，把每個時間都拆開來用不同的 <span> 格子顯示，方便於用 CSS 去針對每個格子做美化的設定。
上程式碼囉！12345678910111213<body onload="Sh ...
從網頁設計麻瓜進化成前端菜鳥的歷程 - 「網頁設計是什麼？」
前情提要在我國小剛學會使用電腦時，接觸的部落格就跟網頁設計有關，那時候不知道什麼叫網頁設計，只知道想要把部落格變得很漂亮就要查語法來修改後台設定，那時候只知道這東西叫做「語法」。
國中時期從部落格變成無名小站後，因為同樣是奇摩的服務所以差異不大，同樣查語法去後台修改排版，還是認為叫做「語法」。
高中時期有一門計算機概論課，才學到「網頁設計」這個名詞，才知道網頁原來是用 HTML 和 CSS 組合而成，還要透過網路伺服器、網域等設定，才能變成大家都能看得到的網頁，而用來做網頁設計的軟體叫 Dreamweaver ，在這時期學了基礎的 HTML 標籤和 Dreamweaver 操作及程式語言，此時對網頁設計有了一些基礎的認識，但不知道原來設計出一個酷炫網頁還需要搭配其他複雜的程式。
大學時期學的網頁設計，業界講師教了 SEO 的概念及重要性，也引導我們做出屬於自己的簡單網頁並將作品放到學校的 FTP 上，讓我們可以透過網址瀏覽自己做的網頁，老師還教了讓網頁區塊保持在中間，不會因為視窗寬度改變而被遮蔽的概念（即響應式網頁，我忘記是老師沒有教到這個名詞還是我自己忘了），還有教 HTML 怎麼搭 ...
銀黏土初體驗—我的第一堂銀黏土課
從小就喜歡動手做屬於自己東西，因為自己的手指很肥，戴不下市面上的漂亮女戒，萌生了想做專屬自己的戒指的心願，觀望金工相關課程好久，終於報名了初級金工銀黏土課程啦！
我報名的是師範大學夜間進修部開的課，報名完就一直很期待開課～
第一堂課老師讓每個人先買一包工具包和銀黏土材料，畢竟「工欲善其事 必先利其器」，總要有工具和材料才能上課嘛。
拿到工具後，老師就開始講解銀黏土的特性。
銀黏土是黏土狀的銀，由純銀粉末、水、結合劑所組成，因為是黏土的狀態所以容易用手捏或是用模型等工具塑形。
每家廠商用的結合劑好像不一樣，但都是無毒的，作品燒成後結合劑會揮發掉，最終作品都會變成99.99%純銀的材質！（聽起來是不是很酷～）
我覺得銀黏土最不容易的是要保持剛好的水份，才可以輕易揉捏，如果水份太多的話就會成泥狀，不好塑形還會黏在手上或其他地方，但如果太乾的話又很容易裂掉碎掉，第一次接觸這門技術，還不太能掌握訣竅，真的有點小崩潰．．．
而銀黏土在燒成時因為結合劑會揮發掉，作品會收縮，所以在做戒指時要視情況加大戒圍，還有如果做比較細的線條的話，怕燒成時收縮會斷掉，所以好像不太適合用來做太細緻的東西。
第一堂課 ...
用純 HTML + CSS 畫出圓餅圖（精簡版）
寫前一篇『用純 HTML + CSS 畫出圓餅圖』在查找資料確認漸層寫法的時候，我發現從根源就解決問題、更厲害更簡單的製作圓餅圖方法．．．
不用很多層複雜又包來包去的 Div 區塊、不用複雜的 CSS ，就能做出圓餅圖！
完成圖
摸索了這麼多種圓餅圖的作法，原來原本的 CSS 漸層就可以達到了．而且還有這麼多玩法，是我對 CSS 的瞭解太淺薄了．．． Orz
看一下用 CSS 漸層做圓餅圖是怎麼辦到的吧！
1234<div> 用 CSS 漸層做的圓餅圖 <div class="pie"></div></div>
12345678.pie { width: 100px; /* 寬 */ height: 100px; /* 高 */ border: 3px solid white; /* 邊框 粗3px 實線 白色 */ border-radius: 50%; /* 圓角 50% (變成圓形) */ box-shadow: 0px 1px 5px 5px rgba(0, 0, 0, 0.1); / ...
用純 HTML + CSS 畫出圓餅圖
爬了很多文，終於做出不用外掛的純 HTML + CSS 的圓餅圖。在 AC 的課程作業中有練習為鋼鐵人製作簡單的名片及介紹網頁，我在做的時候就一直想著之後也要為自己做網頁版名片和履歷！
上網搜尋看到別人的作品用圓餅圖或是長條圖來呈現技能熟練度，我原本想說：「喔，就放幾張圖片就好了。」，準備要開始用 AI 畫圖之前，覺得先用 Devtools 看一下那個人的圖是怎麼做的好了，看一下完全佩服耶！人家是用語法寫的，不是放圖片！
我看到的履歷畫面類似這樣（圖片截自網路上別人的作品）
當時看到這個呈現方式就非常想學，上網查了很多關鍵字，但網路上的文章很多都是用外掛套件做的，很少用純 HTML + CSS 做，我有查到原作者做這個圓餅圖的原理跟教學，同一篇也有教長條圖和其他圖的畫法，非常實用，但我覺得原理有點複雜，後來我又找到了幾篇覺得比較好理解的，我會一併把參考文章放在最後呦！
跟著實作了之後我做了兩款不同的樣子，一種是單純圓餅圖，字要放外面；另一種是外框顯示比例，中間可以放字。
看看成品以 50% 作為區分，50% 以下和 50% 以上的作法有一點點不一樣，所以有四個圓餅圖。
先做單純的圓 ...
JavaScript實作練習 part.3-1
來到第三個小練習，今天來做一個電子鐘！一樣，因為我參考的網站沒有做版面美化，這次的練習也會順便加上一點 CSS 讓版面好看一點～
但篇幅好像有點長，我會把 JS 做出顯示時間的部分和加上 CSS 美化版面的部分拆分成兩個篇幅，本篇先講述怎麼用 JS 讓時間顯示出來喔！
先來看個完成後的樣子
前面兩個小練習沒有 Follow 到的話可以點這裡 ↓JavaScript實作練習 part.1JavaScript實作練習 part.2
開始練習吧！看一下原版的程式
也是按照邏輯再依照自己的喜愛微調，先寫好 HTML 的部分，把 Javascript 的程式碼搬到 JS 的欄位～
來看 HTML 的部分
因為要呼叫 JS 函式，所以要在 <body> 裡面加上 onload=”ShowDate()”。
供 JS 回傳時間的格子用 4 個 <p> 來放，原本的網站用 4 個 ID ，名稱依序是 showbox1 ~ showbox4 ，不過因為我之前在 AC 學習的時候，教學預設都用 class 來為 CSS 命名，我在練習這個的時候就覺得，為什麼要用 ID 命名不能用 ...
JavaScript實作練習 part.2
來到第二個小練習，今天要做的是數值相加！我參考的網站因為有點舊了，加上建立這個網站的老師目的單純是 for Javascript 教學，所以沒有做版面美化，今天練習也順便加上一點 CSS 讓版面好看一點吧～
先來看個完成後的樣子
開始練習吧！看一下原版的程式
按照這個邏輯依樣畫葫蘆，再依照自己的喜愛做一點調整，先寫好 HTML 的部分，把 Javascript 的程式碼搬到 JS 的欄位～
來看 HTML 的部分
HTML 裡有一個 form ， ID 名稱叫做 form。
原版的程式 ID 名稱叫做「form1」，但因為從頭到尾只有用到一個 form，所以我把「form1」改成「form」。
form 裡面裝有兩個數值，輸入格式是 text ，並將它們用<br>斷行。
再來有一個按鈕，中間顯示的文字依照我喜歡的去更改，然後按鈕點擊後要呼叫 JS 的函式，名稱叫做 add()。
最後是數值相加後回傳答案的格子，使用 <p> 來做，並且給他一個 ID 名稱叫做 demo，讓 JS 程式回傳值。
接下來來看 JS 的部分
要讓網頁有反應跟互動性，所以要加上 JS ～ ...