跳至主要内容

第五次社課

信息

原始 MD by 毓昇

前端是甚麼可以吃ㄇ
YuSheng

貼心共筆​

前後端的概念​

NOTE: 網站的前後端如何運作，可以想像網頁是文件，一開啟瀏覽器的時候，我們會跟遠方的電腦（對方放網頁的地方）請求一個網頁，過程中用文字的方式傳過來（也就是我們接收到，之後要教學的html/css/js)，這些程式碼去構成我們看到的視覺樣子，由瀏覽器接收到這些之後，三者相輔相成變成我們看到的網頁。

image alt NOTE: 前端的重點是網頁構型、圖像呈現跟資料產出，除了讓網頁美美的很炫會動之外，在不同的裝置也要能順暢轉換。

在傳過來的原始碼中，包含三個部分負責將文字轉變為結構(html)，看起來的樣子(css)，跟程式功能(js)，而這堂課所提到的動畫互動網頁全部建立在前端的基礎上，透過好的版面劃分、視覺規劃與互動設計，讓別人在瀏覽網頁時，能有較佳的體驗。

今天我們就是來當櫃台的 :D​

工作前要先應徵​

所以我們來註冊一下這個網站ㄅ​

基礎 HTML / CSS​

HTML 部分​

  • 元素&排列的概念
  • 結構&層級的概念

CSS 部分​

  • class & id 的概念
  • padding & margin 概念
  • 絕對/相對定位
  • display 顯示方式

CSS 選擇器​

選擇器的概念

概念釐清​

選擇器圖片

CSS Reset​

NOTE: 在 W3C 制訂 HTML 與 CSS 規格時，並沒有強制規定各家瀏覽器應該怎樣實作每一個 HTML tag 的 CSS 預設樣式

Flex 排版​

  1. 軸線
  2. 對齊方法

來練習一下吧​

講完終於可以開始實做惹​

先來打開這份檔案ㄅ​

圖片在這​

開始分析一下結構​

你可能會想說​

設計稿結構 bad

我知道！剛剛有教過​

設計稿結構 soso

設計稿結構 good

finish​

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;