阿川私房教材:學程式,拿 offer!

63 個專案實戰,直接上手!
無需補習,按步驟打造你的面試作品。

立即解鎖你的轉職秘笈

簡介

Web 開發的世界可能會因資源太多而令人不知所措。為了簡化這個過程,我列出了專為 Web 開發人員量身定制的 24 個最佳資源。

本指南涵蓋 HTML、CSS 和 JavaScript 的核心技術,旨在為初學者和專家提供有價值的工具和見解,以提高他們的 Web 開發技能。請探索這些精心挑選的資源,以幫助您在 Web 開發中脫穎而出。

原文出處:https://dev.to/swirl/24-best-resources-for-web-developers-html-css-javascript--2hog


Swirl

Swirl v3 演示

搜尋多個來源具有挑戰性。 Swirl 結合了您所有的資料庫、筆記、PDF、Jira、GitHub、向量資料庫、Discord、Slack、Teams Chat 等,並允許您搜尋它們。

允許您:

  • 產生答案的人工智慧摘要。 🤖

  • 管理您的資料並建立知識庫。 📚

  • 節省時間並提高工作效率。 ⏳

請在 GitHub 上給 Swirl Search 一個 ⭐️。 💖

https://github.com/swirlai/swirl-search 在 GitHub 上給 Swirl ⭐


CSS 工具

1. CSS 漸變

CSS Gradient 是一個可讓您為網站建立免費漸變背景的專案。

CSS 漸變

2. Colorhunt

Colorhunt 為設計師和藝術家提供了很棒的調色板。

Colorhunt

3. CSS 技巧

CSS Tricks 提供了有關級聯樣式表的一些最佳建議、提示、技巧和程式碼片段。

CSS 技巧

4. Haikei 生成器

Haikei 是一款 Web 應用程式,可產生令人驚嘆的視覺內容 - 可與您的設計工具和工作流程一起使用。

Haikei 產生器

5. FFFuel

Fffuel 是一個顏色工具和免費 SVG 生成器的集合,用於漸變、圖案、紋理、形狀和背景。

FFFuel

6. SVG 背景

SVG 背景託管一系列可在您的網站上使用的 SVG 背景。

SVG 背景

7. 動畫背景

動畫背景託管各種動畫背景的程式碼片段,可用作網站的背景。

動畫背景

8. Flowbite

Flowbite 提供了一組基於流行的 Tailwind CSS 框架的強大設計令牌和元件。

Flowbite

9. DaisyUI

DaisyUI 為 Tailwind CSS 新增了一組可自訂的顏色名稱,這些新顏色使用 CSS 變數作為值。

DaisyUI


HTML

10. Quackit 的 HTML 範本

Quackit 提供了大量免費網站模板可供選擇。根據您的選擇,您可以從簡單或更高級的模板清單中進行選擇。

Quackit 的 HTML 範本


圖示

11. Devicon

Devicon 是一組代表程式語言、設計和開發工具的圖示。您可以將其用作字體或將 SVG 程式碼複製/貼上到您的專案中。

Devicon

12. Flaticon

為您的專案下載免費圖示和貼紙 - 由設計師製作並為設計師製作的 PNG、SVG 等格式的圖像。

Flaticon


低程式碼工具

13. Framer

Framer 是一款低程式碼、基於人工智慧的拖放式網站建立器。

Framer

14. 泡泡

Bubble 自稱是世界上唯一的全端、無程式碼平台。 Bubble 是一款讓您無需編寫任何程式碼即可建立應用程式的工具。

氣泡

15. 阿達洛

Adalo 是一種低程式碼響應式 Web 應用程式設計工具。

Adalo


其他

16. CDN JS

CDN JS 是一個免費開源的內容傳遞網路。它允許 Web 開發人員直接搜尋 npm 套件並將其載入到靜態頁面的 HTML 頭部,而無需擔心 npm 安裝。

CDN JS

免費圖片

17. Unsplash

雖然我們有圖像生成工具,但沒有什麼比Unsplash帶給我們的超現實主義更重要了。您可以在網站上使用許多圖像(請記住向攝影師捐贈並在使用他們的圖像時提及他們)。

Unsplash

18. DALLE-3

Open AI 影像生成工具的第三次迭代。您可以使用 Bing AI 圖像產生器工具免費使用此工具。

DALLE-3


模型

19. 模型世界

大量免費、合法、完全分層、易於自訂的逼真 PSD 模型:可在您的專案、應用程式展示和演示中使用! 〜在他們的網站上提到!

模型世界

20.【免費模型世界】(https://www.freemockupworld.com/)

Free Mockup World 是高品質、最佳免費模型的合作,包括 Apple 裝置、品牌、標誌、印刷、數位藝術、時尚、服裝等。 〜在他們的網站上提到。

免費模型世界

21.【UI設計日報】(https://uidesigndaily.com/)

適合您網站的免費開源 UI 設計資源。 (包含登入頁面等的 Figma 模型)

UI 設計日報


其他有用的開源程式庫

22.【ShadCN】(https://ui.shadcn.com/)

使用 Radix UI 和 Tailwind CSS 建立的設計精美的元件。

圖片描述

23. 點選投票

Clickvote 是一個開源函式庫,可以省去圍繞內容建立反應元件的麻煩。

點擊投票

24. 斯巴達NG

ShadCN 用於 Angular。開源、社群建構。

斯巴達 UI


用於搜尋資料 - Swirl

漩渦

Swirl 是一個開源搜尋平台,它改變了您與資料互動的方式。

Swirl v3 演示

將其視為專門為您的獨特資料集量身定制的 ChatGPT。無論是筆記、程式碼片段、PDF 檔案還是電子郵件,Swirl 都是您獲取即時、人工智慧驅動見解的首選平台。

Swirl 與眾不同的特質:

  • 一般搜尋:無縫搜尋筆記、程式碼、文件、資料庫、電子郵件、聊天、日誌等。 🔍

  • 個人人工智慧驅動的知識助理:您可以為您的公司、新創公司或個人資料建立安全、可搜尋的知識庫。 🤖

  • 一鍵檢索增強生成:使用 Swirl,您可以立即執行人工智慧摘要和分析。您可以透過產生這些資料的資料來源來獲得答案。 🛠️

請在 GitHub 上給 Swirl Search 一個 ⭐️。 💖

https://github.com/swirlai/swirl-search 在 GitHub 上給 Swirl ⭐

並加入我們的【開源 Slack 社群 💕】(https://join.slack.com/t/swirlmetasearch/shared_invite/zt-1qk7q02eo-kpqFAbiZJGOdqgYVvR1sfw)


再次感謝您的閱讀!

按讚的人:

共有 0 則留言


精選技術文章翻譯,幫助開發者持續吸收新知。

阿川私房教材:學程式,拿 offer!

63 個專案實戰,直接上手!
無需補習,按步驟打造你的面試作品。

立即解鎖你的轉職秘笈