好用前端資源包-HTML、CSS、JS一網打盡

其他資源包:Python資源包 新手到老鳥都適用

說到製作網頁,第一個想到的就是 HTML 、 CSS 和 JS ,有些人稱它們為「前端三本柱」,由此可知它們的重要性!這邊整理了一些實用的學習資源,希望能幫助學習者更無痛的學習!


這次的學習資源會從零開始,課程先從網頁基礎知識集開始,了解相關名詞及基礎工具,奠定扎實基礎。接著學習 HTML、CSS 和 JavaScript 的常用語法,接著跟著課程做出一個簡易的網頁。這些都會學會之後,你可以挑戰進階學習,例如:學習如何美化你的網頁、讓網頁更生動。

另外,給大家一點小建議——可以一邊學習一邊將筆記記錄下來跟大家分享喔!這樣不僅可以跟別人交流,也可以督促自己學習喔!

新手練功-開始挑戰!

Web 工程師基礎知識集
學習網站架設課程所需的第一門課課程,適合所有非程式領域的學習者。內容將告訴你進入程式世界裡所應該具備的世界觀,以及成為前端工程師所需要具備的基礎知識。


HTML 與 CSS 輕鬆學
本堂課適合無基礎的初學者。從零開始教你 HTML 和 CSS ,扎實打底網頁製作基礎。


從ES6開始的JavaScript學習生活
這是一本 JavaScript 程式語言的中文入門書籍,你將學會 JS 的入門用法和基礎物件導向。

【什麼是 ECMAScript 6.0? 
ECMAScript 6.0(以下簡稱 ES6)是 JavaScript 語言的下一代標準,已經在 2015 年 6 月正式發布了。它的目標,是使得 JavaScript 語言可以用來編寫複雜的大型應用程序,成為企業級開發語言。 
【延伸閱讀】
10 個新手必知的 JavaScript 實用技巧-新手必知的實用技巧,讓你提升寫code的品質,更可以解決一些後續的問題(內附影片)。 

網頁開發體驗課
讓你從零開始學習 CSS、 HTML5 、 RWD 的網站體驗課。


來挑戰進階學習!

函式程式設計 Functional Programming
這堂課將從 JS 角度學習函數程式語言,用淺顯易懂的方式教你函數式程式語言的特性。

【什麼是函式?】
函式是可以被我們自由定義的,它用來將程式組織成一個小的、獨立的運行單元,讓它可以接受資料,再運行函式中的算法,最後將結果傳回去。舉例來說,函式就像是點餐機,你點選你想吃的食物將它輸入,點餐機就會計算價錢,最後將金額計算好並印製收據輸出給你! 
完整閱讀:什麼是函式?

一次搞懂 CSS z-index 層疊特性
深入了解 Z-index 屬性的概念以及運作流程,並加強對於層疊排版的概念與經驗。


資料結構 Data Structure
資料結構是在研究如何把原始的「資料」(data),組織、安排、存放到電腦中。學好資料結構,對於節省儲存空間、增加資料的安全性與處理速度將有很大幫助。

系列影片!

JS 教學系列影片
你將學會網頁基礎知識、常見物件的使用方法、字串處理等,包含新手入門及中階教學課程。


網頁的美-切版秘笈系列影片
前端學習者必備,從 HTML 到 CSS ,告訴你大神是怎麼切版和排版,一步一步教你完成一張漂亮有型的網頁。(點選標題可以看更多系列影片喔~)

網頁的美-實作技巧系列影片
教你如何用 CSS 做出多種常見效果! (點選標題可以看更多系列影片喔~)


來點實用的工具!

實用套版

Templated免費網頁套板下載
這個網站提供許多免費的 RWD 響應式網站範本 ,不僅可以最為網站架設的樣式參考,也可以下載並取得原始碼,讓製作網頁更為快速。
找到喜歡的套板後,可以先按 demo 瀏覽網頁的形式,若要下載只要按 downland 即可,操作方常方便。


素材參考

圖片、排版參考:
網頁設計常常需要大量圖片來設計或作為靈感來源,這邊推薦幾個參考網站。
Pinterest - 有大量的圖片素材可供搜尋
Awwwards - 常會舉辦設計作品投票,當作設計趨勢指標
Dribbble - 素材及排版參考
CollectUI - 眾多網頁設計作品案例
Behance - 支援中文版

icon 素材推薦:
架設網站也需要使用到許多 icon ,以下推薦幾個實用的網站。
iconfinder - 很多扁平化 icon 圖示可以使用 ,適合作為介面設計的圖示來源
flaticon - 國外有名的icon素材網站
Premium Pixels - 達人精選的高品質免費 ICON

編輯器

sublime - 編輯器的入門款選項
vscode - 由微軟開發新一代強大且優秀的編輯器,內含豐富外掛可供安裝

我想要付費學習更多應用!

現代 JavaScript 職人之路-入門、進階、實戰、面試詳解組合

  • 從入門課程教你,讓你獨立產出常見的網站效果及應用
  • 學習進階開發技巧(ex:陣列迴圈、陣列操作、字串處理等)等中階實戰課 程
  • 前端面試解題及經驗分享
  • 一併購買系列課程享有限時優惠!

Vue / React 現代前端框架同步攻略

  • 從0開始學習前端兩大熱門框架,並學會實作!
  • 大量範例及實作技巧(ex: 列表過濾、SPA 應用、購物車商品頁、會員登入等)
  • 一併購買系列課程享有限時優惠!

【延伸閱讀】
Vue3.0改版在前,我該知道些什麼?
React Native入門指南 
【歡迎追蹤訂閱】
HiSKIO 嗨 程式技能」科技資訊文章、實用工具分享、新課程優惠領取
Hi 直播學程式」不定期專題直播
HiSKIO youtube頻道」免費實用課程、工程師經驗分享
最懂初學者的「F5學程式
不想一個人孤單寫 code ? 來活力滿點的「程式丼起來」加入話圈吧 !
Facebook Comments