大家好，我是富士大顆 Aiko，今天是鐵人賽第一天，就從輕鬆的話題開始吧！

在還沒踏入轉職這條路之前，雖然在電商界待過，但其實我並不清楚工程師有什麼差別，
甚至無法分辨台積電的工程師跟軟體工程師...
(畢竟自己的工作就很忙了還管你的工作是什麼:D)(好難聊天？)

再加上本身是超純文組，身邊說實在連一個工程師都沒有，
即使朋友的朋友是工程師，他們也只會說自己是工程師，懶得跟人解釋
（的確雙方都不太積極）
也就造成三個月前的我如井底之蛙
（呱呱）

在 AstropCamp 期間，跟其他同學交流，難免也會聊到「你想當前端，後端，還是全端？」
或是職涯發展的講座，老師也會提到「三端的技能樹與未來出路」
這個時候才開始（孩子，只要開始就不嫌晚）認識軟體工程師的不同專業領域：

前端，Front-End Developer 或 Front-End Engineer

簡而言之就是負責使用者會看到的畫面，包含從瀏覽器看的純瀏覽（靜態）或是互動內容。主要跟 UI/UX 設計師或 PM 對接，但也要跟後端溝通，例如怎麼從資料庫拿資料。
基本的技能是 html/css，靜態的頁面通常可以用 html/css 完成，更古早時期的網頁還只會有 html ，因為 CSS 是從 html 獨立出來的。

html 是最最基本的網路架構，用人體來比喻的話，就像骨架，也就是網站的架構。他是一種標籤，來註明這個是什麼，像是：

<h1>我是第一大標題，headline</h1>

<p>這裡是文章，paragraph</p>

CSS(Cascading Style Sheets) 則是皮膚，有黃的有白的有黑的這樣，頭髮是長是短是卷是直等等特徵

CSS 可以設定的有超多，而面臨現在有很多不同的裝置，也要做除了 PC 之外的介面設計，像是平板、手機（想到還有 apple watch ，發芬！）等，也就是 RWD (Responsive Web Design 響應式網站設計)，可以用 CSS 的媒體查詢：

@media media-type and (media-feature) {
  /* 設計樣式 */
}

media-type 有 screen 或 print 例如：

@media screen and (max-width: 600px) {
  /* 在螢幕寬度小於或等於 600 素時的樣式（寬度最大 600px ） */
}

也可以綜合寫：

@media screen and (max-width: 600px) and (orientation: portrait) {
  /* 在寬度最大 600 px 且直立時的樣式 */
}

除了 RWD 比較複雜之外，grid 跟 flex 這兩大切版家族，也是挺令人頭痛的。對前端有興趣的朋可以詳閱金魚都能懂系列，新竹吳克群 Amos 老師，會有非常詳盡的介紹。

另外還有 JavaScripts，網站不無聊，真的需要它，拿人體比喻的話就是動作，看是要揮手、鞠躬，還是跳舞。

JavaScripts 是個讓人又愛又恨的語言，但他幾乎要統治全世界了，所以想要走前端的朋朋，現階段是必定要掌握一下它，期待未來有個善良（?）的語言可以取代它。

進階一點（薪水多一點），就可能要學會框架，像是 Vue 或是 React，會讓你創造出超炫的網站視覺。

而網路技術發展到現在的超 booming 時代，也有很多開發套件，如：Boostrap 跟 Tailwind 兩個滿主流的 CSS 開發框架，甚至是我們這次專案使用的 Daisy UI （畫面選擇很多還有繁體中文哦），也都是我們會用到的好工具。

今天先講到前端，明天講二端，
X DemoDay 才剛結束先讓我喘一下好不好！！！

說實在的在課程一開始，我其實對「前端」滿有興趣的，除了對於自己的美感相當有自信外，
還曾經在學米上過 UI/UX 的課，所以偷偷在心裡設下結界（？）
後端很難、後端很宅、後端我應付不來，但是上完三個月後，我發現資料結構相當有趣，真是搞不懂我自己。