Tôi không có tài năng gì cả. Tôi chỉ đam mê hiểu biết
18 Công Cụ Lập Trình Thiết Kế Website Miễn Phí (Phần 4)

18 Công Cụ Lập Trình Thiết Kế Website Miễn Phí (Phần 4)


Ngày 21 Tháng 11 Năm 2020

Ngày hôm nay chúng ta sẽ cùng nhau đi vào tìm hiểu nhưng công cụ, thư viện hay và hữu ích dành cho việc phát triển và thiết kế web (phần 4) nhé!


Nếu bạn muốn tham khảo các công cụ và thư viện phát triển web phần 3 thì truy cập đường dẫn bên dưới nhé!
Thư Viện Và Công Cụ Phát Triển Web (Phần 3)

Free Favicon Maker

Favicon là một logo nhỏ được hiển thị trên tab trình duyệt khi người dùng truy cập trang web của bạn. Và nó thường được đặt trong thẻ head với định dạng là:

 

Ngoài ra bạn có thể sử dụng định dạng khác như svg... Ở đây mình muốn giới thiệu đến bạn một công cụ giúp tạo ra favicon dễ dàng, thiết kế đẹp mắt và hoàn toàn miễn phí là Free Favicon Maker.

Free Favicon Maker

Nguồn

The good line-height

The good line-height giúp bạn có cái nhìn trực quan hơn về việc sử dụng thuộc tính line-height cho các đoạn văn bản trong trang web. Nó cung cấp 3 thuộc tính chính để bạn chỉnh sửa là

  • Font size: Kích thước chữ.
  • Multiplier: Khoảng cách giữa các dòng.
  • Grid row height: Xác định đường kẻ trong grid.

The good line-height

Nguồn

CSS 3D Transform

Đây là một bộ sưu tập về những cách sử dụng thuộc tính perspective để tạo ra các đối tượng 3D cho trang web. Phần mình cảm thấy thích nhất ở đây là mỗi đoạn mã đề có ví dụ cụ thể kế bên. Việc này sẽ giúp bạn có thể dễ dàng hình dung đối tượng hơn cũng như xem cái nào phù hợp để áp dụng cho trang web của mình.

 CSS 3D Transform

Nguồn

Good Web Design

Good Web Design là một website tập hợp nhiều thiết kế đẹp mắt dành cho landing page và được chia thành nhiều phần như là CTA(Call to action), navbar, footer, case study...

 Good Web Design

Nguồn

BGJar

BGJar là một công cụ online giúp bạn có thể tạo ra các background SVG dễ dàng và nhanh chóng cho trang web. Bạn chỉ cần chỉnh sửa các thông tin cần thiết thì web app sẽ tự động xuất hình ảnh hoặc đoạn mã cho bạn để áp dụng vào website.

BGJar

Nguồn

Bootstrap Icons

Lúc trước Bootstrap Icons ra đời để phục vụ nhu cầu xây dựng các component, documentation.. của Bootstrap. Tuy nhiên ngày nay thì nó cũng có thể sử dụng cho nhiều dự án khác thông qua việc các icon được định dạng theo kiểu SVG. Nó sẽ giúp bạn có thể dễ dàng thiết lập style cho icon thông qua CSS và không sợ bị tình trang vỡ ảnh.

Bootstrap Icons

Nguồn

Squircley

Squircley giúp bạn tạo các hình dạng đẹp mắt cho đối tượng ở trong web như là background, icon, logo...

Squircley

Nguồn

mailgo

Thông thường khi bạn mở đường dẫn mail thì trình duyệt sẽ sử dụng ứng dụng mặc định để mở trình soạn thảo gửi email. Còn đối với mailgo thì bạn có thiết lập các lựa chọn giúp người dùng có thể mở các trình soạn thảo email khác như Gmail, Outlook... hay mở mặc định. Ngoài sử dụng cho thẻ a href="mailto:" thì nó cũng có thể sử dụng với href="tel:" nữa nhé!

mailgo

Nguồn

Forge Icon

Forge Icon là nơi kết kết hợp nhiều loại icon khác nhau dành cho dự án web của bạn như là thương mại điện tử, du lịch, mạng xã hội, thiết kế app...

Forge Icon

Nguồn

GooFonts

Đối với Font thì mình hay sử dụng nhất là Google Font. Vừa miễn phí và vừa có rất nhiều font đẹp. Tuy nhiên với số lượng Font khổng lồ như vậy thì việc bạn có thể tìm ra được một font ưng ý cho trang web sẽ thật sự rất khó khăn đấy.
Do đó mình muốn giới thiệu đến bạn một công cụ tên là GooFonts. Nó sẽ có nhiệm vụ chia các loại font của Google Font thành nhiều mảng nhỏ như là font dành cho báo chí, trường học, hoạt hình, logo...

GooFonts

Nguồn

CSS Spider

CSS Spider là tiện ích dành cho Google Chrome, Firefox với nhiệm vụ chính là giúp bạn có thể xem thuộc tính và lấy mã CSS của bất kỳ đối tượng nào trong trang web.

CSS Spider

Nguồn

Một Số Dự Án Codepen Đẹp Mắt

Profile Card Hover Effect

See the Pen Profile Card Hover Effect by P (@petegarvin1) on CodePen.

Nguồn

Placeholders

See the Pen Placeholders by Mikael Ainalem (@ainalem) on CodePen.

Nguồn

<details> Animation

See the Pen <details> Animation by Mads Stoumann (@stoumann) on CodePen.

Nguồn

Clock JavaScript

See the Pen #Clock - JavaScript by Tiến Đức (@astronaut258) on CodePen.

Nguồn

border animation

See the Pen Houdini gradient border animation by Michelle Barker (@michellebarker) on CodePen.

Nguồn

TOASTS

See the Pen 🍞 TOASTS 🍞 by Ryan Trimble (@mrtrimble) on CodePen.

Nguồn

CSS clip-path Editor

See the Pen CSS clip-path Editor by Mads Stoumann (@stoumann) on CodePen.

Nguồn

Tổng kết:

Qua đây mình mong bài viết sẽ cung cấp thêm cho bạn những công cụ (phần 4) phát triển, thiết kế web và nếu có thắc mắc gì cứ gửi email mình sẽ phản hồi sớm nhất có thể. Rất mong bạn tiếp tục ủng hộ trang web để mình có thể viết nhiều bài hay hơn nữa nhé. Chúc bạn có một ngày vui vẻ!

author image

Mình là Thái Viết Nhật. Mình có ước mơ là có thể làm các bài giảng miễn phí và chia sẻ những bài viết, công cụ hữu ích dành cho thiết kế, phát triển website.

Mong bạn ủng hộ trang web để mình có thêm kinh phí phát triển và viết thêm nhiều bài về lập trình web hơn nữa nha. Xin chân thành cảm ơn.