今天我們來實作一個專題看看，今天終於可以進到使用AI輔助寫程式的部分了～！
名片卡片
使用 html , css 實作一張自己的名片卡片。我知道，大家對設計沒什麼想法，也不知道要做成什麼樣子才對，那因為我們是教寫程式的系列課程，不是教設計的。那要怎麼實作名片卡片呢？
大家可以打開 canva 裡面有很多名片的範本，可以選一個喜歡的來試試看。
我挑選這個來試試看。
使用Copilot產生
當你選好要哪個後，可以直接丟到 Copilot裡面，請他幫你產生檔案。
幫我實作和圖片一樣 css 使用 style.css檔案
對，直接和他說你想一個和圖片一樣的html，然後指定他使用外聯式css的實作方法。等他開始跑一陣子，你會得到下面的樣子。
恩... 是不是好像和我給他的圖片長得不太一樣？
ps. 如果忘記怎麼使用 Copilot 可以回去看第二篇 [JS教學-2]使用Copilot建立你的第一個網頁：從Hello World到客製化頁面
如何得到想要的結果
其實現在你有兩個選擇，
- 繼續和AI說請他修改
- 自己調整到和圖片一樣
放棄這樣用
我們先是著繼續和Copilot說說看，請他修改，比較好的作法是和他指出哪裡不一樣，請他修改
上面是原圖 下面是你給我的， 可以在幫我改的像一點嗎 例如照片那邊卡邊設計不一樣 緞帶要卡住
的到的結果如下，恩，感覺跑掉更多了。
那怎麼辦，其實可以試著和AI說，讓他改到和圖一樣為止，我個人是覺得不太實際也很花時間。比較建議就是自己修改，因為其實你只仔細看，就是一些方塊的位置大小不一樣跑掉而已。自己調整一下應該就可以得到想要的效果。那我們可以進入修改實作的部分
調整
公司 Title
我們來看看和原圖不一樣的地方，首先是寫公司名字的地方，Copilot把黃色的裝飾帶和公司名字白色的區域混合在一起了，我們先調整這個地方。
可以看到 html 他是使用
<div class="company-bar">
<img src="https://img.icons8.com/ios-filled/50/000000/m.png" class="company-logo" alt="logo">
<div class="company-info">
<div class="company-name">Warner & Spencer</div>
<div class="company-sub">Company</div>
</div>
調整 css
.company-bar {
display: flex;
align-items: center;
background: #fff;
padding: 18px 32px 18px 18px;
border-radius: 20px;
margin-bottom: 32px;
margin-top: 40px;
width: 300px;
box-shadow: 0 2px 8px rgba(0,0,0,0.04);
position: relative;
left: 90px;
z-index: 3;
}
加上 left 調整育離和縮小寬度，卡片就更像了。
右邊卡片區域調整
右邊卡片大小位置都跑掉了要調整，第一個就是把照片區域置中
<div class="id-card-right">
<div class="photo-frame-outer">
<div class="photo-frame-inner">
<img src="https://images.pexels.com/photos/3775535/pexels-photo-3775535.jpeg?auto=compress&w=300&h=300&fit=crop" alt="profile" class="profile-photo">
</div>
</div>
<div class="person-info">
<div class="person-name">CHIAKI SATO</div>
<div class="person-title">Marketing Manager</div>
<div class="person-id">ID Number : 123-456-7890</div>
</div>
</div>
右邊卡片區域 copilot幫你把各區域名稱 class 定義的滿清楚的，可以看到右邊他就取名叫 card-right
再來在右邊再加上白色區域
最後補上少的白色緞帶，但其實是 z-index 需要調整。這樣調整後就和我們範例的卡片很像了吧！
程式碼範例如下。
建議大家可以去 cospace 使用 copilot 試試看。
工作中最常見的挑戰：把設計圖還原到一模一樣
其實這個練習就很像實際去工作常常會遇到的情況，設計師會給你一個設計圖，希望你可以把網頁做的和他給的設計圖一模一樣，對！就是一模一樣。寬度大小顏色留白空間...等都不能不一樣。你可能看不出來，但設計師的火眼金睛一定看得出來。
使用 copilot這類的AI雖然目前不太可能一次到位，但我覺得未來應該是有機會。但至少目前是可以快速幫你做出原型，你可以快速去修改符合需求。
善用AI可以幫我們節省時間，但有的時候他可能給的原型會讓你更難修改花更多時間。這些情況都需要你本身就對這些語法屬性有一定程度的了解和熟練。
練習題：模仿一張名片設計圖，用 HTML + CSS 還原畫面
你現在就是一位前端工程師，現在有個切版需求，設計部門的一位很漂亮但脾氣有點驕的正妹設計師丟給你一張名片設計，請你實作出來。
使用 Copilot 可以快速輔助完成這個任務，但細節修改還是的靠自己。
任務說明：
- 請前往 Canva 名片範本（可以 Google「Canva 名片」）選擇一張你喜歡的名片樣式。
- 開啟 Codespaces，新增一個
index.html和style.css檔案。 - 嘗試使用 HTML + CSS 完整還原這張名片的版型。包含：
- 版面配置（排版與區塊）
- 顏色
- 字型
- 留白與間距
- 對齊方式
- 邊框或圓角等細節樣式
- 可以自由使用
div,p,span,img等常見標籤，目標是「做出來像那張設計圖」。
小提醒：
- 不用太在意細節，做出大致的版型、有點樣子就很不錯了！
- 建議加上一點動畫效果（例如 hover）會更有趣。
- CSS 屬性可以 上 w3 school 看看，或是詢問GPT
完成後你會學到：
- 如何根據一張設計圖製作 HTML 架構
- 如何調整 CSS 來模仿設計風格
- 認識前端工程師最常面對的日常任務：切版
- 工程師自我學習的能力很重要，會和你說怎麼學習大概帶一下，但更多的要靠自己學習。
如果有問題可以在留言區留言問我，我會盡量幫你解答。完成也可以貼在上面讓大家看看你的成品
每天十分鐘，你也可以學會寫程式。是這樣說啦，但其實重點是要動手作。
