Int's blog

經過了兩個多月的時間，算是順利從六角的網頁切版直播班順利畢業了，這篇想要來聊聊這兩個月的辛酸血淚與收穫。

當初怎麼會想報名?

這可能要從我怎麼會想學網頁與認識六角開始說起，最一開始是因為我快畢業了，想找個未來工作的方向，加上畢業專題是做網頁後端(node.js)，做著做著其實挺開心的，就想說自己可以朝網頁學習。

因為當初專題是學後端，我就想說可以先從前端開始，畢竟做網頁多少要學前端的，加上朋友介紹六角學院是台灣前端數一數二的教學平台，就先買了js影音課程練練手。後來就收到六角的通知說會開設切版直播班，加上我是個完全的切版新手，連HTML都看不太懂那種，就趁機報名了這次課程，反正我暑假時間很多XD

學習過程

報名前就從行前說明會聽說這次主打大量作業與練習，這也是吸引我的一個地方，畢竟大學四年都只是一昧的聽別人教學，很少產出自己的作品，我沒想到的是這次課程在開始前就有作業，明明7月才正式上課我6月底就在寫作業了。

我必須老實說，為了趁課程正式開始前就多學一點CSS，我有在其他平台購買CSS課程，當然課前六角也有提供影音課程，不過對我這個時間很多的人來說有點不夠，所以開始前我會觀看別的課程補充更多知識。

前面幾週的課程與作業其實對我來說不會太困難，但大概到第三週作業難度上升，我就有感受到當初主打的作業壓力，我花的時間比以前的作業多上許多，不過到了第四週我就能明顯感受到自己的大幅進步，同樣的題目改用gulp環境開發，我只使用了週末兩天就把作業完成，真的很難想像當初第三週我光做首頁就花了將近一個禮拜的時間。

不過真正的魔王還在後頭，我發現我對框架並不是那麼得心應手，包括一開始聽tailwind到第五週接觸bootstrap，時常做作業都會卡卡的，這裡多虧了每日任務與穎旻老師的作業講解，每次聽完都有豁然開朗的感覺，特別是第六週的swiper，我研究了好久才做出來，但也因為第六週的磨練，我第八週首頁的swiper很快就做出來，成就感爆棚。

最大收穫

最讓我有成就感的是從0到有產出屬於自己的作品，令我自豪的一點，除了第五週與第八週我的作業都有寫到最高難度。另外，當初校長在提出專題活動時我其實也很猶豫到底要不要參加，但考慮到我是新手，加上自己目前沒有求職需求就沒有參與了。雖然我沒有參與專題班，但我其實有趁學習期間用自己所學產出自己的專屬作品: 我為自己喜歡的Vtuber寫了一個形象網站，這真的是第一個完完全全由我自己設計自己開發的屬於我的網頁作品，能夠用自己所學為自己喜歡的Vtuber做點什麼真的讓我很快樂。

自我檢討

當然我也有很多需要加強與改進的地方，我想第一個就是作業我很常在padding與margin的部分沒有多留心導致最後推出來的網頁高度和設計稿不同，這也是我說我不擅長bs5框架的原因，為了完全符合設計稿，很多地方要一直去_variable.scss修改，但這個部分也讓我了解到tailwind的utilites-first是什麼意思，所以等我完成這次課程，我打算學好tailwind。第二個就是小組討論，我們組內的時間一直湊不上，大家的積極度也不高，看著沒有人討論的群組自己也提不起勁和他們一起做作業，只能默默的自己做完，下次我該試著多提點問題增加討論。最後是第五週和第八週沒有完成最高難度，第五週沒完成單純是把心力都放在第六週了，而第八週則是開學了沒有那麼多時間可以慢慢來，加上難度高，很多地方沒有方向，沒有把首頁的Expanding Search Bar做出來是讓我覺得最可惜的一點。

課程與活動內容感想

這次直播班最讓我驚訝的不是課程多高深、作業有奪難奪多，而是一堆當初沒有公開的活動以及隨時在線的校長，除了專題班的工作媒合就已經物超所值，完課率達到不同%數竟然有不同獎品，我最想要的就是90%的網址了，所以我拚了命在寫作業。前幾週的送書活動也讓我印象深刻，我自己其實很想要書，不過那時候還是新手，雖然有成功交出作業但真的拿不到書，高手太多了XD 下次有機會我會再次挑戰的。最後是友善的發問平台，在DC上幾乎每個問題都會有同學幫忙回答，也很常看到校長常常在線上回覆大家問題，看來大家都不用睡覺的。

身為學長姐，分享些想入坑的新同學一些勉勵的話

報名前可能要想清楚自己是否有足夠的時間完成作業，畢竟這兩個多月我真的花了很多時間在寫作業。

再來是認真聽課與作業講解，校長的課講解都很清晰，也時常會分享在業界要注意的細節，這些都是外面課程所沒有的，能偷多少是多少XD 作業寫不出來時除了要記得看穎旻老師的作業講解也可以上Discord多發問，多發問這點就是我還不太會的，我習慣自己先找答案，但通常找著找著就花了很多時間。

你如果要問我推不推薦，我只能說物超所值，我當初也因為價錢很猶豫到底要不要報名，但經過開學典禮後我就知道這個錢花得很值得了，這堂課的價值遠遠超過8000多的報名費，這兩個月可以說是我過過最充實的暑假也不為過。

white-space是針對空格做換行的設定，有以下幾個選擇

• normal: 連續的空白字元會被合併(collapse)，換行字元被視為空白字元。換行只在被文字空間限制時發生。
• nowrap: 對待空白和換行字元的方式和normal一樣，但不會發生任何換行。
• pre: 連續的空白字元都會被保留。換行在有換行字元以及<br>時發生。
• pre-wrap: 連續的空白字元都會被保留。換行會在換行字元、有<br>元素以及被文字空間限制時發生。
• pre-line: 連續的空白字元會被合併(collapse)。換行在換行字元、 <br>以及被文字空間限制時發生。

範例

word-break是用來對內文做自動換行的語法，除了英文的斷行，也有針對中日韓語系的斷行設定。

• normal: 依照各語言的預設方法斷行(單字太長會超出)。
• break-all: 超過邊界就會自動斷行(包含中日韓)
• keep-all: 自動斷行，但在中日韓語系不適用，所以有使用到中日韓的網站不要使用。
• break-word: 即使單字太長也會自動斷行，和使用 word-break: normal + overflow-wrap: anywher的效果相同。

範例

word-wrap，又或者可以寫成overflow-wrap，是css中文字用來換行的語法。

• normal: 只在單字結束時換行，所以可能會導致文字超出div(overflow)。
• anywhere: 在單字結束時換行，如果沒有適合的斷點會強制換行，但會考慮soft wrap。
• break-word: 在單字結束時換行，如果沒有適合的斷點會強制換行，不考慮soft wrap。

範例

在範例中我設定box最大寬度是150px，最小寬度是最大字母的大小(這裡會顯示出anywhere和break-word的差異)。

在normal情況下，如果文字本身太長是不會換行的，即使這樣文字會超出容器。在anywhere時會換行，但是換行的基準是最小寬度。break-word則是會把依照normal的方式，但超出的字母會換行。

總結

一般情況都是使用break-word，並且word-wrap都會搭配word-break使用，下一篇我就會來介紹word-break。

這幾天在寫六角學院切版直播班第八週作業時踩到了一個地雷，我在a標籤裡包了a標籤，我原本是要讓card變得可點擊，並且裡面有個按鈕。一般來說我在製作按鈕都會使用a標籤，導致了我a標籤裡還有一個a標籤，結果我的結構在網頁上呈現出來變成我的card-body都無法點擊，後來將a標籤改成button標籤就解決了這個問題。

HTML規定a標籤裡不能有a標籤，同時如果a標籤沒有href屬性，那就不要用a標籤。

這之後我在製作按鈕時應該會改成使用input標籤或button標籤，以避免再出現相同的情況。

你知道CSS不只可以用來幫網頁增加樣式，還可以在網頁上畫圖嗎?在卡片右下方放上一個三角形算是蠻常見的設計(如圖)，所以這篇會來介紹如何畫出三角形，為你的網頁增加設計感。

步驟

1. 首先給一個box

   

2. 給他的四邊加上不同顏色的border觀察一下，可以發現border和border之間的邊緣是斜的，我們就是要利用這個特性製作三角形

3. 把背景改成透明只留下border

4. 讓box的長寬都歸零，這時候三角形就出現了

5. 把自己想要的三角形留下，其他border改成透明(這裡我留右邊和下面，並都改成藍色)

Codepen

總結

是不是很神奇? 自己在寫得時候可以跳過1、2步驟，直接寫transparent就好，這邊只是方便講解才列出的。

這篇要介紹一個很好用的插件-swiper.js。這個插件可以用來做卡片輪播動畫，最重要的是他提供RWD以及可以客製化樣式。

安裝

• 官網: https://swiperjs.com/
• npm:

  1	npm install swiper

• CDN:

  1 2 3 4 5

  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@8/swiper-bundle.min.css"/> <script src="https://cdn.jsdelivr.net/npm/swiper@8/swiper-bundle.min.js"></script>

  使用方法

1. html

   • 最外層是swiper，內層會有swiper-wrapper，wrapper裡面用swiper-slide包輪播的卡片。視需求可以新增pagination(底下的換頁點點)、navigation buttons(左右換頁)、scrollbar

   1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20

   <!-- 這裡的mySwiper可以自己取 --> <div class="swiper mySwiper"> <!-- Additional required wrapper --> <div class="swiper-wrapper"> <!-- Slides --> <div class="swiper-slide">Slide 1</div> <div class="swiper-slide">Slide 2</div> <div class="swiper-slide">Slide 3</div> ... </div> <!-- If we need pagination --> <div class="swiper-pagination"></div> <!-- If we need navigation buttons --> <div class="swiper-button-prev"></div> <div class="swiper-button-next"></div> <!-- If we need scrollbar --> <div class="swiper-scrollbar"></div> </div>

2. css

   • swiper有提供自己的css，可以按照css內定義的class，用覆蓋的方式複寫上自己的樣式，有些東西有swiper自己的樣式，在修改時要特別注意。更多可以參考官方文件

3. js

   • swiper提供非常多js動畫，可以根據自己需求選擇對應的動畫，可以參考官網的demo，點擊open in new window可以觀看原始碼

   

   • 要使用swiper的初始設定要在js撰寫swiper的語法(.mySwiper要填入自己為swiper命名的class)

   1	var swiper = new Swiper(".mySwiper", {});

   • 要新增其他動畫等等就可以依據官網的各種demo複製貼上做修改

總結

swiper最強大的但同時也最讓我頭痛的是他的樣式客製化，會寫的話基本上什麼樣的樣式都能靠自己手刻css寫出來，但麻煩的是要先弄清楚他原本的css怎麼寫，否則會蓋不掉。

在網頁上通常會使用小圖示或icon來增加設計感與樣式，也有許多按鈕都是使用icon來呈現，這篇會介紹線上svg或線上icon的引入方式。

1. 線上icon網站

   • 首先要找到有提供線上icon的網站，常用的有google font、fontawsome等免費網站(fontawsome為部分收費)。

2. 根據icon網站的指引引入cdn

   • 以google font為例，點擊icon後右手邊就會出現cdn可以讓開發者引入
     

   • fontawsome的話要先填寫email他才會寄cdn給你

   

3. 將cdn引入專案中

   • 把複製好的code貼到自己html的header即可

   

4. 根據網站的說明複製對應的icon code

   • 引入cdn後就可以開始使用icon了，以google font為例，右手邊也會有icon自己的code，只需要複製並貼到自己想要放icon的位置即可

   

BEM命名法(Block-Element-Modifier)是一種CSS class的命名方式，和OOCSS以及SMACSS相同，都是為了讓css更結構化、更具可讀性。

Block、Element、Modifier

• Block指的是區塊，一般來說我們都會把網頁切分成很多區塊，並以語意化的方式幫他命名，ex: menu、navbar等等。

• Element指的是區塊內的元素，比如說navbar裡的item。

• Modifier指的是修飾符，用來表示元素的狀態，比如active、disabled等等。

命名方式

BEM的寫法是使用兩個下底線或破折號連接

1
2

Block__Element
Block__Element--Modifier

ex:

1
2
3

navbar
navbar__item
navbar__item--active

在SCSS中使用

之前介紹scss時有介紹到scss可以用&來做連接，所以BEM命名法就可以完美的套用到scss結構中

1
2
3
4
5
6
7
8
9

navbar {
	....
    &__item {
    	....
        &--active {
        	...
        }
    }
}

結語

BEM綜合了OOCSS清晰架構，也不會像SMACSS那樣會非語意化的class，算是三者中我最喜歡的一種命名方式，不過並不會每個元素都使用BEM，依照需求調整才是最好的做法。

SMACSS(Scalable and Modular Architecture for CSS)，使用結構分類，將CSS拆分成不同類別，在使用SCSS開發時也會用到SMACSS，將樣式拆分成多個檔案，主要會拆成以下五個類別:

• base: css基礎設定，包含h1~h2、html、body上等等的設定。
• layout: 網頁基礎架構，包含header及footer。
• module: 各種元件，例如button、form等等。
• state: 元件狀態，例如a:hover、button:focus。
• theme: 元件的顏色或大小。

命名方式會用-分隔，比如bs5中的btn-primary就是SMACSS的方式。

SMACSS雖然在排列組合上很方便，但結構分類是使用者自己劃分，界線較為模糊。
SMACSS與OOCSS很相似，也有相同的優點，都能夠讓程式碼更加易於維護。