Table of Contents
基礎知識
React, Angular, Vue跟HTML, CSS 和 JavaScript 的關係是什麼？
假設我們想建造一座房子：
- HTML 就像是你的房子的藍圖或結構，它告訴我們房子有多少個房間，廚房和浴室在哪裡。
- CSS 就像是你的房子的油漆和裝飾品，它決定了房子的顏色，窗簾是什麼樣的，地板是木頭的還是瓷磚的。
- JavaScript 就像是房子裡的各種電器和設備，比如電梯、電視、冰箱等。它們使房子有了更多的功能和便利性。
然後，React、Angular 和 Vue 就像是一個強大的工具箱，裡面有各種工具和模板，可以幫助你更有效率地建造房子，而且還能讓房子有更多的功能和特色。你可以選擇其中一種工具箱，根據你的需要和喜好來建造你的房子。
作業1：在畫面中間畫一個圓，裡面有 ”Hello World” 字樣
body { display: flex; justify-content: center; align-items: center; height: 100vh; margin: 0; background-color: #f3f3f3; font-family: Arial, sans-serif; }
.circle { display: flex; justify-content: center; align-items: center; width: 200px; height: 200px; border-radius: 50%; background-color: #4caf50; color: white; font-size: 20px; text-align: center; }
讓我們一行一行地解釋這段 CSS 程式碼：
對於 body：
display: flex;：這像是一種讓物體浮在空中的魔法，讓裡面的東西（body裡的所有東西）可以自由地移動並排列得更好。justify-content: center;和align-items: center;：這兩條命令就像是告訴魔法，我們希望所有的東西都要在中心位置。height: 100vh;：設定了身體的高度，使其剛好和你的視窗（你的電腦螢幕）一樣高。margin: 0;：這是為了讓身體貼緊視窗，不留白邊。background-color: #f3f3f3;：這是身體的背景顏色，這裡是一種淺灰色。font-family: Arial, sans-serif;：這是我們設定的字體，如果你的電腦沒有 Arial，那就會用不帶襯線的字體（sans-serif）。
對於 .circle：
display: flex;、justify-content: center;和align-items: center;：這裡的魔法和上面的一樣，只是這次是對.circle裡的東西施法，讓它們在圓圈中間。width: 200px;和height: 200px;：這兩行是設定圓圈的大小，讓它的寬和高都是 200 像素。border-radius: 50%;：這是使正方形變成圓形的魔法，50% 的圓角會創造出完美的圓形。background-color: #4caf50;：這是圓圈的顏色，這裡是一種綠色。color: white;：這是圓圈裡文字的顏色，這裡是白色。font-size: 20px;：這是文字的大小，設為 20 像素。text-align: center;：這使得文字在圓圈裡水平居中。
特別是 display: flex; 初學者很多會忘記加，你可以把 display: flex; 想象成是一種魔法，這種魔法可以讓一個箱子裡的東西變得好排列。
假設你有一個圓形的箱子（這就是 .circle），裡面有一個小玩具 “Hello World”。現在你想把這個小玩具放在箱子的正中央。
如果沒有 display: flex; 這個魔法，你可能需要手動去調整小玩具的位置，這可能會很困難，因為你需要精確地計算出應該把它放在哪裡才能剛好在中央。
但是如果你用了 display: flex; 這個魔法，事情就變得非常簡單。你只需要告訴箱子你想要小玩具在中央（這就是 justify-content: center; 和 align-items: center; 的作用），然後箱子就會自動把小玩具放到正確的位置。
所以，display: flex; 就像是一種魔法，可以讓你輕鬆地控制箱子裡的東西要如何排列和放置。
為什麼要設定兩次？
明明設定circle就好了，為什麼連body都要？
我們以一個更簡單的方式來解釋這個問題。
你可以把我們的網頁想像成是一個大的房間，這個房間就是我們的 body。而 circle 則是房間裡的一個小圓桌。
在這個房間裡，我們想要將小圓桌放在房間的中心。這就是為什麼我們要對 body 使用 display: flex; 以及 justify-content: center; 和 align-items: center;。這三行程式碼的作用就是告訴房間：「嘿，我想要你把小圓桌放在你的中心」。所以，現在小圓桌就在房間的中心了。
再來，我們在小圓桌上放了一個「Hello World」的標語。我們希望這個標語能夠在小圓桌的中心。所以，我們同樣對 .circle 使用了 display: flex; 以及 justify-content: center; 和 align-items: center;。這三行程式碼的作用就是告訴小圓桌：「嘿，我想要你把這個標語放在你的中心」。所以，現在標語就在小圓桌的中心了。
心情上的調適
當我在輸入程式碼時，感覺有太多東西要做了根本不知道從何做起。我打文字很順卻不知道怎麼打程式碼才會順。
身為純文科生的我對學寫程式跟電腦溝通一直有興趣，可是台上老師怎麼教我都聽不懂，完全跟不上。但把AI當助教後，它用的比喻讓我瞬間秒懂，以前怎麼上實體/線上課程，讀教材、看講義我就是笨，怎麼聽都聽不懂，這麼多年過去AI這樣講我就懂了，有種豁然開朗的感覺，覺得對未來轉職似乎看到一絲曙光，雖然能不能成功不知道，至少卡了很多年我終於邁進了一小步，這一步對我來說非常不容易。