從0開始的網頁設計HTML & CSS基礎建設

Anna Su

窺探網站建置的任意門

LESSON 1

窺探網站建置的任意門

LESSON 1

1. 網際網路的基礎觀念

2. 前端工程師必備技能

3. 分享前端學習資源

為什麼要了解網際網路的基礎觀念？

讓我們先來了解網際網路的基礎觀念吧

為了錢前途，你必須不斷學習！

讓⾃自⼰己成為更好的前端⼯工程師

魔⻤⿁鬼藏在細節裡

How does the Internet work ?

圖⽚片來源

What is DNS ?

DNSgoogle.com ?

45.732.34.353

DNS (網域名稱系統)是什麼？

將Domain (網址)轉譯成 IP 位址， 然後帶您前往所需網站。

了解更多…

What is WEB Server ?

WEB Server負責回應瀏覽器等⽤用⼾戶端軟體的請求

World Wide Web Consortium

IE、Firefox、Safari、Chrome及Opera

圖⽚片來源

Is Your Web Browser Fighting (for) You?

圖⽚片來源

圖⽚片來源

Why You Must Test Browser Compatibility

前端工程師必備技能

Responsive Web Design / CSS Frameworks / JavaScript Frameworks / Version Control /

Web Performance / Browser Development Tools /Building and Automation Tool

HTML | CSS | JavaScript

新增網⾴頁內容，組織網站架構

圖⽚片來源

建⽴立網站架構與內容

HTMLHyperText Markup Language

HTML Tag

圖⽚片來源

Document Object Model (DOM)

HTML Parser

透過HTML 建⽴立網站基本內容

接著我們要來認識什麼是 CSS

圖⽚片來源

CSS

圖⽚片來源

修改網站樣式

CSSCascading Style Sheets

CSS Parser

圖⽚片來源

美化你的網⾴頁

Main flow examples

Help to show content in browsers

Help to style the content Help to interact with content

讓你的網⾴頁變得很酷

讓同⼀一個網站⽀支援多個設備

Foundation Bootstrap Pure960 grid system

加速網站開發，有規則可依據、維護性⾼高

Ember.jsAngular.js

Backbone.jsReact.js

加速網站開發，有規則可依據、維護性⾼高

圖⽚片來源

追蹤檔案的變更記錄

圖⽚片來源

Web Performance

Browser Development Tools

Building and Automation Tool

What is Front End and Back End?

Front End

Back End

好康 分享前端學習資源

官⽅方網站 中⽂文翻譯

分享結束，很高興認識大家 ，謝謝：）