前端「超」入門

前端是甚麼可以吃ㄇ
YuSheng

貼心共筆

前後端的概念

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

Image Not Showing Possible Reasons
  • The image file may be corrupted
  • The server hosting the image is unavailable
  • The image path is incorrect
  • The image format is not supported
Learn More →

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;
Select a repo