Danh sách cuối cùng về các công cụ và tài nguyên miễn phí tốt nhất dành cho nhà phát triển web Front-End

bởi Bradley Nice, Trình quản lý nội dung tại ClickHelp.com - công cụ tài liệu phần mềm

Phát triển front-end là sự phát triển của các yếu tố của một trang web mà khách hàng nhìn thấy và tương tác trực tiếp. Nó là sự kết hợp giữa kỹ năng lập trình và thẩm mỹ.

Những thách thức liên quan đến các nhà phát triển giao diện người dùng là các công cụ và kỹ thuật được sử dụng để tạo giao diện người dùng thay đổi liên tục và do đó, nhà phát triển cần phải liên tục nhận thức được lĩnh vực đang phát triển như thế nào.

Vì vậy, tôi đã tập hợp một danh sách các công cụ và tài nguyên cho các nhà phát triển front-end thuộc nhiều loại: Màu sắc, Trình tạo CSS, Máy tính & Chuyển đổi, Kiểu chữ & Phông chữ, Biểu tượng, Phân tích Kiểu trang web, Trình chỉnh sửa, Công cụ dành cho nhà phát triển, Kiểm tra, Hiệu suất, Tối ưu hóa, phản hồi, truyền cảm hứng, MOOC, Wireframes, Mockups & Prototypes, Design News & Community, Port portfolio, Resources.

Màu sắc

Color Hex: Một công cụ màu miễn phí cung cấp thông tin về bất kỳ màu nào

Chất liệu chọn màu

Bộ chọn màu phẳng đơn giản: Chọn định dạng mà bạn muốn sao chép vào bảng tạm của mình bằng bộ chọn ở trên cùng. Nhấp vào màu bạn muốn sao chép và nó sẽ được thêm vào bảng tạm của bạn ở định dạng đã chọn.

ColorDrop: Một công cụ kết hợp màu, cho phép bạn lưu các kết hợp màu yêu thích.

Palitable: Tạo bảng màu đẹp mà không có kiến ​​thức thiết kế trước.

ColorFavs: Đây là một công cụ tuyệt vời nơi bạn có thể dễ dàng tạo một bảng màu bằng cách kéo và thả hình ảnh của mình, chèn URL hoặc chọn các giá trị ngẫu nhiên.

Màu an toàn: Bảng màu đẹp và dễ tiếp cận dựa trên Nguyên tắc WCAG của tỷ lệ tương phản văn bản và nền.

MÀU SẮC: Một bảng màu đơn giản cho web.

SwatchMatic: Công cụ chọn màu cho các đối tượng trong thế giới thực. Nó cho phép bạn nhanh chóng xây dựng các bảng màu một cách nhanh chóng bằng cách sử dụng màu hạt giống do chính mẹ thiên nhiên cung cấp. Hướng máy ảnh di động của bạn vào một màu bạn thích và SwatchMatic cho bạn biết tên màu màu (bằng nhiều ngôn ngữ) và tất cả các giá trị bạn cần để tạo lại nó, cộng với nó cung cấp cho bạn năm màu khác phù hợp với nó.

uiGradents: gradien màu đẹp.

Dữ liệu màu web: Dự án này nhằm trả lời các câu hỏi như: Màu sắc / s hoặc màu sắc phổ biến nhất trên web là gì? Có một số ngành công nghiệp thích màu sắc nhất định hơn những người khác? Những màu sắc thường được tìm thấy cùng nhau?

Màu sắc thiết kế vật liệu: Ứng dụng web nhỏ này giúp bạn hình dung màu sắc thiết kế vật liệu và cũng dễ dàng sao chép màu sắc ở các định dạng khác nhau.

Màu sắc giao diện người dùng vật liệu: Bảng màu UI vật liệu Google Google bao gồm các màu chính và màu nhấn có thể được sử dụng để minh họa hoặc để phát triển màu sắc thương hiệu của bạn. Họ đã được thiết kế để làm việc hài hòa với nhau.

BADA55.io: BADA55.io là về việc tìm kiếm các từ leet xấu nhất cho các màu hex CSS của bạn.

Color Hexa: Đây là một công cụ màu miễn phí cung cấp thông tin về bất kỳ màu nào. Chỉ cần nhập bất kỳ giá trị màu nào trong trường tìm kiếm và nó sẽ cung cấp mô tả chi tiết và tự động chuyển đổi nó thành giá trị tương đương của nó trong Hexadecimal, Binary, RGB, CMYK, HSL, HSV, CIE-Lab, Hunter-Lab, CIE-Luv, CIE -LCH, XYZ và xyY.

Tỷ lệ tương phản: Dễ dàng tính tỷ lệ tương phản màu

Năm mươi sắc thái của màu xám cho các nhà thiết kế web:

BỘ SƯU TẬP: Cảm hứng bảng màu do người dùng tạo và chia sẻ

Colllor: Trình tạo bảng màu

Paletton: Công cụ tạo kết hợp màu sắc

Chrome Daltonize!: Daltonization là một kỹ thuật hiển thị chi tiết cho người dùng mù màu, cho phép họ xem những gì họ đã bỏ lỡ

Máy tạo CSS

CSS3.me: Cái này rất tối giản và phong cách, nhưng cũng rất chức năng. Nó cung cấp cho bạn khả năng thay đổi và thiết lập bán kính đường viền, bóng đổ, độ dốc và độ mờ.

Trình tạo CSS3: Nó là trình tạo cả chức năng và được thiết kế độc đáo. Tôi nghĩ rằng đây là một trong những mục yêu thích của tôi, vì thiết kế và giao diện người dùng rất sạch sẽ.

Trình tạo nút CSS3-Tricks: Cái này gần như hoàn toàn có thể điều khiển được bằng thanh trượt kéo và thả.

CSS3 Button.net: Thiết kế của cái này có thể thiếu, nhưng nó cung cấp nhiều sự lựa chọn hơn cái trước. Nó cung cấp khả năng thêm nhiều bóng văn bản, bóng trong, viền và màu phông chữ. Ban đầu có thể khó để tìm ra nhưng bạn sẽ nhận được nó nếu bạn chỉ chơi với nó trong vài phút.

Trình tạo độ dốc CSS cuối cùng: Trình tạo độ dốc CSS

Trình tạo nút CSS3: Nút này cung cấp cho bạn một nút lớn để thao tác với bóng, đường viền, màu sắc và trên hết nó cung cấp cho bạn khả năng chỉnh sửa di chuột qua.

Border-Radius: Đây là một công cụ nhỏ tối thiểu, rất thực tế và đơn giản. Tất cả những gì bạn làm chỉ đơn giản là đặt bao nhiêu cạnh tròn bạn muốn trên mỗi góc. Và sau đó bạn chỉ cần kiểm tra loại tiền tố trình duyệt nào bạn muốn đưa vào, và đó là nó.

Trình tạo nền CSS đầy màu sắc: Tạo nền CSS

EnjoyCSS: Trình tạo CSS tất cả trong một

CSS MenuMaker: Tạo điều hướng trang web đáp ứng

Bật / Tắt công tắc lật: Tạo công tắc bật / tắt CSS3

CSSmatic: Gradient, bán kính đường viền, tạo bóng hộp & tạo kết cấu nhiễu

Công cụ trực tiếp Ui Parade: Nút, Biểu mẫu, Biểu tượng, Trình tạo ruy băng

Mũi tên CSS Vui lòng: Trình tạo mũi tên CSS

Thư viện mẫu CSS3: Thư viện mẫu CSS3

Trình tạo bố cục: Tạo bố cục CSS

Tridiv: Trình chỉnh sửa dựa trên web để tạo hình dạng 3D trong CSS

Máy tính và bộ chuyển đổi

DPI Love: Tìm DPI / PPI của bất kỳ màn hình nào

CSS Inider: Tự động nội tuyến email của bạn CSS CSS

Code Beautify: Làm đẹp, Xác thực, Giảm thiểu, Phân tích và Chuyển đổi JSON, XML, JavaScript, CSS, HTML, Excel của bạn

PXtoEM: Chuyển đổi pixel thành EM

Mật độ xô: Bộ chuyển đổi mật độ màn hình cho Android và iOS

Bộ chuyển đổi mật độ: Bộ chuyển đổi mật độ pixel

Đây có phải là võng mạc không?: Máy tính hiển thị DPI / PPI

Kiểm tra NTH: Người kiểm tra thứ n và trẻ em thứ n

Kiểu chữ & Phông chữ

Google Fonts: Phông chữ web nguồn mở

Fontspirst: Một công cụ xây dựng để tạo ra những kiệt tác typographic vui nhộn.

Gridlover: Công cụ để thiết lập một hệ thống typographic với quy mô mô-đun và nhịp điệu dọc.

Loại Genius: Tìm kết hợp phông chữ hoàn hảo cho dự án tiếp theo của bạn.

Loại Nugget: Loại Nugget là một công cụ sắp chữ trực tuyến cung cấp cho bạn quyền kiểm soát tốt đối với một cơ sở mạnh mẽ cho loại web tốt - tất cả thông qua giao diện người dùng dễ chịu.

TypeWonder: Kiểm tra phông chữ web trên bất kỳ trang web trực tiếp nào

Fit Text: Một plugin jQuery để thổi phồng loại web

TypographyEditor: typography Editor là một công cụ miễn phí và trực tuyến để tạo ra các áp phích và hình ảnh typographic.

Chỉ loại của tôi:

Typecast: Một ứng dụng dựa trên trình duyệt để tạo ra các thiết kế đẹp, thực tế và nhất quán dựa trên kiểu chữ.

Font Squirrel: Hand nhặt phông chữ web miễn phí

Dafont: Lưu trữ các phông chữ có thể tải xuống miễn phí

Không gian phông chữ: Tải xuống phông chữ miễn phí

Loại Genius: Tìm kết hợp phông chữ hoàn hảo

Phông chữ là gì: Xác định phông chữ từ một hình ảnh

FontSturation: FontSturation là một công cụ xây dựng phông chữ miễn phí được tài trợ bởi nhà bán lẻ hàng đầu thế giới về loại kỹ thuật số, FontShop. FontSturation cho phép bạn nhanh chóng và dễ dàng tạo các phông chữ được xây dựng từ các hình dạng hình học, được sắp xếp theo mô hình lưới, như gạch hoặc gạch.

Flipping Điển hình: Một công cụ typography, nhập từ bạn muốn xem và ngay lập tức xem nó được đặt trong các kiểu chữ trên máy tính của bạn.

Font Swapper: Xem trước các trang web sẽ trông như thế nào với các phông chữ từ Webtype.

tinytype: Bảng tương thích hiển thị phông chữ hệ thống mặc định có sẵn trên các nền tảng di động khác nhau.

Typetester: So sánh phông chữ Web từ Adobe Edge, Google và Typekit

Tiff: Tìm hiểu sự khác biệt giữa các phông chữ của Google

Phông chữ miễn phí tốt nhất 2016: Bộ sưu tập phông chữ miễn phí năm nay của tôi

Biểu tượng

Biểu tượng thiết kế vật liệu: 750 glyphs Biểu tượng hệ thống thiết kế vật liệu của Google Design

Iconogen: Tạo favicon, Windows 8 Tiles, biểu tượng Apple Touch, biểu tượng Android và iOS

Marka: Biểu tượng biến đổi đẹp

Font Awesome: Biểu tượng vector có thể mở rộng có thể được tùy chỉnh ngay lập tức

Maki: Bộ biểu tượng cho bản đồ web

Batch: 300+ biểu tượng cho thiết kế giao diện người dùng và web

Fontello: Trình tạo phông chữ biểu tượng

Fontastic: Tạo phông chữ biểu tượng của riêng bạn

Iconmonstr: Một bộ sưu tập lớn các biểu tượng glyph từ một nghệ sĩ người Đức

Octicons: Phông chữ biểu tượng được khởi chạy bởi GitHub

GlyphSearch: Tìm kiếm các biểu tượng từ Font Awesome, Glyphicons, IcoMoon, Ionicons và Octicons

Icon Melon: Thư viện biểu tượng SVG cho web

Entypo: Một bộ 411 chữ tượng hình cao cấp được chế tác cẩn thận của Daniel Bruce

Gemicon: 600+ Bộ biểu tượng miễn phí, có 3 kích cỡ khác nhau (16px, 32px, 64px)

Máy in: Các biểu tượng vector miễn phí được sử dụng được nhúng trong webfont để dễ sử dụng trong giao diện người dùng của bạn

Phân tích phong cách trang web

Stylify Me: Tổng quan về hướng dẫn kiểu của trang web, bao gồm màu sắc, phông chữ, kích thước và khoảng cách

StyleStats: Công cụ đơn giản để thu thập số liệu thống kê CSS của trang web

Màu sắc: Tìm ra màu sắc hoặc màu sắc phổ biến nhất của trang web

Type-o-matic: Một tiện ích mở rộng trình duyệt tìm tất cả các phông chữ trên một trang

SnappySnippet: Dễ dàng trích xuất CSS và HTML từ phần tử được chọn

Biên tập viên

CodePen: Trình diễn các kỹ thuật nâng cao với mã nguồn có thể chỉnh sửa

Bin Bin: Một pastebin trực tiếp cho HTML, CSS & JavaScript và một loạt các bộ xử lý

CSSDeck: Bộ sưu tập các sáng tạo CSS và JS tuyệt vời để giúp đỡ các nhà phát triển và nhà thiết kế

Dabblet: Công cụ chia sẻ mã và sân chơi tương tác CSS

Liveweave: Liveweave là một sân chơi HTML5, CSS3 & JavaScript dành cho các nhà thiết kế và phát triển web

Adobe Edge Reflow: Công cụ thiết kế bổ sung cho quy trình thiết kế của bạn để giúp bạn tạo ra các thiết kế đáp ứng đẹp cho mọi kích thước màn hình

webflow: Trình tạo trang web kéo và thả để tạo các trang web phản hồi chuyên nghiệp

Macaw: Cung cấp tính linh hoạt giống như trình chỉnh sửa hình ảnh yêu thích của bạn nhưng cũng viết HTML ngữ nghĩa và CSS ngắn gọn đáng chú ý

Những công cụ phát triển

Chrome DevTools: Bộ công cụ gỡ lỗi và soạn thảo web được tích hợp trong Google Chrome

Grunt: Trình chạy tác vụ JavaScript để tự động hóa các tác vụ

LiveReload: Chỉnh sửa CSS và thay đổi hình ảnh áp dụng trực tiếp mà không cần nhấn nút refresh

Bower: Giải pháp cho vấn đề quản lý gói front-end

Yeoman: Một hệ sinh thái máy phát điện, về cơ bản là một plugin có thể được chạy bằng lệnh `yo` để dàn dựng các dự án hoàn chỉnh hoặc các phần hữu ích

Tôi có thể sử dụng: Các bảng hỗ trợ trình duyệt cập nhật để hỗ trợ các công nghệ web mặt trước

HTML5 Vui lòng: Tra cứu HTML5, CSS3 và tìm hiểu xem chúng đã sẵn sàng để sử dụng chưa

Giá trị CSS: Tham chiếu CSS, Thuộc tính và Giá trị

CSS Triggers: Một tài liệu tham khảo vô giá về cách CSS ảnh hưởng đến hiệu suất

Kiểm tra

Xác thực đánh dấu W3C: Kiểm tra tính hợp lệ đánh dấu của các tài liệu Web trong HTML, XHTML, SMIL, MathML

HTML_CodeSniffer: Kiểm tra mã nguồn HTML và phát hiện vi phạm tiêu chuẩn mã hóa được xác định

Xác thực CSS W3C: Kiểm tra tài liệu HTML (CSS) và (X) bằng các biểu định kiểu

CSS Lint: Chỉ ra các vấn đề với mã CSS của bạn

JS Lint: Chương trình JavaScript tìm kiếm sự cố trong chương trình JavaScript

Thuốc trừ sâu: gỡ lỗi bố cục CSS

PhantomCSS: Thử nghiệm hồi quy Visual / CSS với PhantomJS

QUnit: Khung kiểm tra đơn vị JavaScript

Ảnh chụp màn hình: Kiểm tra trình duyệt đa nền tảng

Người phản hồi: Kiểm tra xem trang web của bạn sẽ trông như thế nào trên các thiết bị phổ biến nhất

Trình giả lập Opera Mobile Classic: Sử dụng bộ chọn cấu hình để sinh ra nhiều phiên bản Opera Mobile Classic với độ phân giải, mật độ pixel, giao diện người dùng được xác định

Hiệu suất

Kiểm tra tốc độ trang web Pingdom: Kiểm tra và phân tích thời gian tải của trang trực tiếp

WebPagetest: Kiểm tra tốc độ trang web từ nhiều địa điểm trên toàn cầu

PageSpeed ​​Insights: Phân tích trang web và đề xuất các cách để làm cho nó tải nhanh hơn

GTmetrix: Hiệu suất của trang web lớp và cung cấp các đề xuất để khắc phục các sự cố này

YSlow: Phân tích và đưa ra các đề xuất để cải thiện hiệu suất của trang

Perfmap: Một bản đồ nhiệt hiệu suất của các tài nguyên được tải trong trình duyệt

Tối ưu hóa

CSSCSS: Cho bạn biết bộ quy tắc nào có khai báo trùng lặp

Helium: công cụ javascript để quét trang web của bạn và hiển thị CSS không sử dụng

CSS Tidy: Mở trình phân tích cú pháp và trình tối ưu hóa CSS

Trình nén CSS: Nén CSS của bạn để tăng tốc độ tải

CSS Dig: Hãy xem tất cả các thuộc tính CSS, tần số và biến thể của chúng

Công cụ khai thác JavaScript: Giảm thiểu JavaScript của bạn

FF Subetter: Giảm kích thước tệp phông chữ để tối ưu hóa việc sử dụng băng thông

Compressor.io: Giảm kích thước hình ảnh của bạn trong khi vẫn duy trì chất lượng cao

Tiền tố miễn phí: chỉ thêm tiền tố trình duyệt hiện tại vào bất kỳ mã CSS nào khi cần

Sprite Cow: Tạo CSS cho các trang sprite

TinyPNG: Nén mất dữ liệu nâng cao cho hình ảnh PNG

Hình ảnh thích ứng: Phát hiện kích thước màn hình của khách truy cập của bạn và tự động tạo, lưu trữ và cung cấp các phiên bản hình ảnh được thu nhỏ lại phù hợp của thiết bị

Phản hồi

Bounce: Thêm phản hồi về một thiết kế và chia sẻ nó với những người khác

Design Drop: Một công cụ thu thập phản hồi thiết kế

Peek: Xem và nghe video 5 phút của một người thực sự sử dụng trang web của bạn

Cảm hứng

CoDrops: CoDrops có một tập thể cực kỳ nổi tiếng hàng tuần (hoặc hơn), về cơ bản là một loạt các tài nguyên tuyệt vời và các mặt hàng truyền cảm hứng cho các nhà thiết kế web và các sáng tạo khác. Rất phổ biến và cực kỳ hữu ích.

Designrfix - Cảm hứng thiết kế đồ họa - Tài liệu hướng dẫn & thiết kế web: Một blog thiết kế đồ họa và thiết kế web cần thiết khác.

OneXtraPixel - Tạp chí trực tuyến về thiết kế và phát triển web

Một tạp chí trực tuyến dành cho các nhà thiết kế và nhà phát triển, OXP chia sẻ các mẹo, hướng dẫn, công cụ, tài nguyên và các bài viết khác về thiết kế và phát triển.

MonsterPost: TemplateMonster chủ yếu là một công ty mẫu, nhưng họ cũng có một blog tuyệt vời đang diễn ra. Nó không chỉ nói về công cụ của riêng họ - họ đảm bảo rằng họ cung cấp nhiều công cụ thiết kế web tuyệt vời.

FromUpNorth - Cảm hứng thiết kế chất lượng cao

DesignShack: Một lần nữa, rất nhiều tài nguyên được chia sẻ với cộng đồng thiết kế.

Thiết kế Vandelay: Rất nhiều và rất nhiều tài nguyên tuyệt vời, miễn phí, bài viết, giao dịch, công cụ WordPress và nhiều hơn nữa.

DesignM.ag: DesignM.ag là một cộng đồng dành cho các nhà thiết kế, thiết kế web và nhà phát triển.

Reddit Web_design

Không thực sự là một blog, nó là một subreddit.

Tuy nhiên, các cơ chế reddit nâng cao đảm bảo rằng bất cứ điều gì tăng lên hàng đầu là đọc cần thiết cho các nhà thiết kế web. Nó rất phổ biến, một trong những subreddits lớn nhất.

Abduzeedo - Cảm hứng thiết kế và hướng dẫn: Abduzeedo là một trong những người khác, nơi bạn sẽ tìm thấy những vòng tròn cảm hứng thiết kế cần phải xem cho nhà thiết kế muốn đi đầu xu hướng và biết những gì mới nhất và tuyệt vời nhất xung quanh.

guideZine - Một nơi dành cho các hướng dẫn phát triển web chất lượng cao: Đây là một tạp chí hướng dẫn chủ yếu dành cho các hướng dẫn phát triển web. Các hướng dẫn được viết tốt và dễ làm theo.

eWebDesign: eWebDesign là một nguồn khác của các bài viết mới nhất và lớn nhất từ ​​các chuyên gia thiết kế web. Tính năng câu chuyện về thiết kế web, phát triển web và hướng dẫn. Nó thực sự là một bản tin, vì vậy bạn nhận được trực tiếp vào hộp thư đến của mình!

WebAppers: Rất nhiều nguồn mở và tài nguyên web miễn phí.

WebNeel - Cảm hứng thiết kế, nghệ thuật, nhiếp ảnh và hoạt hình

CSS Mania - Phòng trưng bày CSS: Đây là trang web giới thiệu CSS phổ biến nhất. Một lần nữa, một trang web rất tốt để xem các thiết kế web sáng tạo.

9 blog thiết kế web cần thiết nhất bạn cần theo dõi

MOOC

Giới thiệu về thiết kế của mọi thứ hàng ngày: Thông tin cho bất kỳ ai tò mò về thiết kế: người thường, người kỹ thuật, nhà thiết kế và người không phải là nhà thiết kế

Tương tác tạo mẫu: Tìm hiểu các phương pháp tạo mẫu khác nhau bằng cách phác thảo, xây dựng và thử nghiệm

Giới thiệu về Thiết kế đồ họa: Tìm hiểu các nguyên tắc thiết kế đồ họa nền tảng (phông chữ, màu sắc, hình ảnh, hình nền và bố cục) và cách áp dụng chúng.

Giới thiệu về HTML và CSS: Tìm hiểu cách chuyển đổi các mô hình thiết kế kỹ thuật số thành các trang web tĩnh

Phát triển web: Tìm hiểu các khái niệm phát triển web cốt lõi từ người đồng sáng lập Reddit & Hipmunk Steve Huffman.

Nguyên tắc cơ bản của thiết kế web đáp ứng: Tìm hiểu các nguyên tắc cơ bản của thiết kế web đáp ứng với Google từ Pete LePage

Hình ảnh phản hồi: Tìm hiểu cách làm việc với hình ảnh trên web hiện đại, để hình ảnh của bạn trông tuyệt vời và tải nhanh trên mọi thiết bị

HTML5 Canvas: Tìm hiểu cách sử dụng canvas; làm thế nào để tạo ra các tác phẩm bằng cách sử dụng hình dạng, hình ảnh và văn bản; cách tạo hiệu ứng và bộ lọc trên hình ảnh và cách tạo hình động.

Phát triển ứng dụng Android: Tìm hiểu cách xây dựng ứng dụng Android

Khái niệm cơ bản về JavaScript: Tìm hiểu các nguyên tắc cơ bản về lập trình JavaScript

JavaScript hướng đối tượng: Tìm hiểu cách sử dụng các tính năng lập trình hướng đối tượng khác nhau trong JavaScript và quan trọng hơn là cách viết thư viện có thể sử dụng lại và có thể bảo trì.

Các mẫu thiết kế JavaScript: Tìm hiểu tầm quan trọng của việc phân tách các mối quan tâm khi viết JavaScript, có được kinh nghiệm thực hành trên đường đi

Kiểm tra JavaScript: Tìm hiểu cách viết các ứng dụng JavaScript một cách tự tin, sử dụng quy trình tái cấu trúc màu đỏ-xanh-lục

Xây dựng trải nghiệm web di động: Tìm hiểu cách tạo trải nghiệm web di động đa thiết bị tuyệt vời.

Thiết kế UX dành cho nhà phát triển di động: Tìm hiểu các kỹ thuật mà các nhà thiết kế tuyệt vời sử dụng để lập kế hoạch và tạo nguyên mẫu cho các ứng dụng tuyệt vời trước khi viết bất kỳ mã nào

Nguyên tắc cơ bản của UIKit: Xây dựng một loạt các ứng dụng đơn giản để trở nên thoải mái hơn với khung UIKit và làm chủ các thành phần được sử dụng rộng rãi nhất của nó

Giới thiệu về jQuery: Tìm hiểu cách đọc và hiểu ý nghĩa của tài liệu jQuery jQuery.

Giới thiệu về AJAX: Tìm hiểu cách tạo các yêu cầu không đồng bộ bằng JavaScript (sử dụng chức năng jQuery AJ AJAX) và hiểu rõ hơn về những gì mà thực sự xảy ra khi bạn làm như vậy

Tối ưu hóa hiệu suất trang web: Tìm hiểu cách tối ưu hóa bất kỳ trang web nào cho tốc độ bằng cách đi sâu vào chi tiết về cách trình duyệt trên thiết bị di động và máy tính để bàn hiển thị trang.

Thiết kế Gamification: Tìm hiểu những điều cơ bản của Gamification với cách tiếp cận thực tế cao

Wireframes, Mockup & Prototypes

Origami: Công cụ miễn phí để thiết kế giao diện người dùng hiện đại được tạo bởi Facebook

Cacoo: Tạo sơ đồ, sơ đồ trang web, sơ đồ, sơ đồ tư duy, khung dây, sơ đồ UML và sơ đồ mạng

Marvel: Biến hình ảnh Dropbox hoặc máy tính để bàn của bạn thành nguyên mẫu ứng dụng web và thiết bị di động cho mọi thiết bị và nhận phản hồi

Placeit: Tạo mockup iPhone và mockup iPad

MockFlow: Các dịch vụ trực tuyến để lên kế hoạch, xây dựng và chia sẻ công việc cho các nhà thiết kế

Justinmind: khung lưới tương tác cho web và di động

Wireframe.cc: Công cụ tạo khung tối thiểu miễn phí

Tin tức thiết kế & cộng đồng

/ r / web_design: Subreddit thiết kế web

/ r / design: Thiết kế subreddit

/ r / khả năng sử dụng: Trải nghiệm người dùng, Thiết kế giao diện hoặc Subreddit Nhân tố con người

/ r / userexperience: Subreddit thiết kế trải nghiệm người dùng

Trao đổi ngăn xếp: Thiết kế đồ họa: Hỏi và đáp cho các chuyên gia, sinh viên và những người đam mê thiết kế đồ họa

Trao đổi ngăn xếp: Trải nghiệm người dùng: Hỏi và đáp cho các nhà nghiên cứu và chuyên gia về trải nghiệm người dùng

Front-end Front: Một nơi mà các nhà phát triển front-end có thể đặt câu hỏi, chia sẻ các liên kết thú vị và hiển thị công việc của họ với phần còn lại của cộng đồng

Dứa: Trung tâm hướng dẫn, công cụ và tài sản cho nhà phát triển và nhà thiết kế

Lockerdome: Một mạng xã hội dựa trên sở thích

Nhà thiết kế Tin tức: Một cộng đồng của những người trong thiết kế và công nghệ

DesignFloat: Tin tức & mẹo thiết kế web

The Web Blend: Một cộng đồng dành cho các nhà thiết kế, nhà phát triển và người nghiện công nghệ

Design News: Một trang web có các bài báo tin tức, tài nguyên và hướng dẫn được viết bởi các nhà thiết kế và nhà phát triển

Danh mục đầu tư

Behance: Nền tảng trực tuyến hàng đầu để giới thiệu và khám phá công việc sáng tạo

Dribbble: Một nơi để hiển thị và kể, quảng bá, khám phá và khám phá thiết kế

Vận chuyển hàng hóa: Nền tảng xuất bản cá nhân nhằm tạo ra các công cụ có thể truy cập và bối cảnh được nối mạng để tăng cường sự tiếp xúc của các cá nhân tài năng trên Internet

DeviantArt: Một cộng đồng trực tuyến, trưng bày nhiều hình thức nghệ thuật do người dùng tạo ra

Tài nguyên

Vector Open Stock: Đồ họa vector miễn phí

Các nút: Một thư viện nút CSS được xây dựng với Sass & La bàn

Bootflat: Bộ UI UI phẳng mã nguồn mở dựa trên khung CSS Bootstrap 3.3.0

Animate.css: Thư viện hoạt hình chéo của các hoạt hình CSS

CSS Shake: CSS lắc đồ họa và biểu tượng cho trang hoặc ứng dụng của bạn

Các mẫu tinh tế: Các mẫu kết cấu có thể điều chỉnh miễn phí

Placekeep.it: giữ chỗ hình ảnh

Holder.js: Giữ chỗ hình ảnh phía khách hàng

Hammer.js: Thêm cử chỉ đa chạm vào trang web của bạn

Textillate: Một plugin đơn giản cho hoạt hình văn bản CSS3

Dòng thời gian JS: Các mốc thời gian được tạo thủ công đẹp mắt và dễ sử dụng

Modernizr: Thư viện JavaScript phát hiện các tính năng HTML5 và CSS3 trong trình duyệt của người dùng

Đồng vị: Tạo danh mục đầu tư có thể lọc cho trang web của bạn

Polyme: Giúp dễ dàng và nhanh hơn để tạo mọi thứ từ nút đến ứng dụng hoàn chỉnh trên máy tính để bàn, thiết bị di động và hơn thế nữa

CodyHouse: Một thư viện miễn phí về HTML, CSS, JS

Cheetyr: Bộ sưu tập các mánh gian lận và lối tắt cho các nhà thiết kế và phát triển

Tờ rơi: Thư viện JavaScript mã nguồn mở cho bản đồ tương tác thân thiện với thiết bị di động

Modest Maps: Thư viện miễn phí cho các bản đồ tương tác

Templated: Bộ sưu tập 846 mẫu trang web CSS và HTML5 miễn phí, được thiết kế và xây dựng bởi Cherry + AJ

GraphicBurger: Tài nguyên thiết kế được cung cấp miễn phí cho cộng đồng

Chúc một ngày tốt lành!

Bradley Nice,
Trình quản lý nội dung tại ClickHelp.com - công cụ tài liệu trực tuyến tốt nhất cho các nhà cung cấp SaaS