前端Web開發(fā)資源整理

時間：2022-08-28 13:51:01 | 來源：網(wǎng)站運營

時間：2022-08-28 13:51:01 來源：網(wǎng)站運營

記得大學做小組項目開發(fā)的時候，一個小組項目獲得了老師的表揚，說頁面美，有想點擊的欲望，而我們其他大部分都不注重前端的頁面展示和布局，都還振振有詞的說只要功能實現(xiàn)了就OK了，頁面美不美無所謂，現(xiàn)在想想當時好傻啊。

后來，有小伙伴自己做了個小游戲，類似掃雷這種，都覺得簡單好玩，老師還提名表揚呢，那時沒深究是怎么開發(fā)的，現(xiàn)在想想就是純前端的簡單小游戲啊。

工作后，發(fā)現(xiàn)前端才是王道啊，先不說大家說的什么“整個互聯(lián)網(wǎng)都缺前端啊”這種話題，就說要抓取用戶眼球，讓用戶有點擊的欲望，這都是前端工作啊，畢竟用戶才不關(guān)心“你咋實現(xiàn)這個功能的”，只要看著舒服就行。

其實，說這么多，我只想說，如果你想學前端，現(xiàn)在還來得及。我平時會留意各種資源，因此，這里整理一番，可能更適合有一定基礎(chǔ)的前端學習者看~

說明：關(guān)于前端學習網(wǎng)站，太多了，什么官方文檔啦、各種在線學習網(wǎng)站啦，只要你想學前端，那么一搜就全出來了，因此啊，我就不整理介紹了；

我主要整理3個部分：

• 1）想開發(fā)項目，哪里找教程？
  
• 2）關(guān)于前端的有趣網(wǎng)站；
  
• 3）分享一些合集資源；
  

一、前端項目哪里找？

前端的入門教程網(wǎng)上很多，只要你搜索呼啦啦就出來了，因此啊，就不整理了。主要整理一下，哪里可以找到前端項目，就是有源代碼的，可以拿來學習或者拿來用的。

• 沒有詳細的教程，但可以找到項目并查看源代碼和效果圖：
  

1、CodePen

網(wǎng)站里有很多很酷的特效，而且看到它們的源代碼，也可以看到效果圖。

其實類似的網(wǎng)站有很多，就不一一介紹了：

• RunJS
  
• CSSdeck
  

2、 CodePlayer


網(wǎng)站里有各種項目效果，選擇自己想學的，同樣可以看到源代碼和效果圖，和codepen不同的是你可以看到作者是怎樣把代碼打出來的。


3、html5tricks

網(wǎng)站里有很多前端實現(xiàn)的功能，可以在線查看效果，也可以下載源碼的。

• 有詳細的教程，而且步驟詳細，教你一步步開發(fā)出項目：
  

4、phodal/ideabook


一個練手項目集，有很多實戰(zhàn)項目，有步驟、效果圖，同樣可以看到源代碼啊。


5、實驗樓-WEB


網(wǎng)站里有很多前端項目教程，可以跟著教程一步步在環(huán)境中實現(xiàn)，并查看效果圖，同樣可以下載源代碼，非常適合項目實戰(zhàn)學習。

二、前端有趣的網(wǎng)站：

1、JS1k

大名鼎鼎的js1K，1K字節(jié)以內(nèi)的Javascript代碼，實現(xiàn)一個酷炫的動畫、特效、小游戲之類的。官網(wǎng)從2010年開始征集參賽作品，現(xiàn)在已經(jīng)辦了７年了，還在辦。


2、Can I use

CAN I USE，相信每個前端同學都不陌生，查詢?yōu)g覽器兼容性的利器。


3、JSHint

一個在線JS檢測工具，可以檢測JavaScript代碼中的錯誤和潛在問題。


4、aaencode

將JS代碼轉(zhuǎn)換成常用的網(wǎng)絡(luò)表情，例如“(?Θ?)”。轉(zhuǎn)換的代碼并不復(fù)雜，可以在源代碼里看到。


類似的還有：

• jsobfuscate
  

一個在線混淆工具，通過先進的算法，來混淆你的JavaScript代碼，使其不可讀。該工具還可以減小文件的大小，以便快速加載。


5、Best CSS Button Generator

網(wǎng)站主要提供各種按鈕的CSS代碼，你可以從預(yù)設(shè)的按鈕中選擇并使用模板用于自己的設(shè)計，還可以查看源代碼，非常適合學習。


還有一個類似的：

• Enjoy CSS
  

網(wǎng)站是一個完整的代碼生成器，可以自定義輸入域或CSS3按鈕，同樣可以查看源代碼，適合學習。


6、CSS屬性指引

一份清單，按字母表順序列出了每個CSS屬性。


7、frontendrescue

里面分享了網(wǎng)絡(luò)上關(guān)于前端的各種資源、大牛等信息，總之很多資源就對了。


三、一些整理的合集資源：

資源太多了，我就把平時mark的一些合集資源整理出來吧；

一些整理好的合集資源：

• 平時收集的一些有關(guān)UED的團隊和個人博客
  
• WEB開發(fā)者應(yīng)該有哪些必備的技能？
  
• 前端小白到大神，不可不收藏的網(wǎng)站合集
  
• 關(guān)于前端面試相關(guān)的資源整理
  
• 前端開發(fā)者準備的文檔和指南
  
• 50 款簡化 CSS 開發(fā)的實用工具和生成器
  
• 148個資源讓你成為CSS專家
  

前端開發(fā)怎能少的了 Chrome 呢，因此單獨對 Chrome 的一些資源整理一番：

• 我的 Chrome 插件集
  
• 私人珍藏的Chrome插件，吐血推薦
  
• 前端程序員必知的30個Chrome擴展
  
• Dev Tips（講了很多Chrome開發(fā)技巧）
  
• Chrome控制臺實用指南
  
• Chrome 實用調(diào)試技巧
  

以上就是我整理的的關(guān)于前端的學習資源，如果你還有其他的不錯的前端資源，歡迎留言啊，我隨時添加進來~