前端開發學習路線(豆瓣)西祀衚衕

来源:http://www.cnblogs.com/gq123456/archive/2017/04/16/6719110.html
-Advertisement-
Play Games

學前端需要掌握的第一個核心要點就是“玩命的學,玩命的練”,即韌性,不然很難學會,只有堅持下去才能學會。前端學習與前端教程有很多,如果你能“堅持”那麼就開始從簡單的前端模塊學習吧 前端要學習三個部分:HTML,CSS,JavaScript(簡稱JS),因此首先明確三個概念:HTML是內容層,它的目的是 ...


學前端需要掌握的第一個核心要點就是“玩命的學,玩命的練”,即韌性,不然很難學會,只有堅持下去才能學會。
前端學習與前端教程有很多,如果你能“堅持”那麼就開始從簡單的前端模塊學習吧

 

前端要學習三個部分:HTMLCSSJavaScript(簡稱JS),因此首先明確三個概念:
HTML是內容層,它的目的是表示一個HTML標簽在頁面里是個什麼角色。 
CSS是樣式層,它的目的是表示一塊內容以什麼樣的樣式(字體、大小、顏色、寬高等)顯示。 
JS是行為層,它要做的是當用戶觸發某些行為時,會給內容和樣式帶來什麼樣的改變。

1HTMLCSS部分。
HTML/CSS初學,就照著http://www.w3cschool.cn/的實驗做,把http://www.w3cschool.cn/index-6.html  http://www.w3cschool.cn/index-7.html 兩套做完了就入門了,

入門之後,學習CSS的精華,即佈局,推薦李炎恢的教學視頻,佈局這一章:http://edu.51cto.com/lesson/id-14895.html 27章,如果覺得不夠,需要實戰,則再學習接下來的2829章。註意,這時候一定要老師講一塊代碼,自己就要照著實現一次,切勿只看不做。

CSS還有一個精華部分就是命名規範,找幾個著名網站(比如豆瓣、網易新聞)這類,研究它們的命名規範,我這裡,有一個現成的命名規範可供學習(需要登錄evernote查看):https://www.evernote.com/shard/s168/sh/7f89cc57-cab2-4712-b61b-9fde25e3ef51/d01c8e34ef05373ec06c3b2f7cfaba82/res/e0b9963b-ba7a-441a-8462-8f87c48e4cda.jpg?resizeSmall&width=832 

學習完成後就是一個較為熟練的HTML/CSS使用者了.這時候如果想繼續深入學習相關類庫和框架,推薦SassCompass,推薦兩篇阮一峰的博客:http://www.ruanyifeng.com/blog/2012/06/sass.html http://www.ruanyifeng.com/blog/2012/11/compass.html
和這本書:《Sass and Compass in Actionhttp://book.douban.com/subject/6732187/

2JavaScript部分。

初學者推薦看視頻:http://edu.51cto.com/course/course_id-166-page-1.html ,特別註意JavaScriptOOP寫法(重點,可多看幾遍),以及閉包、原型鏈,非同步編程部分(次重點),前者寫項目都在用,後者涉及JS這個語言本質特點。

然後需要學習JSHTML/CSS在瀏覽器下的調試方法,推薦用Google Chrome下的chrome developer tools調試,可以看這個視頻學習: http://happycasts.net/episodes/40

看完視頻並經過實踐後,可以看《Javascript good parts》(http://book.douban.com/subject/2994925/)這本書,不必細看,看它的思想即可。用於鞏固,提升JS方面的編程思想。

最好對自己有個規劃,比如多長時間就應該學會什麼或者是應該達到什麼樣的水平,然後按計劃學習。


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • 最近由於項目的需要,做了一個基於JQuery的表格分頁插件封裝,部分源碼來源百度,經由自己封裝完成。 下麵是具體代碼和說明,僅供參考。第一步可以先將我的HTML,CSS,JS這三部分的代碼創建好後先運行看看,下圖是文件目錄展示。 html CSS js 好了,到了這裡如果你完成了創建並且運行可以看到 ...
  • First First Second Second ...
  • There is no doubt that JavaScript是沒有多線程之說的,他只能一件事一件事的做,做完一件事再做下一件事,假如你的js要花一段比較長的時間做一件事的話,那麼瀏覽器將會卡頓一段時間,不對用戶的操作產生響應,這可咋辦呢?謝天謝地,HTML5為我們提供了實現多線程的機制,這麼好... ...
  • 難道還沒有考慮使用HTML5? 當然我猜想你可能有自己的原因;它現在還沒有被廣泛的支持,在IE中不好使,或者你就是喜歡寫比較嚴格的XHTML代碼。HTML5是web開發世界的一次重大的改變,事實上不管你是否喜歡,它都是代表著未來趨勢。其實HTML5並不難理解和使用。我們這裡能列出許多原因為什麼現在要 ...
  • 一、函數定義的方式 (1)普通方式 語法: function 函數名(參數){ 函數體 } Code: function method(){ alert("testMethod"); } method(); Code: function method(){ alert("testMethod"); ...
  • 博客園裡大家都分享了很多的有用知識,看到好的代碼,總想拿到手上去試一下,然後慢慢體會!如果是展示一段完整能運行的代碼,若能給讀者提供一個【運行代碼】的按鈕,就方便多了!前兩天開通了博客園的JS許可權(發郵件到[email protected]可以申請開通),今天先拿這個試了一下手,先來體驗一把吧: ...
  • 前言:這是筆者學習之後自己的理解與整理。如果有錯誤或者疑問的地方,請大家指正,我會持續更新! getElementById() obj.getElementById(id) 該方法接收一個參數(該元素的id),若找到則返回該元素對象,若不存在則返回null; 任何HTML元素可以有一個 id 屬性, ...
  • 本文為轉載 (出處:http://www.cnblogs.com/iyangyuan/archive/2013/03/27/2983813.html) 教程開始: 首先要知道,div是塊級元素,在頁面中獨占一行,自上而下排列,也就是傳說中的流。如下圖: 可以看出,即使div1的寬度很小,頁面中一行可 ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發(一):使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說,近來想嘗試開發一款安卓APP,考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP,畢竟是使用Visual Studio開發工具,使用起來也比較的順手,結合微軟官方的教程進行了安卓 ...
  • 前言 QuestPDF 是一個開源 .NET 庫,用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫,它徹底改變了我們生成 PDF 文檔的方 ...
  • 項目地址 項目後端地址: https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址: ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址: http://tree ...
  • 話不多說,直接開乾 一.下載 1.官方鏈接下載: https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe,運行開始下載SQL server; 二. ...
  • 前言 隨著物聯網(IoT)技術的迅猛發展,MQTT(消息隊列遙測傳輸)協議憑藉其輕量級和高效性,已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫,為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog支持多種接收器用於日誌存儲,增強器用於添加屬性,LogContext管理動態屬性,支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項,適用於不同需求。 ...
  • 目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據,爬取信息時需要模擬瀏覽器行為,否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下: 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • 1.前言 什麼是熱更新 游戲或者軟體更新時,無需重新下載客戶端進行安裝,而是在應用程式啟動的情況下,在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR,Xlua,ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles,Addressable, ...
  • 本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺,其實像阿裡雲,騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後,它會送 ...
  • 通過以下方式可以高效,並保證數據同步的可靠性 1.API設計 使用RESTful設計,確保API端點明確,並使用適當的HTTP方法(如POST用於創建,PUT用於更新)。 設計清晰的請求和響應模型,以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證,確保接收到的數據符合預期格 ...