網頁設計HTML5、CSS3學習目錄

Yanwei Liu

8 min readMay 19, 2019

六角前端大補帖 (免費前端學習資源 (JavaScript (中高階觀念:fire: 邁向 JavaScript 勇者之路常見面試題目 ...

六角前端大補帖 (免費前端學習資源 (JavaScript, HTML、CSS, RWD 手機版網頁 , jQuery, 編輯器 (:star: VS Code :star: Sublime :star: Atom ), 其他…

coggle.it

紮實的網頁前端學習路線與資源推薦

雖然說我一直很清楚自己目前偏好的學習方法以及路線，並且把我認為適合的路徑都變成上課的大綱拿去教學，但好像沒多少人會去看那個大綱，而且大綱並沒有詳細解釋背後的原因。

medium.com

Your Career in Web Development Starts Here

Our full stack curriculum is free and supported by a passionate open source community. View Full Curriculum This is the…

www.theodinproject.com

網頁設計速學筆記索引

暑假時為了教二哥網頁設計寫了下列筆記, 照二哥申請入學時所寫的學習計畫是排在大一上學期, 但開學後發覺課業太多, 可能要推遲到明年暑假了. 除了當教案, 我自己寫程式也常要參考, 畢竟東西太多不可能全記得, 寫下筆記還是最可靠.

yhhuang1966.blogspot.com

靜態網頁產生器Static Site Generator

Static Site Generators — Top Open Source SSGs | Jamstack
開源SSG列表
Top 5 Static Site Generators in 2022 (and When to Use Them)
介紹什麼是Static Site Generator
Publii | Static Site Generator with GUI to build a fast SEO-friendly website
Publii是一個靜態網頁產生器，運作速度還蠻快的。主要功能是產生一個基於HTML+CSS+JS的靜態網頁部落格，使用上相當方便，支援直接佈署到FTP、GitHubPages、AWS、Google Cloud等平台

HTML

如何將Google GA的JS追蹤代碼(Script)貼到多個不同頁面中？

如何透過HTML標籤實現網域轉址？

How To Create Your Google Custom Search Form?

針對HTML的iframe框架去除Bottom白邊

如何在網頁中嵌入Google表單？

如何將亂碼的PHP網站(big5格式)轉換成能正常顯示的網頁(UTF-8格式)？

HTML语法基础-全端观察

html是hypertext markup language的缩写，即超文本标记语言。html是用于创建可从一个平台移植到另一平台的超文本文档的一种简单标记语言，经常用来创建web页面。可以说明文字、图形、动画、声音、表格、链接等。…

www.kyotos.top

網頁技術速學筆記 (一) : HTML 基礎

此份速學筆記是二哥上大學前暑期先修課程網頁設計的第一部份 : HTML 基礎. HTML 網頁可以放在本機電腦用瀏覽器載入檢視效果, 但最好能上傳到雲端伺服器中, 這樣在全世界任何有 Internet 的地方都能瀏覽…

yhhuang1966.blogspot.com

CSS

CSS的選擇器

1. ID selector(#p1):

<style>
  #p1 {color:green; font-weight:bold;}
</style>

<body>
  <p id="p1">Hello World 1</p>
</body>

2. Class selector(.header):

<style>
  .header {background:violet;}
</style>

<body>
  <table>
    <tr class="header">
   <th>AA</th>
   <th>BB</th>
   <th>CC</th>
   <th>DD</th>
 </tr>
  </table>
</body>

3. 後代selector(div p span):
<style>
  div p span{color:green; font-wight:bold;}
</style>

<body>  
  <div><p><span>Hello World</span></p></div>
</body>

4. 類型selector(span):
<style>
  span {text-shadow:navy 3px 3px 3px;}
</style>

<body>
  <span>Hello World</span>
</body>