如果要你看這段程式，會不會覺得很可怕？

剛開始學習程式時，我看到這長串程式碼，頭會很痛…

但他是有邏輯可以看懂的，我學了半個月的 HTML 和 CSS 後，慢慢就看懂它了，甚至能直接打出來。意思是～它並不可怕。

以上程式碼對應的是以下的頁面（當時練習時製作的網頁）

上面的字都是亂打的，反正練習而已嘛～不糾結哈哈

讓我來一步步帶你看懂以上的程式碼，你會恍然大悟。

先簡單介紹一下，程式碼裡的 <h1> 代表的是大標題，<p> 代表的是內文，而 <img /> 則代表的是圖片。

拿 HTML 來解釋，在 HTML 的結構上，你可以把它想像成一個「箱子」，而這個「箱子」裡面還有好多箱子，就像俄羅斯娃娃一樣，一個裝一個，可以無限裝下去。

以這段程式為例～

「content」箱子裡裝著「h1」、「p」、「img」、「p」這四個小箱子，而這些箱子又分別裝著文字和圖片，而「content」也被一個更大的「wrap」包裹在其中。

同樣的，網頁上的選單「menu」，也是被包裹在層層盒子中，這樣的設計是為了讓網頁結構更清晰且易管理，後面再使用 CSS 給予效果時，也容易進行控制。

如果你賦予了最大的箱子效果屬性，那裡面的箱子將全部都被賦予到效果，但如果你只賦予了小箱子效果，則跟大箱子沒有關係。

現在你看得懂了嗎？

而再來就是透過 CSS 幫箱子上色賦予效果～

CSS 像魔術一樣可以賦予每個箱子不同的外型和顏色，甚至能告訴箱子可以怎麼排列，再網頁上才會有美美的效果～

以選單的 CSS 為例～

我分別賦予了選單文字的大小、顏色、無底線、周圍寬度，讓整體看起來更和諧。

#CSS 的解釋

#最終呈現

各種程式碼互相協作，才有了最終成品！

我的心得體悟

這樣零基礎學了程式兩個禮拜，我其實覺得很有成就感，因為你寫的每段程式最終都會有個成品讓你看見，那回饋感是很真實的，讓我覺得自己每天都有再進步，寫程式會讓人很有成就感。

如果你也想嘗試看看，真的也可以勇敢一試，網路上的教學影片很多，有些付費的也很便宜～只有有心，其實都學得會！也歡迎你留言分享回饋～