最近利用下班后和周末的業(yè)余時間學習前端,在其他方面的學習較少,所以決定本次作業(yè)就對本周的學習做下總結。
回顧
之前學習了html、css和javascript基礎知識。在學習前端上,目前我的步驟是:
- 先學習html、css基礎,然后做跟著教程做一個完整的移動端賀卡頁面;
- 先對各塊知識都有個認識和印象,并穿插做對應知識點的小練習;
- 動手做幾個完整的頁面作為練習;
- 過程中對每個不熟悉的模塊針對性學習。
關于第一個步驟中做的移動端賀卡頁面。過程中遇到很多沒有學到的知識,例如css動畫、javascript等。我會跟著把代碼寫下來,查找資料并在這個頁面里理解它的用法。感覺這樣做能讓初學者對簡單網頁需要用的知識有了解,有利于后面學習時的理解。
當然,我的方法不一定就是最好的方法,我也是在探索中。其實只要有在做,有在吸收知識,應該很多方法都行得通。
本周學習
本周,我主要學習的是,認識前端常用到的幾個庫,這些庫運用廣泛,能夠實現(xiàn)強大的功能,將大大提升前端開發(fā)的效率:
1. jQuery:
這是一個JavaScript代碼庫(或框架)。這個jQuery庫封裝了常用的JavaScript代碼,當我們把這個庫添加進來時,并運用它的語法書寫時,則能夠實現(xiàn)JavaScript的功能,并且更加簡便、高效。
jQuery的核心特性可以總結為:具有獨特的鏈式語法和短小清晰的多功能接口;具有高效靈活的css選擇器,并且可對CSS選擇器進行擴展;擁有便捷的插件擴展機制和豐富的插件。
2. animate.css:
這是一個css動畫庫。內置許多css動畫效果。我們添加這個庫后,給指定元素添加動畫樣式名,或通過jQuery來實現(xiàn)動畫樣式名的添加,即可實現(xiàn)對應的動畫效果。
3. bootstrap:
這是一個前端開發(fā)框架,基于html5和css3開發(fā)而成。它具有一套自己獨有的網站風格。內部提供全局css樣式設置、可拓展的class、網格系統(tǒng)、許多組件和jQuery插件。基于bootstrap框架,我們可以定制得到自己的網站版本。所以,bootstrap框架可以幫助我們快速開發(fā)一個完整的網站。
4. font awesome:
font awesome 提供可縮放矢量圖標,它可以被定制大小、顏色、陰影以及任何可以用CSS的樣式。
添加 font awesome 庫后,即可方便快捷地使用它內部提供的矢量圖標。
5. node.js:
node.js是一個javascript運行環(huán)境,能夠在非瀏覽器環(huán)境下運行javascript代碼。npm是Node.js的包管理工具(package manager),npm能夠自動安裝和管理我們需要下載各種庫。除此之外,node.js還有很多其他的功能。
以上學習的這幾個庫,處于初步認識的狀態(tài)。知道他們是用來做什么的,基本使用方法是什么。具體的練習將在下一周實現(xiàn)。
關于本周的學習狀態(tài),整體比上周要多花了一些時間,也相對認真一些。但也免不了偷懶。做一些反思:
- 最近我有幸有人可以監(jiān)督和指導我學習,真的該懂得珍惜和感謝。那么好好抓住現(xiàn)在有的資源,用心學,才是最好的反饋。
- 人會偷懶也是正常,適度的情況下不必對自己太苛刻。并且,養(yǎng)成每天學習的習慣后,狀態(tài)就會好很多。也會開始覺得,虛度時光卻一無所獲其實體驗很差。
- 需要調整好作息時間,堅持幾天養(yǎng)成習慣,其實也不是那么難。
下周學習計劃
主要為動手實踐,利用本周學習的幾個庫來寫網頁。
- 學習harp的使用;
- boostrap官網上,有許多看起來很棒的網站案例。仿照其中一個案例做練習;
- 完成一個移動端的頁面,里面有包含css動畫和javascript、jquery的知識。
最后
在業(yè)余時間繼續(xù)積累一些技能,會讓自己感覺充實起來,逐漸增加對自己的信心。持續(xù)學習的好處不言而喻。
關于以上提到的學習內容,資料如下:
jquery教程 - w3school
animate.css
bootstrap官方網站
bootstrap中文網
font awesome官方網站
font awesome中文網
node.js官方網站
node.js中文網
node.js - 廖雪峰的官方網站