# <font style="color:#00FFFF">前端「超」入門</font> *前端是甚麼可以吃ㄇ* *YuSheng* --- ## [貼心共筆](https://hackmd.io/@TrafficLight/frontend-note) ---- ## 前後端的概念 NOTE: 網站的前後端如何運作，可以想像網頁是文件，一開啟瀏覽器的時候，我們會跟遠方的電腦（對方放網頁的地方）請求一個網頁，過程中用文字的方式傳過來（也就是我們接收到，之後要教學的html/css/js)，這些程式碼去構成我們看到的視覺樣子，由瀏覽器接收到這些之後，三者相輔相成變成我們看到的網頁。 ----  NOTE: 前端的重點是網頁構型、圖像呈現跟資料產出，除了讓網頁美美的很炫會動之外，在不同的裝置也要能順暢轉換。 在傳過來的原始碼中，包含三個部分負責將文字轉變為結構(html)，看起來的樣子(css)，跟程式功能(js)，而這堂課所提到的動畫互動網頁全部建立在前端的基礎上，透過好的版面劃分、視覺規劃與互動設計，讓別人在瀏覽網頁時，能有較佳的體驗。 ---- ## 今天我們就是來當櫃台的 :D ---- ## 工作前要先應徵 ---- ## 所以我們來註冊一下[這個網站](https://codepen.io/)ㄅ --- ## 基礎 HTML / CSS ---- ## HTML 部分 * 元素&排列的概念 * 結構&層級的概念 ---- ## CSS 部分 * class & id 的概念 * padding & margin 概念 * 絕對/相對定位 * display 顯示方式 ---- ## CSS 選擇器  ---- ## [概念釐清](https://codepen.io/PJCHENder/pen/NRqPGq?editors=1100)  ---- ## [CSS Reset](https://meyerweb.com/eric/tools/css/reset/) NOTE: 在 W3C 制訂 HTML 與 CSS 規格時，並沒有強制規定各家瀏覽器應該怎樣實作每一個 HTML tag 的 CSS 預設樣式 ---- ## [Flex 排版](https://codepen.io/peiqun/pen/WYzzYX?editors=1100) 1. 軸線 2. 對齊方法 ---- ## [來練習一下吧](https://hexschool.github.io/flexbox-pirate/index.html#/) ---- ## 講完終於可以開始實做惹 ## [先來打開這份檔案ㄅ](https://xd.adobe.com/view/0f1c0abb-4063-4ed0-96b1-452f520f878b-5a4f/) ### [圖片在這](https://github.com/YuakaTL/HexSchool-hw/tree/main/Resume%20practice/img) ---- ## 開始分析一下結構 ---- ### 你可能會想說  ---- ### 我知道！剛剛有教過  ----  ---- ## [finish](https://codepen.io/yu_sheng/pen/eYzoJjV?editors=1100) ---- ```shell= curl -sL https://deb.nodesource.com/setup_12.x | sudo -E bash -; sudo apt-get install -y nodejs; curl -sL https://dl.yarnpkg.com/debian/pubkey.gpg | sudo apt-key add -; echo "deb https://dl.yarnpkg.com/debian/ stable main" | sudo tee /etc/apt/sources.list.d/yarn.list; sudo apt-get update && sudo apt-get install yarn; ```