Bootstrap 是世界上「非常受歡迎」「使用率非常高」「符合 RWD 」網站前端設計的框架套件。
在網頁的<head>區內 (在</head>的上一行) 輸入以下原始碼
<link rel="stylesheet" href="路徑/bootstrap4/css/bootstrap.min.css">
<script src="路徑/jquery-3.3.1.min.js"></script>
<script src="路徑/popper.min.js"></script>
<script src="路徑/bootstrap4/js/bootstrap.min.js"></script>
許多網站皆喜於圖示表達，Font Awesome 提供了豐富的圖示，可以搜尋「fa font 4.7」是Free的版本。
在網頁的<head>區內輸入以下原始碼
<link rel="stylesheet" href="路徑/font-awesome/css/font-awesome.min.css">
網站中我們將自定設計動畫，並且需要設計動畫的加減速特效。
在網頁的<head>區內輸入以下原始碼
<script src="路徑/jquery.easing.1.3.js"></script>
網站中有些標題或重要文字希望能有統一的字體，可以運用 Google Web Font。
在網頁的<head>區內貼上複製的語法，參考如下：
<link href="https://fonts.googleapis.com/css?family=Lobster|Righteous" rel="stylesheet">
在網頁的<style>區內或是.css檔案中貼上並修改複製的語法，參考如下：
@import url(https://fonts.googleapis.com/earlyaccess/notosanstc.css);
上述這一行也可以改用<link ... >放在<head>區，參考如下：
<link href="https://fonts.googleapis.com/earlyaccess/notosanstc.css">
另外建議在CSS撰寫區的最上方加上 font-family:... 參考寫法的註解，在需要的時候複製貼上，參考如下：
/* font-family: 'Righteous', 'Noto Sans TC', sans-serif;
英文圓體,中文黑體(英文字體必須寫在中文字體之前) */
viewport是螢幕上瀏覽器的可視區域，viewport的宣告是告訴瀏覽器，目前裝置有多寬(或多高)，以便在縮放時有個基準，如果設定 width=device-width 表示依比例呈現對應的可視寬度與高度。
在網頁的<head>區內meta宣告的位置輸入以下原始碼
<meta name="viewport" content="width=device-width, user-scalable=yes, initial-scale=1.0">
【screensiz.es】或【Device Metrics】
設計了手機、平板、桌機...等各種顯示器規格，方便快速查詢了解螢幕顯示器的規格。