鐵人檔案
目標就是在30天內, 一邊講解, 一邊建立一個簡單的blog網頁.
我會先從最基礎開始建立, 即是html, javascript, css, 之後到jquery, bootstrap, 再到vuejs等等, 同時分析一下工具的演變過程和原因. 順便也介紹一下其他現今寫web的流行工具, 如lodash, webpack, babel, jest, 等等.
希望大家可以從中學到寫web的基礎, 也吸取到web app的一些歷史.
介紹 先自我介紹一下吧, 筆者來自香港, 很崇拜"開源"這種精神, 慷慨地把自己的知識分享出去, 讓身處世界的各位都能夠共享, 岂不美哉?...
前言 我先建立一個原型(Prototype), 用來釐清這個WebApp的功能跟UI界面。 建立原型所用到的工具是Figma, 它有免費版本, 功能應該足以應付...
設置 先在Figma中建立2個頁面(Page), 名字分別為Blog跟Components(元件)。 Blog頁面主要是放置Blog的各個頁面, 例如:主頁、...
前言 今天就把剛完成的元件組合成一個頁面吧。 框架 (Frame) 我先以桌面顯示器為目標, 建立一個桌面的框架作為頁面的外殼, 其解析度為1440x1024。...
前言 今天要完成帖子頁的元件設計｡ 帖子頁的元件 帖子 基本上可以用回主頁的帖子元件, 這裡只是少了READ MORE, 還有把內容全部顯示出來｡ 回覆...
前言 利用剛設計好的帖子頁元件, 組合成帖子頁｡ 元件組合 建立一個屬於帖子頁的frame 先在Pages/Blog中, 按一下主頁的frame, 再按快捷...
前言 今天利用之前所建的主頁, 建立一個可讓使用者互動的原型｡ 預覽 利用Figma的預覽功能, 即右上角的三角形(如下圖紅色標示), 可以幫助我們修正原型｡...
前言 今天完成原型剩下的工作吧｡ 帖子修正 回覆帖子 流程就是輸入要顯示的名字及回覆內容, 最後到點擊回覆按鈕發出｡ 先是輸入名字 之後是回覆內容...
前言 說起HTML, 大家覺得它如何? 相比起JavaScript, HTML不是什麼programming language, 不能做出十分動態的效果, 但是...
前言 今天先介紹一下JavaScript的一些背景, 再說一下JavaScript的變數與資料類型。 JavaScript是一種Programming lang...
