雖然搞不太懂是怎樣一回事，但小明試用了一下這兩套軟件，發現寫個網站還真的很容易！就跟編輯文件一樣，你想要編輯什么文字你就直接改就對了，要圖片的話也可以很輕松的直接插入。
一直到小明長大后才知道，原來這種編輯模式就叫做「所見即所得」，你看到編輯器里面長什么樣子，實際上的網頁就會長成那個樣子（英文叫做 ，What You See Is What You Get）。
經過一番摸索之后，小明完成了班級網頁的雛形：
他才小六，不要太苛責他
「才一個下午我就可以做成這樣，再給我三天，我應該可以拿優勝吧」樂觀的小明自覺前途一片光明，想說今天也累了便先去洗洗睡了。
他不知道的是，坎坷的未來正在等著他。
與網頁,本人的初次見面
隔天放學回家，小明打開電腦想要繼續做班級網頁，可是卻發現 怎么樣都打不開，重開機、重新安裝都沒有用，就只差重裝了?？墒侵匮b會把即時通的歷史記錄全部都洗掉，母湯母湯，到時候小美傳給他的訊息就都不見了，這可不行。
束手無策的小明，看著昨天用 產生出來的 index.html，不知道哪來的靈感，對它點右鍵，選了「以記事本開啟」，看到了驚人的畫面：
這不是 ，只是小明的記事本比較高級
「這是什么碗糕！」整個畫面上，小明只看得懂中文，其他的根本不知道在寫些什么。
原本小明想把窗口關掉，可是卻轉念想說再看一眼好了，而這一看卻讓他發現了一些規律：
觀察到規律之后，小明心想那不然我來改改看，看會發生什么事情好了。于是他就把通訊錄復制了幾次并且改成其他文字，也把 body 那邊的 換成 #。
接著保存，不用記事本而是用網頁來打開，小明看到了下面的景象：
被小明手動更改過
「哇！居然還真的改了！」
一直到日后小明去書店翻書才知道，原來網頁本人其實就是那個用記事本打開的文字檔，而 在做的事不過就是自動幫你產生這些文字而已。而那些成雙成對的我們叫它標簽，不同標簽有不同的用途。
舉例來說，就是 list item 的意思，而標簽里面放的就是你的內容。至于 style 則是人如其名，負責管理所有跟樣式有關的操作， 就是背景，color 就是文字顏色。
這些標簽跟內容我們叫它 HTML（ ），那些樣式叫做 CSS（ Style ），這就是構成網頁最基本的兩大元素。
知道網頁原來是由文字組成，不一定要用現成軟件才可以寫出來之后，小明便拋棄了 ，跑到書店買了幾本網頁入門的書，下定決心從基礎學起。
不到半個月，他就已經可以只靠文字編輯器來寫出整個網頁。
我也想要華麗酷炫的功能
得意洋洋的小明覺得同年齡一定沒有人像他這么認真參加這個比賽，看來要拿到第一名是輕而易舉了。如此天真的小明，有天碰巧看見隔壁班的小華在請教電腦老師一些網頁的問題，便湊上前去看。
不看還好，一看驚為天人，兩千四百萬人都驚呆了。
首先呢，網頁上面有一個計數器，可以顯示一共有多少訪客曾經造訪過這個問題。再來，你的鼠標附近會有一圈文字，鼠標移到哪里文字就跑到哪里，超級酷炫！還有網頁跑馬燈會不斷輪播班級的公告，就跟實體的跑馬燈效果一樣。
意氣風發的小明在那一刻啞口無言，深深覺得自己只是只井底之蛙，不知道外面的世界有多大。花了一些時間整了好自己的心態以后，小明鼓起勇氣問了隔壁班的小華：「欸欸，你那些效果怎么用的，可以教我嗎？」
『很簡單啦，你去搜尋：網頁開發百寶箱，那里真的是百寶箱，要什么有什么！根本就是網頁設計師的哆拉 A 夢』
回到家以后小明照著做了，果真發現一片新天地，那裡充滿著各式各樣的酷炫功能跟效果，你只要把一段文字復制貼上到你的網頁就能夠起作用。小明選了幾個自己覺得很帥的效果，改造了一下班網：
在此感謝一下網頁建置百寶箱，盡管現在已經連不上了 QQ
可是，如果只是復制貼上的話，是贏不過小華的！必須要以這些特效為基礎自己再定制化，才能夠殺出重圍，驚訝到學校的評審老師們。
秉持著這樣子的決心，小明仔細看了一下貼到網頁的那些文字，希望能發現一些端倪：
滑鼠移上去會動來動去的特效
雖然看不太懂是在做什么，但小明心想：「這應該就是寫程序吧」，透過一些代碼來操控 HTML 上面的元素，產生出會震動的圖片的效果。
上網查了一些資料之后，小明才發現原來這個程序語言叫做 ，能夠操縱網頁上面的東西，只要是看得到的地方都可以用它來操作。所以理想上能做出任何你想得到的功能。
以上面的圖片震動功能來說，就只是用 寫了以下代碼：
知道原來可以用 做出這么酷炫的事情之后，沒有理由不把這個學好。于是小明就到書店找了幾本相關的書籍，從最基本的那些變量、迴圈、判斷式開始學，希望有朝一日能夠寫出屬于自己的程序。
過了兩個禮拜，小明順利的實作出以下功能：
而憑借著這些小明手寫出來的功能，順利獲得了班網評審老師的一致贊賞，使得他拿到了班網比賽的第一名瀏覽器提示變成英文，把十個好寶寶章輕松納入口袋。
原本就不謙虛的小明在奪冠之后變得更加狂妄，在即時通的狀態寫說：
哈！網頁不過就這樣嘛，就是 HTML 做內容，CSS 做樣式， 加程式碼，只要會這三個就好，太簡單了吧！
是的，其實網頁一直到今天還是如此，依舊是以這三者為核心在發展?？墒钱斣臇|西跟不上前端的演進的時候，我們就必須先依賴一些第三方的工具，才能幫助我們更有效率。
于是長大了以后
在拿到班網比賽冠軍之后，小明就發現自己對網頁設計真的很有興趣，于是回家之后手里拿的再也不是 GBA，而是 to ，噢不對，是「第一次寫網頁就上手」、「100 個酷炫的 網頁特效」等等的相關書籍。
升上初中之后，他依舊努力不懈，靠著課余時間進修網頁設計，對網頁三劍客（HTML、CSS 與 ）的掌握度也愈來愈高，自大的小明想說他應該已經是世界第一等的水準了，是該出去外面的世界闖闖，就跟父母說他想要嘗試看看接案，拜托他們問問看朋友們有沒有適合的案子。
把案子交給一個初中生跟交給一個專業的工作室，雖然前者的確也有可能很厲害沒錯，但從公司的角度來看，還是會傾向把項目交給后者，畢竟項目不單單只有「寫代碼」這件事情，還有開會討論、報價等等的流程。
可是皇天不負苦心人，得來全不費工夫，終于在初中二年級的時候，小明接到了人生中第一個案子。
這案子是一個公司官方網站的開發，圖片素材跟設計稿都由他們提供，小明只要負責把網頁寫出來就好瀏覽器提示變成英文，并且用 來實作一點特效。
小明雖然只是個 ，但自認為是 super ，花了兩個禮拜的時間就把版面切好，帶到公司去跟對方 demo。案主起初相當滿意，但卻問了一個小明從未想過的問題：
你有在其他瀏覽器上面看過這個網站嗎？舊版 IE、 或是 ？
沒有，小明從來沒有考慮到，他甚至連這世界上有這么多瀏覽器都不太清楚。而案主當場把他自信滿滿的作品用其他瀏覽器打開，第一個跑版、第二個跳出警告、第三個連畫面都跑不出來，直接白畫面顯示 Error。
這件事情對小明的影響很深，很深。
從那一刻開始，他才知道世界比他想像中的大很多。在自己的電腦上可以跑，不代表在別人的電腦上也可以跑。寫網頁不只是自己可以看就夠了，也要保證其他人看到的能夠跟你一樣。
站在巨人的肩膀上
回到家針對不同瀏覽器測試之后，小明發現很多 CSS 跟代碼都必須對不同的瀏覽器做出調整才行，例如說在 上面，可能要加上特別的 才能夠正常運行。
而 也是一樣，不同瀏覽器可能會有不同的 name，要針對每個瀏覽器寫出不同的代碼。
針對 CSS 的問題，小明發現只有幾個屬性要調整而已，很快就調好了，可是對 ，卻發現這是一件極為麻煩的事情，有太多東西要加了，而且會把程式碼變得非?；靵y。
正在焦頭爛額之際，有些已經在業界工作的網友跟他說：
你可以用 ??！
得到了這個關鍵字之后，小明立馬去研究這到底是個什么樣的玩意兒。噢對了，如果你好奇他怎麼跟這些網友認識的話，他們是在程序設計俱樂部還有藍色小舖認識的。
研究了兩天之后，小明發現 就是俗稱的 ，可是在這領域不會翻作圖書館，而是翻作「函數庫」，意思就是它提供了很多現成的 ，你只要用就好了，不用知道他到底是怎么實際操作的。
這跟瀏覽器兼容性有什么關注呢？關系可大了，以前你要寫 30 行代碼去兼容不同的瀏覽器，現在你只要用一行代碼，用 提供的 就好，底層它都幫你做好兼容了。
除此之外，語法也變得比較簡潔，一些常用的功能它都幫你先寫好了。 的知名特徵就是 $ 這個符號，把一堆好用的 都放在這個裡面。
下圖是 與原生 （又稱為 js）的比較，站在巨人的肩膀上以后，可以少寫很多行程序代碼。
