分享一些web前端開發好用的網站

TNTWEB發表於2021-10-13

TNTWeb - 全稱騰訊新聞前端團隊,組內小夥伴在Web前端、NodeJS開發、UI設計、移動APP等大前端領域都有所實踐和積累。

目前團隊主要支援騰訊新聞各業務的前端開發,業務開發之餘也積累沉澱了一些前端基礎設施,賦能業務提效和產品創新。

團隊倡導開源共建,擁有各種技術大牛,團隊Github地址:https://github.com/tnfe

俗話說的好,磨刀不誤砍柴功,瞭解並收藏一些實用性網站,不管是例項教學的個人部落格,還是歸納總結的資源整理,抑或是社群型的大佬雲集地,對於我們的web開發來說,都有著事半功倍的效果。

學習先進技術,共同探討前沿技術,提高自己的內在技術,達到合作共贏。

現在,就讓我們一起來看看他們吧。

image.png

一、社群型網站

1.GitHub

(https://github.com/)

GitHub是通過Git進行版本控制的軟體原始碼託管服務平臺。

簡單來說,有以下幾種功能:程式碼託管、學習優秀的開源專案、當資料庫、多人協作、搭建部落格、社交、個人簡歷、寫作等。還有更多功能,等你來發現。

GitHub幾乎是所有程式設計師必備的網站了,不管你從事或者研究的是哪種方向,運用的是哪種語言,GitHub都能給你美好的學習感受。

image.png

2.前端裡-專注Web開發技術和資源分享

(https://www.yyyweb.com/)

前端裡專注於分享最前沿的web開發技術,教程、資源和素材,是面向網站開發人員和設計師的學習交流平臺。

image.png

3.踏得網-沉浸式網際網路體驗和學習門戶

(https://www.techbrood.com/)

領先的沉浸式網際網路內容門戶,一站式學習、創作和展示。支援中英文雙語檢索、模糊查詢、線上預覽和編輯。
裡面有很多很酷的動畫和特效,總有一款你中意的。

image.png

4.CSS-Tricks

(https://css-tricks.com/)

一個國外的優秀前端開發部落格,主要分享使用 CSS 樣式的技巧,經驗和教程等。值得前端開發者閱讀收藏的國外網站。你也可以將自己運用css進行設計的一些心得放上去,和大家一起進行學習借鑑交流。

image.png

5.CSDN-專業開發者社群

(https://www.csdn.net/)

是全球知名中文IT技術交流平臺,建立於1999年,包含原創部落格、精品問答、職業培訓、技術論壇、資源下載等產品服務,提供原創、優質、完整內容的專業IT技術開發社群。

(這個是小編當初的的學習啟蒙網站,畢竟小編的英文水平也就是just so so,汗顏)

image.png

6.JavaScript Fun - 程式碼庫合集(前端工坊)

(https://www.javascript.fun/)

一個集合當下最流行的 JavaScript 程式碼庫,顯示流行排行,開發者可以輕鬆的找到想要最新的程式碼外掛、工具和部落格。

image.png

7.Stack Overflow-程式設計人員問答網

(https://stackoverflow.com/)

全球IT界最受歡迎的技術問答網站之一,一個解決bug的社群,稱為程式設計界的十萬個為什麼。

image.png

8.Codrops-網頁設計開發部落格

(https://tympanus.net/codrops/)

發表技術文章和網頁教程,提供經驗,少踩坑,資源很豐富,很多優秀的技術都是從這裡來的。

image.png

二、工具型網站

1.每週訪客報告

(https://t.co/nuLFTvQhcq?amp=1)

一款免費的資料統計工具,可以獲取訪問您網站的使用者資料。

image.png

2.小型開發工具

(https://smalldev.tools/)

麻雀雖小,五臟俱全。一款操作簡潔明瞭的小型開發工具,可以幫助您完成編碼、解碼、測試等常見任務。

image.png

3.視覺型別量化表

(http://type-scale.com/)

一款視覺化線上編輯工具,可以實時編輯樣式,預覽不同樣式之間的差異。

對於css初學者來說,會獲得一種視覺直觀上的體驗,學起來是不是就不那麼枯燥乏味了呢。

image.png

4.Responsively

(https://responsively.app/)

有助於加快響應式Web應用程式的開發,是一款高效率工具。

image.png

5.元標籤

(http://metatags.io/)

Meta Tags 是一種為任何網站除錯和生成元標籤程式碼的工具。您可以編輯和試驗您的內容的標籤,然後預覽您的網頁在 Google、Facebook、Twitter 等上的外觀!

image.png

6.ReadMe

(https://readme.so/)

在幾分鐘內直觀地建立自述檔案的最簡單方法。

image.png

7.線上工具

(http://tool.lu/)

裡面有很多很有意思的小工具,比如一鍵摳圖、二維碼生成、摩斯電碼、歇後語、favicon線上製作、顏色轉換等,也有可以線上執行程式碼的工具哦~

image.png

8.阿里巴巴向量圖示庫

https://www.iconfont.cn/

iconfont-國內功能很強大且圖示內容很豐富的向量圖示庫,提供向量圖示下載、線上儲存、格式轉換等功能。阿里巴巴體驗團隊傾力打造,設計和前端開發的便捷工具。

(悄咪咪的說一句:小編對這些小小的,萌萌的圖案毫無抵抗力)

image.png

三、線上IDE

1. CodePen

(https://codepen.io/)

一個網站前端設計開發平臺,針對網站前端程式碼的一個工具,上面有各種效果的案例特效,可以在他們的demo基礎上開發自己的前端設計。

image.png

2. CodeSandBox

(https://codesandbox.io/)

CodeSandBox網站提供一個線上開發環境的“沙盒”,主流的框架如React、Vue、Angular等,都可即開即用、實時編譯預覽,非常方便。

image.png

3. JS Bin

(https://jsbin.com/?html,output)

一個輕量級線上編輯網站,介面很乾淨,臨時想除錯簡單的HTML或JS程式碼可以考慮來這兒試一試。

image.png

當然了,網站在精不在多,找到自己喜歡的、適合自己的,然後熟練掌握並使用,時不時發個自己的技術小心得,學習筆記什麼的,不僅可以收穫技術上的提升,還能給自己的記憶尋找一個可以儲存的寶庫,何樂而不為呢。

四、團隊

TNTWeb - 騰訊新聞前端團隊,TNTWeb致力於行業前沿技術探索和團隊成員個人能力提升。為前端開發人員整理出了小程式以及web前端技術領域的最新優質內容,每週更新✨,歡迎star,github地址:github.com/tnfe/TNT-We…

logo.png

相關文章