首先，HTML 是一種讓我們告訴電腦我們希望網頁看起來的方式。HTML 的每一個部分都像是一個積木，你可以將這些積木組裝起來，形成你想要的網頁。
在這個程式碼中，你在”body”裡建了一個”header”，這是網頁的頭部。在”header”裡面，你又建了一個”div”（又是一個積木）。這個”div”裡有一個列表，這個列表裡有各種網頁的連結，像是”首頁”、”關於我們”等等。還有一個叫做”logo”的部分，就像我們書本上的封面標題一樣。
然後你建立了另一個”div”，這個”div”裡面有一些文字，並且有一個按鈕，當你點擊這個按鈕，它會連結到”關於我們”的部分。
那麼，CSS 是什麼呢？CSS 是一種讓網頁看起來更美觀的語言。你可以把它想像成你的畫筆，你可以用它改變文字的顏色，背景圖片等等。
在你的 CSS 裡，你為”hero”這個部分添加了一個背景圖片，並且讓這個圖片填滿整個區域。你還將文字的顏色設為白色。你還創建了一個半透明的黑色覆蓋，它位於背景圖片的上方，這樣可以使文字更清晰可見。最後，你用”z-index”確保所有的內容都在這個半透明的黑色覆蓋上方。
所以，簡單來說，HTML 是用來搭建你的網頁的積木，而 CSS 是用來讓你的網頁看起來更漂亮的畫筆。
HTML:
<body id="home">：這行說明了整個網頁的主要區塊（body）開始，並給予了它一個 id 叫 “home”。你可以把 id 想像成人的名字，讓我們知道這個區塊是誰。<header class="hero">：這裡開始了一個 header 區塊，並給它一個 class 叫 “hero”。class 是一種標籤，我們可以用它來找到這個區塊並改變它的樣式。<div id="navbar" class="navbar top">：這行建立了一個 div（一個一般的區塊），並給了它一個 id 叫 “navbar” 和一個 class 叫 “navbar top”。這個區塊將會被用來做導航欄。<h1 class="logo">：這裡建立了一個 h1 標籤（最大的標題），並給了它一個 class 叫 “logo”。這裡會是網站的 logo 位置。<span class="text-primary"><i class="fas fa-book"></i> Edge</span >Website：在這個 h1 標籤中，建立了一個 span（一種可以用來組織內文的區塊），並給了它一個 class 叫 “text-primary”。這個 span 中還包含了一個 icon，顯示一本書的圖示，然後是 “Edge” 這個文字。後面接著的 “Website” 與前面的內容合在一起，就成為了 “Edge Website”，也就是網站的名稱。<nav>：這行建立了一個 nav（導航）區塊，這通常用來放置網站的導航連結。<ul>：這行開始了一個 ul（無序列表），列表中的每一項都會被顯示成一個點。<li><a href="#home">首頁</a></li>：在這個列表中，我們創建了一個 li（列表項目）。每一個 li 中都包含了一個 a 標籤（連結），這些連結會導向到網頁中特定的區塊。在這個例子中，這個連結會導向到 id 為 “home” 的區塊，也就是網頁的首頁。 我們對於其他的<li><a href="#about">關於我們</a></li>、<li><a href="#cases">過往實蹟</a></li>、<li><a href="#blog">精選文章</a></li>、<li><a href="#contact">聯絡我們</a></li>都有相同的理解。<div class="content">：這行建立了另一個 div，並給了它一個 class 叫 “content”。這裡將會放置網頁的主要內容。<h1>The Sky Is The Limit</h1>：這是一個 h1 標題，寫著 “The Sky Is The Limit”。這可能是一句標語或者是這個網頁的主要訊息。
<p>你的潛力，沒有極限</p>：這裡是一個段落（p 標籤），文字內容是”世界級的高水準服務”，可能是對企業或網站提供的服務進行簡短的介紹。<a href="#about" class="btn"><i class="fas fa-chevron-right"></i> Read More</a>：這裡創建了一個連結（a 標籤），並給了它一個 class 名稱 “btn”（代表它是一個按鈕）。當使用者點擊這個按鈕，他們將被帶到 id 為 “about” 的區塊。此按鈕上有一個向右的箭頭圖標，以及 “Read More” 的文字。</header>：這裡代表 “header” 區塊的結束。
CSS:
.hero {：這裡開始了一個名為 “hero” 的 class 的樣式設定。你可以把 CSS 想像成是一種畫筆，你可以用它來改變 HTML “積木” 的顏色、大小等等。background: url('../images/home/showcase.jpg') no-repeat center center/cover;：這行設定了 “hero” 區塊的背景圖片，並設定了圖片不重複（no-repeat），位置置於中央（center center），並且大小為覆蓋整個 “hero” 區塊（cover）。height: 100vh;：這行設定了 “hero” 區塊的高度為 100vh，vh 是一種單位，100vh 代表螢幕可視區域的 100% 高度。position: relative;：這行讓 “hero” 區塊的位置為相對位置，這對於接下來要定位的子元素非常重要。color: #fff;：這行將 “hero” 區塊內的文字顏色設為 #fff，也就是白色。.hero::before {：這裡開始了一個 “hero” 的偽元素 “before” 的樣式設定。偽元素可以讓我們添加並樣式化一個實際上不存在於 HTML 中的元素。content: '';：這行給 “before” 偽元素設定了內容，雖然內容是空的，但對於偽元素來說，這行是必要的。position: absolute;：這行將 “before” 偽元素的位置設為絕對位置，也就是相對於它的 “hero” 父元素的位置。top: 0; left: 0;：這兩行將 “before” 偽元素的位置設定在 “hero” 區塊的左上角。width: 100%; height: 100%;：這兩行設定了 “before” 偽元素的寬度和高度皆為 100%，也就是覆蓋整個 “hero” 區塊。background: rgba(0, 0, 0, 0.6);：這行設定了 “before” 偽元素的背景色為半透明的黑色，使得 “hero” 區塊的文字更易於閱讀。.hero * {：這裡開始了一個樣式設定，針對 “hero” 區塊中的所有子元素（* 代表所有）。z-index: 10;：這行將 “hero” 區塊中所有子元素的層級設為 10，這使得這些元素都會顯示在 “before” 偽元素之上。