👋

第二週作業-個人網站

2024/07/17に公開

2024

hexschool

切版直播班

tech

cover
第二週作業 - 個人網站

Codepen

👉 GitHub Pages

本篇知識點

<h1>

在 banner 的文字位置，原本我習慣是依設計稿一行一行列標籤，例如：h2+h2+h1+a 的方式，後來看到助教的的寫法是全部都包在 h1 標籤裡面，先不論 SEO 或是搜尋之類太複雜的問題，其實一整段都是 h1 也比較符合語意。

但是這邊就會有個問題，本來要寫做 h1 的 "WILLIAM" 會變成 inline 元素，要靠右對齊(text-align:end) 就會沒有反應，這裡就要改成 block 元素才有辦法靠右。

OOCSS

這裡練習了 OOCSS 將容器與內容分開，之前會卡在不可以包太多層的觀念，然後 layout 就會跟字體、顏色、其他設定全部寫在一起，對於後續的修改就很不方便。

<section class="about">
    <div class="container">      <!-- 容器 -->
        <ul class="about-list">  <!-- 內容 -->
            <li></li>
        </ul>
    </div>
</section>

import 檔案切分

本來就有在練習寫 SCSS，但是完整的將 scss 檔案全部切分開來寫還是第一次，在寫 scss的當下會卡一下不知道要寫在哪一個檔案裡面。還是留了一個 _style.scss 通用的檔案寫不知道分在哪邊好的內容。
架構：

|
|-css
|   |-all.css
|
|-scss
|   |-all.scss
|   |-_base.scss
|   |-_component.scss
|   |-_layout.scss
|   |-_reset.scss
|   |-_style.scss
|   |-_utils.scss
|
|-index.html

結論

這次作業加上看了一下助教寫法共用了 1 天，算是嘗試了很多新的方式，下個作業要使用上 Vite 寫多頁式網站，好期待呀~