[程式設計] 全端工程師學習地圖(通用 + 前端)

2020 想要當一名網頁工程師,就要有一個覺悟是,要學很多東西,而且沒有學完的一天。對於初學者而言,常會不得其門而入。到底要如何一步步把自己的工具箱建起來,是本文做為一個 101 介紹,想要帶讀者理解的。

Continue Reading [程式設計] 全端工程師學習地圖(通用 + 前端)

[前端連載] html巢狀結構基礎——div 和 span

簡介 上次介紹了基本的html tag,這次來講一下,html中很重要的巢狀結構。如果有仔細看的話,應該會發現html是一層一層包住的,最外層是html tag,再來有body tag,還有我們寫的tag,包括h1 ~ h6之類的。 這次,我們要介紹兩個很重要的東西,分別是 div 和 span tag。這兩個 tag 在 html 之中很常出現,並清楚的標示我們的html結構。要學好網頁前端,一定要搞清楚他們的功能和差異性。 開始囉! 尿布和啤酒,是否該放一起賣? 談到很紅的big data,就不得不介紹一個經典的例子——尿布和啤酒。美國的零售業者沃爾瑪,裡頭的資料科學家在分析購買數據時,發現了一個很重要的事實。每到星期五晚上,尿布和啤酒的銷售量有正向關,而且同時提升。 蛤?尿布和啤酒?這個組合也太奇怪了吧。 你沒聽錯,就是尿布和啤酒。 該不會是星期五會定期舉行什麼奇怪的尿布啤酒party吧。 Nice Guess! 不過有其它原因,我們繼續聽下去。 這實在是不太尋常。經過調查之後,才知道,原來星期五晚上,爸爸們會到超市們幫baby買尿布,然後順便買些啤酒,回家看球賽。於是,沃爾瑪調整銷售策略,把啤酒和尿布放在同一區,果不其然,尿布和啤酒的銷量都大大的提升。 所以,這和我們的網頁架構有什麼關係? 當然我們這篇不是要講大數據多麼威猛。只是你是否在寫網頁時,發現常常會有某些東西,像是啤酒和尿布一樣,該被放在一起的?譬如一篇文章,便含有標題、副標題,文章預覽、日期……。若是如此,那我們就用個div把他給包起來,他們就算是一個區塊。請看下圖,每一個紅色包起來的範圍,都算是一個區塊。再仔細看一下左邊的文章,還可以發現大區塊裡有很多小區塊,分別包含標題、副標題,文章預覽、日期,這也是div包起來的喔。 把它包成區塊有什麼好處呢?好處一,設定css方便。如果我們要為這個區塊設定樣式,那我們只要在這個div區塊加上css即可,其它的地方就不會被動到。如果我們一次要給很多類似的區塊設定個樣式,設個…

Continue Reading [前端連載] html巢狀結構基礎——div 和 span

[前端連載] 了解網頁發展的脈絡(下)——什麼是AJAX,以及jQuery、CSS3、HTML5簡單介紹

簡介

好不容易寫到了網頁脈絡的最後一篇了,可喜可賀!還記得上次我們提到了javascript的發展史,看他怎麼和jscript競爭,爾後發展成為網頁前端通用的唯一語言。隨著網頁越來越發達,又發展出了framework,來幫助我們快速以及有效率的開發網頁。

而framework的出現,代表網頁開始複雜化,也標誌著一個前端和後端的分野,因為我們的網頁已經漸漸複雜到不是一個人能專精所有事的階段了(當然還是有神人級的人物,南京通北京,前端通後端,但畢竟這種人在少數)。

今天要來介紹一下,在這個分野之後,到底出現了什麼樣新潮的前端技術,有感到一絲興奮嗎?

開始囉!

(more…)

關於我:

我是沒一村,專長和興趣是程式、主動投資、科技商業模式。可以參考我的書單和比較熱門的文章:

Continue Reading [前端連載] 了解網頁發展的脈絡(下)——什麼是AJAX,以及jQuery、CSS3、HTML5簡單介紹

[程設雜筆] 試玩 CSS custom scrollbar

一般來說,如果網站不是要做的特別猛,我們不太會去更改scrollbar的樣式。話雖如此,我還是覺得自己設計的scrollbar很酷,雖然只是一個小地方,但改了整個心情就是很不一樣,對於網頁也會有不等的加分效果。

(more…)

關於我:

我是沒一村,專長和興趣是程式、主動投資、科技商業模式。可以參考我的書單和比較熱門的文章:

Continue Reading [程設雜筆] 試玩 CSS custom scrollbar

[程設雜筆] css button 使用 vertical-align解決雙行字對齊

今天寫網頁的時,候,遇到了一個蠻麻煩的問題。button裡的字長短不一,有些單行,有些得要寫成兩行。但在排版時,就會因為行數不一樣,造成排版上的歪掉。

(more…)

關於我:

我是沒一村,專長和興趣是程式、主動投資、科技商業模式。可以參考我的書單和比較熱門的文章:

Continue Reading [程設雜筆] css button 使用 vertical-align解決雙行字對齊

[程設雜筆] :hover ::after ::before和jquery onclick onmouseover onmouseout用法解析

今天要實作一個button,當滑鼠滑過時,會增加一個外框,而當滑鼠按下時,也增加相同的外框。相反地,當滑鼠再次點擊或離開時,解除外框。我用到兩種方法,一個是CSS的,一個是jquery的。

(more…)

關於我:

我是沒一村,專長和興趣是程式、主動投資、科技商業模式。可以參考我的書單和比較熱門的文章:

Continue Reading [程設雜筆] :hover ::after ::before和jquery onclick onmouseover onmouseout用法解析