Front End – Tân Hồng IT http://localhost:82/demowp Siêu Chia Sẻ Kiến Thức, Công Nghệ, Phần Mềm, Thủ Thuật, Tiện Ích Máy Tính Tue, 14 Jan 2020 13:47:15 +0000 en-US hourly 1 https://wordpress.org/?v=5.3.2 http://localhost:82/demowp/wp-content/uploads/2019/04/logo-TanHongIT-one-75x75.png Front End – Tân Hồng IT http://localhost:82/demowp 32 32 Share Code Đếm Ngược Chào Mừng Năm Mới 2020 Với Hiệu Ứng Tuyệt Đẹp http://localhost:82/demowp/share-code/share-code-dem-nguoc-chao-mung-nam-moi-2020-voi-hieu-ung-tuyet-dep/ http://localhost:82/demowp/share-code/share-code-dem-nguoc-chao-mung-nam-moi-2020-voi-hieu-ung-tuyet-dep/#respond Tue, 14 Jan 2020 13:47:15 +0000 http://localhost:82/demowp/?p=7677 Mừng Năm mới 2020 đang tới mình xin chia sẻ một món quà nhỏ đến cho tất cả các bạn, đó là bộ source code webCountdown Đếm Ngược Mừng Chào Năm Mới. Bộ source code này mình đã chỉnh sửa từ bộ source code CountDown cũ của năm 2019 mà trước đây mình đã từng chia […]

The post Share Code Đếm Ngược Chào Mừng Năm Mới 2020 Với Hiệu Ứng Tuyệt Đẹp appeared first on Tân Hồng IT.

]]>
Mừng Năm mới 2020 đang tới mình xin chia sẻ một món quà nhỏ đến cho tất cả các bạn, đó là bộ source code webCountdown Đếm Ngược Mừng Chào Năm Mới.

Bộ source code này mình đã chỉnh sửa từ bộ source code CountDown cũ của năm 2019 mà trước đây mình đã từng chia sẻ. Các bạn có thể xem lại tại đây: Source Code Chào Mừng Năm Mới Với Hiệu Ứng Tuyệt Đẹp 2019

code web nam moi 2020
Code đếm ngược mừng năm mới 2020

Bộ code này là một mẫu nguồn mở có những hiệu ứng rất đẹp mắt giúp các bạn cảm thấy hấp dẫn và tạo cảm hứng khi xem hơn.

Với hiệu ứng chạy chữ cùng hiệu ứng bắn pháo bông chắc chắn sẽ làm các bạn thấy hấp dẫn hơn rất nhiều. Ngoài ra Sourse này khi mở lên bạn còn có thể được xem các lời chúc mà bạn có thể tùy ý chỉnh sửa theo ý của bạn nữa.

Các bạn hãy tải về và chỉnh sửa lại theo ý thích của các bạn rồi up lên host chia sẻ cho mọi người cùng xem nhé!

Hoặc 1 số code web khác: http://localhost:82/demowp/category/share-code/

Download Source Code CountDown Happy New Year

Tải Source Code web chào mừng năm mới – Happy New Year tại đâyLink tải miễn phí

Hướng dẫn:

  1. Các bạn tải về rồi giải nén ra.
  2. Để chỉnh sửa theo ý của các bạn thì các bạn hãy chỉnh sửa ở file index.html nhé! (dùng trình chỉnh sửa notepad++, hoặc những trình chỉnh sửa code khác.)
  3. Thay đổi nội dung trong các file đó bao gồm tên bạn, những lời nhắn, trang web của bạn, hình ảnh của bạn và những thành phần khác trong code để web xuất hiện đúng theo ý thích của bạn…
  4. Khi đã chỉnh xong thì bạn hãy up lên host để chạy. (có thể dùng host free như buythost hay 000webhost,…).

Nếu có vấn đề hay thắc mắc gì hoặc bạn không biết cách chỉnh sửa thì hãy bình luận bên dưới để cùng trao đổi và giúp đỡ các bạn nhé!

Xem thêm: 

Nếu các bạn cảm thấy Website TanHongIT.Net thật sự hữu ích mình mong các bạn có thể chia sẻ những bài viết đến cho cộng đồng cùng thao khảo nhé. Cảm ơn các bạn !!!
Các bạn có bất kì thắc mắc cần được hỗ trợ hay yêu cầu các phần mềm, thủ thuật, khoá học,… thì cứ để lại comment bên dưới bài viết hoặc liên hệ qua fanpage của TanHongIT để được hỗ trợ nhé! Mình sẽ cố gắng chia sẻ cho các bạn mọi thứ cần thiết nhất!

CHÚC CÁC BẠN THÀNH CÔNG VÀ VUI VẺ

The post Share Code Đếm Ngược Chào Mừng Năm Mới 2020 Với Hiệu Ứng Tuyệt Đẹp appeared first on Tân Hồng IT.

]]>
http://localhost:82/demowp/share-code/share-code-dem-nguoc-chao-mung-nam-moi-2020-voi-hieu-ung-tuyet-dep/feed/ 0
Download Adobe Animate CC 2020 Hiệu ứng tương tác cho website chuyên nghiệp http://localhost:82/demowp/adobe/download-adobe-animate-cc-2020-hieu-ung-tuong-tac-cho-website-chuyen-nghiep/ http://localhost:82/demowp/adobe/download-adobe-animate-cc-2020-hieu-ung-tuong-tac-cho-website-chuyen-nghiep/#respond Tue, 29 Oct 2019 05:31:23 +0000 http://localhost:82/demowp/?p=7275 Download Adobe Animate CC 2020, thay thế Flash Professional, là một môi trường mạnh mẽ để tạo hoạt hình và nội dung đa phương tiện. Cho phép bạn tạo các dự án tương tác biểu cảm được hiển thị với chất lượng tuyệt vời trên máy tính để bàn và các thiết bị khác nhau, […]

The post Download Adobe Animate CC 2020 Hiệu ứng tương tác cho website chuyên nghiệp appeared first on Tân Hồng IT.

]]>
Download Adobe Animate CC 2020, thay thế Flash Professional, là một môi trường mạnh mẽ để tạo hoạt hình và nội dung đa phương tiện. Cho phép bạn tạo các dự án tương tác biểu cảm được hiển thị với chất lượng tuyệt vời trên máy tính để bàn và các thiết bị khác nhau, bao gồm cả máy tính bảng và điện thoại thông minh, cũng như trên màn hình tivi.

adobe animate cc 2020
Full bộ adobe animate cc 2020

Adobe Animate CC cũng cho phép bạn làm việc với raster, vector, cũng như đồ họa ba chiều bằng GPU. Cũng hỗ trợ truyền phát hai chiều âm thanh và video.

Adobe Animate CC sẽ giúp bạn trở thành một người thiết kế website chuyên nghiệp, tùy biến một cách bát mắt bằng các tạo ra các hiệu ứng HTML làm động nội dung web, giúp cho giao diện đẹp hơn trong mới lạ hơn. Tạo nội dung dựa trên web tương tác cho các trò chơi và quảng cáo bằng các công cụ minh họa và hoạt hình mạnh mẽ.

Các tính năng của Adobe Animate CC 2020 Tải xuống miễn phí

Dưới đây là một số tính năng tuyệt vời mà bạn có thể trải nghiệm sau khi cài đặt Adobe Animate CC 2020 Tải xuống miễn phí, xin lưu ý các tính năng có thể thay đổi và hoàn toàn phụ thuộc nếu hệ thống của bạn hỗ trợ chúng.

Tạo nhân vật trở nên sống động.

  • Phác thảo và vẽ các ký tự biểu cảm hơn bằng các bút vẽ vectơ nhạy áp lực và nghiêng, hoạt động như thật. Làm cho nhân vật của bạn chớp mắt, nói chuyện và đi bộ với hoạt hình theo từng khung hình đơn giản. Và tạo các biểu ngữ web tương tác đáp ứng các tương tác của người dùng như di chuyển chuột, chạm và nhấp chuột.

Hoạt hình với chân và tay và đầu.

  • Tiếp cận đối tượng của bạn trên máy tính để bàn, thiết bị di động và TV bằng cách xuất hình động của bạn sang nhiều nền tảng, bao gồm HTML5 Canvas, WebGL, Flash / Adobe AIR và các nền tảng tùy chỉnh như SVG. Bạn có thể bao gồm mã ngay trong các dự án của bạn và thậm chí thêm các hành động mà không cần phải mã.

Xem những gì mới có thể làm.

  • Animate luôn trở nên tốt hơn, với các tính năng mới được tung ra thường xuyên. Và với tư cách thành viên Creative Cloud của bạn, bạn sẽ có được chúng ngay khi chúng tôi phát hành chúng. Dưới đây là một số cập nhật mới nhất.

Điêu khắc tài sản

  • Tạo tư thế mới cho nội dung vectơ hoặc raster bằng cách sử dụng biến dạng lưới.

Kiểm soát lớp tốt hơn

  • Sắp xếp các lớp của bạn theo phân cấp cha-con để tạo hiệu ứng động dễ dàng hơn giữa các tư thế.

Tự động hát nhép

  • Nhờ Adobe Sensei, Animate giờ đây tự động khớp với tư thế miệng với âm thanh.

Tác giả và xuất bản VR

  • Sử dụng các kỹ năng 2D của bạn để xuất hình động 360 VR và tạo trải nghiệm tuyệt vời cho các bước đi ảo.

Yêu cầu hệ thống cho Adobe Animate CC 2020 Tải xuống miễn phí

Trước khi bạn cài đặt Tải xuống miễn phí Adobe Animate CC 2020, bạn cần biết máy tính của mình có đáp ứng các yêu cầu hệ thống được đề xuất hoặc tối thiểu không

  • Hệ điều hành : Windows 10 (Phiên bản cập nhật mới nhất)
  • Bộ nhớ (RAM):  Yêu cầu 4 GB RAM.
  • Dung lượng đĩa cứng : Cần 3 GB dung lượng trống để cài đặt đầy đủ.
  • Bộ xử lý:  Intel Pentium 4 Dual Core GHz trở lên.

Download miễn phí Adobe Animate CC 2020

Phiên bản Adobe Animate 2020 20.0.0.17400


Hướng dẫn cài đặt phần mềm Adobe Animate CC 2020

  1. Tắt phần mềm diệt virus (Chú ý tắt cả Windows Defender mặc định từ Windows.)
  2. Chạy file Setup .exe lên và chọn ngôn ngữ English.
  3. Bỏ tích ở ô “Install Home Page…” đi (Nếu bạn đã cài Microsoft Visual C++ Full rồi thì có thể bỏ tích cả 2 dấu).
  4. Nhấn Install và chờ quá trình cài đặt hoàn tất.
  5. Sử dụng phần mềm đã được cài sẵn bản quyền.

Nếu các bạn cảm thấy Website TanHongIT.Net thật sự hữu ích mình mong các bạn có thể chia sẻ những bài viết đến cho cộng đồng cùng thao khảo nhé. Cảm ơn các bạn !!!
Các bạn có bất kì thắc mắc cần được hỗ trợ hay yêu cầu các phần mềm, thủ thuật, khoá học,… thì cứ để lại comment bên dưới bài viết hoặc liên hệ qua fanpage của TanHongIT để được hỗ trợ nhé! Mình sẽ cố gắng chia sẻ cho các bạn mọi thứ cần thiết nhất!
Xem Thêm:

CHÚC CÁC BẠN THÀNH CÔNG

The post Download Adobe Animate CC 2020 Hiệu ứng tương tác cho website chuyên nghiệp appeared first on Tân Hồng IT.

]]>
http://localhost:82/demowp/adobe/download-adobe-animate-cc-2020-hieu-ung-tuong-tac-cho-website-chuyen-nghiep/feed/ 0
Những Plugin Extensions Hỗ Trợ không thể thiếu cho VSCode http://localhost:82/demowp/code-web/plugin-for-vscode/ http://localhost:82/demowp/code-web/plugin-for-vscode/#respond Mon, 30 Sep 2019 04:47:05 +0000 http://localhost:82/demowp/?p=5492 Tổng Hợp Những Plugin Hỗ Trợ không thể thiếu cho VSCode. Visual Studio Code (viết tắt là VSCode) là một trình biên tập được phát triển bởi Microsoft dành cho Windows, Linux và macOS. Nó hỗ trợ chức năng debug, đi kèm với Git, có syntax highlighting, tự hoàn thành mã thông mình, snippets, và […]

The post Những Plugin Extensions Hỗ Trợ không thể thiếu cho VSCode appeared first on Tân Hồng IT.

]]>
Tổng Hợp Những Plugin Hỗ Trợ không thể thiếu cho VSCode. Visual Studio Code (viết tắt là VSCode) là một trình biên tập được phát triển bởi Microsoft dành cho Windows, Linux và macOS. Nó hỗ trợ chức năng debug, đi kèm với Git, có syntax highlighting, tự hoàn thành mã thông mình, snippets, và cải tiến mã nguồn.

plugin for vscode
Những Plugin không thể thiếu cho VSCode

Hiện nay, VSCode chiếm được nhiều cảm tình của dân lập trình web nhờ hiệu suất ổn định, dễ sử dụng, cộng với vô vàn tính năng hữu ích được đóng gói sẵn. Bên cạnh đó, kho plugin đồ sộ của VSCode cho phép người dùng tha hồ tùy biến và cải thiện trình soạn thảo theo hướng tiện dụng nhất.

1. Snippets

Đầu tiên phải kể đến những snippets thông dụng. Mặc dù VSCode đã hỗ trợ khá nhiều snippet trong bộ cài đặt, bạn vẫn cần snippets của các frameworks/ thư viện như React, Vue hay Angular. Bạn có thể dễ dàng tìm chúng từ VSCode Marketplace, chẳng hạn như:

  • HTML Snippets
  • JavaScript (ES6) code snippets
  • Vue VSCode Snippets
  • Vue 2 Snippets

2. Bracket Pair Colorizer và Indent Rainbow

“Cặp đôi hoàn hảo” Bracket Pair Colorizer và Indent Rainbow sẽ tô màu cho những cặp dấu ngoặc nhọn khác nhau, đồng thời màu nền của trình soạn thảo cũng thay đổi mỗi khi bạn “đẩy vào” một cột.

Mặc định:

Bracket Pair Colorizer

*Với Bracket Pair Colorizer và Indent Rainbow: *

Indent Rainbow

3. Indenticator

Indenticator giúp bạn nhận biết dễ dàng các block code đang được sử dụng.

Indenticator

4. GitLens

Gitlens giống như một GUI tool cho git được tích hợp vào VSCode. Nó bao gồm hàng tá features như commit, add, commit search, history, Gitlens explorer. Nó giúp cho bạn dễ dàng hơn rất nhiều trong việc teamwork khi mọi người cùng làm việc trên cùng một Repo

GitLens vscode

5. Polacode

Polacode giúp “screenshot” code một cách đẹp đẽ hơn, như ví dụ bên dưới. Rất hữu ích khi bạn cần gửi code lên diễn đàn hay mạng xã hội nhờ trợ giúp.

Polacode

6. Import Cost

Bằng cách sử dụng webpack và babili-webpack-plugin, Import Cost hiển thị ngay lập tức dung lượng các thư viện được sử dụng trong dự án. Điều này rất hữu ích vì nếu càng gửi nhiều JavaScript về phía người dùng, trình duyệt càng phải tốn thời gian để dịch và thực thi, làm giảm đi hiệu suất của ứng dụng.

Import Cost

7. Material Icon Theme

Material Icon Theme là Plugin giúp hiển thị icon theo phong cách Material Design

Material Icon Theme

8. VSCode-icons

Là một plugin giúp các icon trên VSCode được hiển thị một cách đẹp mắt hơn, qua đó giúp cho lập trình viên dễ dàng hơn trong quá trình làm việc với VSCode

VSCode-icons

Lời kết

Trên đây là một số Plugin mà mình đã tổng hợp được từ nhiều bài viết được chia sẻ trên các diễn đàn mà mình nghĩ bạn nên sử dụng khi bắt đầu làm việc cùng với VSCode. Hi vọng bài viết này sẽ giúp cho các bạn dễ dàng hơn trong việc sử dụng và làm việc với VSCode để tạo ra những sản phẩm tốt và ưng ý nhất.

Xem thêm:

via Viblo

The post Những Plugin Extensions Hỗ Trợ không thể thiếu cho VSCode appeared first on Tân Hồng IT.

]]>
http://localhost:82/demowp/code-web/plugin-for-vscode/feed/ 0
Chia sẻ Full Bộ 1000 Cinematic Overlays Bundle cho Designer – Photoshop, Lightroom miễn phí http://localhost:82/demowp/tai-lieu/design/1000-cinematic-overlays-bundle/ http://localhost:82/demowp/tai-lieu/design/1000-cinematic-overlays-bundle/#respond Sun, 01 Sep 2019 08:10:09 +0000 http://localhost:82/demowp/?p=6853 Thấy sharewareonsale.com hiện đang sale bộ “1000 Cinematic Photo Overlays Bundle” với giá 0 đồng nên mình chia sẻ lại bộ này đến cho các bạn phụ vụ cho những công việc liên quan đến đồ họa. Bạn có thể làm bức ảnh bình thường trở nên sống động và hấp dẫn hơn. Đặc biệt […]

The post Chia sẻ Full Bộ 1000 Cinematic Overlays Bundle cho Designer – Photoshop, Lightroom miễn phí appeared first on Tân Hồng IT.

]]>
Thấy sharewareonsale.com hiện đang sale bộ “1000 Cinematic Photo Overlays Bundle” với giá 0 đồng nên mình chia sẻ lại bộ này đến cho các bạn phụ vụ cho những công việc liên quan đến đồ họa.

Bạn có thể làm bức ảnh bình thường trở nên sống động và hấp dẫn hơn. Đặc biệt là những bạn Designer, bạn sẽ biến mỗi bức ảnh thành một kiệt tác với 1000 lớp phủ Overlays Bundle này.

Một số hình ảnh Demo sau khi đã chỉnh sửa hoàn tất ảnh với 1000 Cinematic Overlays Bundle

1000 Cinematic Photo Overlays Bundle

1000 lớp phủ Overlays BundleCinematic Overlays Bundle


Download Full Bộ 1000 Cinematic Overlays Bundle

Source: sharewareonsale

Các bạn có bất kì thắc mắc cần được hỗ trợ hay yêu cầu các phần mềm, thủ thuật, khoá học,… thì cứ để lại comment bên dưới bài viết hoặc liên hệ qua fanpage của Sieushare.com để được hỗ trợ nhé! Mình sẽ cố gắng chia sẻ cho các bạn mọi thứ cần thiết nhất!
Nếu các bạn cảm thấy Website SieuShare.Com thật sự hữu ích mình mong các bạn có thể hỗ trợ donate ủng hộ cho website của mình có thể phát triển hơn nữa. Và chia sẻ những bài viết đến cho cộng đồng cùng thao khảo nhé. Cảm ơn các bạn !!!

Xem thêm:

CHÚC CÁC BẠN THÀNH CÔNG VÀ VUI VẺ 

The post Chia sẻ Full Bộ 1000 Cinematic Overlays Bundle cho Designer – Photoshop, Lightroom miễn phí appeared first on Tân Hồng IT.

]]>
http://localhost:82/demowp/tai-lieu/design/1000-cinematic-overlays-bundle/feed/ 0
Chia sẻ 6 mẫu Code Form Login giao diện cực đẹp và dễ thương cho Website http://localhost:82/demowp/share-code/mau-code-form-login-cho-website/ http://localhost:82/demowp/share-code/mau-code-form-login-cho-website/#respond Wed, 28 Aug 2019 04:04:24 +0000 http://localhost:82/demowp/?p=6800 Chia sẻ 6 mẫu Code Form Login giao diện cực đẹp và dễ thương cho Website Dạo Internet thấy một số mẫu Code về Form Login nhìn rất đẹp mà lại dễ thương nên mình up lên đây chia sẻ cho các bạn. Mẫu code Form Login 1 Cho Website DOWNLOAD CODE TẠI ĐÂY Mẫu […]

The post Chia sẻ 6 mẫu Code Form Login giao diện cực đẹp và dễ thương cho Website appeared first on Tân Hồng IT.

]]>
Chia sẻ 6 mẫu Code Form Login giao diện cực đẹp và dễ thương cho Website

Dạo Internet thấy một số mẫu Code về Form Login nhìn rất đẹp mà lại dễ thương nên mình up lên đây chia sẻ cho các bạn.

Mẫu code Form Login 1 Cho Website

mau form login de thuong cho website

DOWNLOAD CODE TẠI ĐÂY

Mẫu code Form Login 2

mẫu code login dễ thương
Ảnh demo về code

DOWNLOAD CODE TẠI ĐÂY

Mẫu code Form Login 3

code login form hình con chó dễ thương
Ảnh Demo

DOWNLOAD CODE TẠI ĐÂY

Mẫu code Form Login 4

Mẫu con gấu login form đẹp
Demo mấu login hình con gấu

DOWNLOAD CODE TẠI ĐÂY

Mẫu code Form Login 5

mau hà mã login cực đẹp

DOWNLOAD CODE TẠI ĐÂY

Mẫu code Form Login 6

DOWNLOAD CODE TẠI ĐÂY

Bài viết trên mình đã chia sẻ cho các bạn những mẫu code form login cho website đẹp và thấy dễ thương nhất mà mình đã sưu tầm.

Mình sẽ liên tục update những mẫu code mới nếu mình thấy đẹp vào bài viết này cho các bạn cùng tham khảo. Cảm ơn các bạn !

Các bạn có bất kì thắc mắc cần được hỗ trợ hay yêu cầu các phần mềm, thủ thuật, khoá học,… thì cứ để lại comment bên dưới bài viết hoặc liên hệ qua fanpage của Sieushare.com để được hỗ trợ nhé! Mình sẽ cố gắng chia sẻ cho các bạn mọi thứ cần thiết nhất!
Nếu các bạn cảm thấy Website TanHongIT.Net thật sự hữu ích mình mong các bạn có thể hỗ trợ donate ủng hộ cho website của mình có thể phát triển hơn nữa. Và chia sẻ những bài viết đến cho cộng đồng cùng thao khảo nhé. Cảm ơn các bạn !!!

Xem thêm: Những khoá học cho lập trình viên

CHÚC CÁC BẠN THÀNH CÔNG

The post Chia sẻ 6 mẫu Code Form Login giao diện cực đẹp và dễ thương cho Website appeared first on Tân Hồng IT.

]]>
http://localhost:82/demowp/share-code/mau-code-form-login-cho-website/feed/ 0
Công cụ Visbug, chính chủ Google làm ra hỗ trợ cho Lập Trình Viên FrontEnd Designer (cập nhật v2.2) http://localhost:82/demowp/code-web/cong-cu-visbug-giup-cuoc-doi-frontend-designer/ http://localhost:82/demowp/code-web/cong-cu-visbug-giup-cuoc-doi-frontend-designer/#respond Thu, 07 Mar 2019 16:32:02 +0000 http://localhost:82/demowp/?p=5554 Hôm nay mình sẽ giới thiệu công cụ lập trình website front end VisBug mới toanh, chính chủ cho Google Developer Team làm ra. VisBug sẽ giúp cho công việc chỉnh sửa HTML+CSS của các bạn cực kỳ nhàn. Chào các bạn Designer! Hôm nay mình sẽ giới thiệu một công cụ lập trình website […]

The post Công cụ Visbug, chính chủ Google làm ra hỗ trợ cho Lập Trình Viên FrontEnd Designer (cập nhật v2.2) appeared first on Tân Hồng IT.

]]>
Hôm nay mình sẽ giới thiệu công cụ lập trình website front end VisBug mới toanh, chính chủ cho Google Developer Team làm ra. VisBug sẽ giúp cho công việc chỉnh sửa HTML+CSS của các bạn cực kỳ nhàn.

Công cụ Visbug, chính chủ Google làm ra giúp cuộc đời FrontEnd Designer
Công cụ Visbug, chính chủ Google làm ra giúp cuộc đời FrontEnd Designer

Chào các bạn Designer!

Hôm nay mình sẽ giới thiệu một công cụ lập trình website front end VisBug mới toanh, chính chủ cho Google Developer Team làm ra. Nó sẽ giúp cho công việc chỉnh sửa HTML+CSS của các bạn cực kỳ nhàn.

Lâu nay thì các bạn toàn phải căn chỉnh Layout bằng PhotoShop trước rồi sau đó mới cắt ra HTML. Rồi sau đó điều chỉnh dần dần bằng CSS. Tuy nhiên với một element cơ bản, việc căn chỉnh có thể mất vài chục phút. Chỉ vì bạn phải điều chỉnh bằng cách gõ code vào F12 của Chrome thay vì kéo thả hoặc ấn phím tắt như Photoshop.

Công cụ Visbug, chính chủ Google làm ra giúp cuộc đời FrontEnd Designer 2

Google nhận ra Dev dùng F12 để debug rất nhiều và họ đã cho ra đời một công cụ mạnh hơn F12 gấp nhiều lần. Giúp bạn ngồi chỉnh layout ngay trên giao diện website. Và toàn bộ các best practice về CSS3 sẽ được tự gen ra và tự lưu lại vào style.css cho bạn mỗi khi bạn điều chỉnh một element DOM nào đó.

Cài đặt

Cài đặt rất đơn giản, công cụ lập trình website front end VisBug này là một Chrome Extension. Bạn vào đây để cài vào Chrome của bạn VisBug Chrome Extension. Tin hơi buồn là bản Firefox Extension đang được Dev chưa ra lò nên bạn thích dùng Firefox sẽ phải đợi một thời gian nữa nhé.

Chức năng hay ho của VisBug

Sau khi cài Extension. Bạn muốn debug trang web nào đó. Bạn hãy ấn icon VisBug trên thanh Address. Chúng ta sẽ thấy một thanh công cụ khá giống Photoshop hiện ra ở cạnh bên trái màn hình. Các chức năng chính của các icon như sau:

Công cụ Visbug, chính chủ Google làm ra giúp cuộc đời FrontEnd Designer 3

Mỗi icon khi di chuột vào đều có một ảnh động, mô tả rõ chức năng mà nó làm được, khá dễ hiểu. Tuy nhiên ảnh rất nhỏ nên bạn khó theo dõi. Vậy nên mình sẽ paste ảnh to ở đây cho các bạn dễ theo dõi nhé

Ảnh mình post lên viblo đã bị hiển thị thu nhỏ bớt, các bạn hãy open ảnh gif ở new tab để xem ảnh to và rõ nét hơn nhé.

Công cụ Guides

Công cụ này sẽ giúp hiển thị các đường kẻ bao quanh một element, thể hiện vị trí và chỗ trống mà nó chiếm.

Công cụ GuidesCông cụ Guides 2

Công cụ Inspect

Giúp hiển thị nhanh toàn bộ các thuộc tính của một element trên trang.

Công cụ Inspect

Công cụ Inspect 2

Công cụ Accessibility

Hiển thị các thuộc tính a11y ở góc nhìn người dùng

Công cụ AccessibilityCông cụ Accessibility 2

Công cụ Move

Giúp di chuyển một element rất linh hoạt lên xuống trái phải

Công cụ Move

Phím tắt Công cụ Move như sau:

Công cụ Move 2

Công cụ Margin

Giúp tăng giảm margin của element và hiển thị kết quả ngay khi ấn

Công cụ MarginPhím tắt Công cụ Margin như sau:

Công cụ Margin 2

Công cụ Padding

Giúp tăng giảm padding của element và hiển thị kết quả ngay khi ấn

 PaddingPhím tắt Công cụ Padding như sau:

Công cụ Flexbox Align

Căn lề cho element sử dụng flexbox rất hiệu quả và dễ

Flexbox Align

Phím tắt Công cụ Flexbox Align như sau:

Công cụ HueShift

Chỉnh màu cho một element rất nhanh chóng

HueShift

Phím tắt Công cụ HueShift như sau:

Công cụ Shadow

Chỉnh shadow cho element

Shadow

Phím tắt Công cụ Shadow như sau:

Công cụ Position

Kéo element và đặt nó vào các vị trí khác nhau như Photoshop

Position

Phím tắt Công cụ Positionnhư sau:

Công cụ FontStyle

Cho phép chọn font khác nhau cho element và xem trực tiếp

FontStyle

Công cụ EditText

Cho phép kích đúp và sửa InnerText của một element cực nhanh

EditText

Công cụ Search

Tìm kiếm một element theo id, class hoặc attributes quá dễ

 Search

Tập luyện nào!

Vì VisBug khá mới mẻ và chưa có nhiều tutorial trên mạn, cũng như chưa có bài viết tiếng Việt nào. Do đó cách hay nhất bây giờ là các bạn hãy dùng thử nó, nghịch ngợm với nó xem nó có gì hay ho, có gì tốt hơn so với các công cụ hiện tại mà bạn đang dùng hay không. Mình thì thấy nó giúp ích được rất nhiều.

Google Team còn cẩn thận đến mức làm ra luôn một trang web để bạn tha hồ thỏa sức nghịch ngợm với tool mới này.

Các bạn hãy vào đây để vọc nhé. https://visbug-1337.firebaseapp.com/

(Chú ý là các bạn nên nhớ phím tắt của công cụ đó. Học thuộc để lần sau cứ thế vào và chiến thôi)

Xem video Google Team giới thiệu VisBug để hiểu hơn các thao tác với nó nhé:

Một số thủ thuật nhỏ mình học được sau khi dùng VisBug

Copy/Paste style của element

Trên trang thì bạn có thể kế thừa style của một element cho element khác, Tuy nhiên nếu bạn muốn nhanh chóng nhìn xem các element cùng style ra sao thì phải tạo class và apply cho toàn bộ element.

Trong word hoặc excel có một nút khá hay đó là "Format Painter" giúp bê toàn bộ format trang trí cho 1 item sang item khác. VisBug có chức năng tương tự.

Chúng ta chọn 1 element muốn copy style. Ấn Ctrl+Shift+C (MacOS thì ấn CMD+OPT+C). Sau đó chọn 1 element muốn paste và ấn Ctrl+Shift+V là xong.

Xóa inline style của element

Với một element có viết đè nhiều style dạng inline ngày trong html. Điều này làm bạn khó xử lý khi thiết kế. Bạn hãy chọn element đó và ấn Alt+Delete nhé.

Chọn các element cha/con, anh/em bằng phím tắt

Bạn chọn 1 element và muốn chọn element bao quanh là cha của nó, mà không muốn mất công bật F12 để vào lục tìm, bạn có thể nhớ các phím tắt sau đây cho nhanh nhé:

Muốn chọn Ấn
Chọn element tiếp theo (Next Sibling) tab
Chọn element nằm ngay trước (Previous Sibling) shift+tab
Nhảy vào Div hiện tại và chọn ngay element đầu tiên enter
Nhảy ra khỏi Div hiện tại và chọn ngay element đầu tiên shift+enter

Danh sách toàn bộ bảng phím tắt của VisBug

Các bạn vào đây để tham khảo nhé: https://github.com/GoogleChromeLabs/ProjectVisBug/wiki/Keyboard-Master-List

XEM THÊM: NHỮNG CÔNG CỤ, SOURCE, THỦ THUẬT WEB HỮU ÍCH KHÁC

The post Công cụ Visbug, chính chủ Google làm ra hỗ trợ cho Lập Trình Viên FrontEnd Designer (cập nhật v2.2) appeared first on Tân Hồng IT.

]]>
http://localhost:82/demowp/code-web/cong-cu-visbug-giup-cuoc-doi-frontend-designer/feed/ 0
Share Source Code Chào Mừng Năm Mới Với Hiệu Ứng Tuyệt Đẹp 2019 http://localhost:82/demowp/code-web/share-source-code-chao-mung-nam-moi-voi-hieu-ung-tuyet-dep/ http://localhost:82/demowp/code-web/share-source-code-chao-mung-nam-moi-voi-hieu-ung-tuyet-dep/#respond Mon, 14 Jan 2019 17:01:06 +0000 http://localhost:82/demowp/?p=5161 Mừng Năm mới đang tới mình xin chia sẻ một món quà nhỏ đến cho tất cả các bạn. Đó là bộ source code web Đếm Ngược Mừng Chào Năm Mới. Bộ code này là một mẫu nguồn mở có những hiệu ứng rất đẹp mắt giúp các bạn cảm thấy hấp dẫn và tạo cảm […]

The post Share Source Code Chào Mừng Năm Mới Với Hiệu Ứng Tuyệt Đẹp 2019 appeared first on Tân Hồng IT.

]]>
Mừng Năm mới đang tới mình xin chia sẻ một món quà nhỏ đến cho tất cả các bạn. Đó là bộ source code web Đếm Ngược Mừng Chào Năm Mới.

code dem nguoc nam moi 2019
Code Đếm Ngược Chào Mừng Năm Mới 2019

Bộ code này là một mẫu nguồn mở có những hiệu ứng rất đẹp mắt giúp các bạn cảm thấy hấp dẫn và tạo cảm hứng khi xem hơn.

Với hiệu ứng chạy chữ cùng hiệu ứng bắn pháo bông chắc chắn sẽ làm các bạn thấy hấp dẫn hơn rất nhiều. Ngoài ra Sourse này khi mở lên bạn còn có thể được xem các lời chúc mà bạn có thể tùy ý chỉnh sửa theo ý của bạn nữa.

Một số hình ảnh minh họa:

Các bạn hãy tải về và chỉnh sửa lại theo ý thích của các bạn rồi up lên host chia sẻ cho mọi người cùng xem nhé!

Hoặc 1 số code web khác: http://localhost:82/demowp/category/share-code/

Download Source Code Happy New Year

Tải Source Code web chào mừng năm mới – Happy New Year tại đâyLink tải miễn phí từ Google Drive

Hướng dẫn:

  1. Các bạn tải về rồi giải nén ra.
  2. Để chỉnh sửa theo ý của các bạn thì các bạn hãy chỉnh sửa ở file index.html nhé! (dùng trình chỉnh sửa notepad++, hoặc những trình chỉnh sửa code khác.)
  3. Thay đổi nội dung trong các file đó bao gồm tên bạn, những lời nhắn, trang web của bạn, hình ảnh của bạn và những thành phần khác trong code để web xuất hiện đúng theo ý thích của bạn…
  4. Khi đã chỉnh xong thì bạn hãy up lên host để chạy. (có thể dùng host free như buythost hay 000webhost,…).

Nếu có vấn đề hay thắc mắc gì hoặc bạn không biết cách chỉnh sửa thì hãy bình luận bên dưới để cùng trao đổi và giúp đỡ các bạn nhé!

Xem thêm: 

Nếu các bạn cảm thấy Website TanHongIT.Net thật sự hữu ích mình mong các bạn có thể chia sẻ những bài viết đến cho cộng đồng cùng thao khảo nhé. Cảm ơn các bạn !!!
Các bạn có bất kì thắc mắc cần được hỗ trợ hay yêu cầu các phần mềm, thủ thuật, khoá học,… thì cứ để lại comment bên dưới bài viết hoặc liên hệ qua fanpage của TanHongIT để được hỗ trợ nhé! Mình sẽ cố gắng chia sẻ cho các bạn mọi thứ cần thiết nhất!

CHÚC CÁC BẠN THÀNH CÔNG VÀ VUI VẺ

Nguồn Internet

The post Share Source Code Chào Mừng Năm Mới Với Hiệu Ứng Tuyệt Đẹp 2019 appeared first on Tân Hồng IT.

]]>
http://localhost:82/demowp/code-web/share-source-code-chao-mung-nam-moi-voi-hieu-ung-tuyet-dep/feed/ 0
Merry Christmas Happy New Year Source Code 2 – Template Code Giáng Sinh Và Năm Mới http://localhost:82/demowp/code-web/merry-christmas-happy-new-year-2/ http://localhost:82/demowp/code-web/merry-christmas-happy-new-year-2/#respond Sat, 22 Dec 2018 16:46:51 +0000 http://localhost:82/demowp/?p=4815 Mừng những mùa giáng sinh đến ,mình xin được tiếp tục chia sẻ một món quà nhỏ đến cho các bạn. Đó bà bộ Source Code Web Merry Christmas Happy New Year. Bộ code này là một mẫu flash nguồn mở có những hiệu ứng rất đẹp mắt giúp các bạn cảm thấy hấp dẫn và […]

The post Merry Christmas Happy New Year Source Code 2 – Template Code Giáng Sinh Và Năm Mới appeared first on Tân Hồng IT.

]]>
Mừng những mùa giáng sinh đến ,mình xin được tiếp tục chia sẻ một món quà nhỏ đến cho các bạn. Đó bà bộ Source Code Web Merry Christmas Happy New Year.

Bộ code này là một mẫu flash nguồn mở có những hiệu ứng rất đẹp mắt giúp các bạn cảm thấy hấp dẫn và tạo cảm hứng khi xem hơn.

merry christmas happy new year source code
merry christmas happy new year source code

Các bạn hãy tải về và chỉnh sửa lại theo ý thích của các bạn rồi up lên host chia sẻ cho mọi người cùng xem nhé!

Các bạn có thể xem Code Noel phần 1 tại đây: http://localhost:82/demowp/share-code/merry-christmas-happy-new-year/

Hoặc 1 số source code web khác: http://localhost:82/demowp/category/share-code/

Download Source Code web Merry Christmas & Happy New Year

Tải Source Code web Merry Christmas tại đâyLink tải miễn phí từ Google Drive

Hiện tại Chrome đã hoàn toàn chặn chạy các Flash Player nên web này sẽ không thể hiển thị được trên Google Chrome. Các bạn cũng có thể tải về để tham khảo code nhằm học tập hoặc sử dụng trình duyệt khác để xem nhé! (Những phiên bản cũ hơn của Google Chrome vẫn có thể hoạt động tốt.)

Các bạn có thể xem demo tại đây.

Xem Demo của code tại đâyLink xem demo miễn phí

Hướng dẫn:

  1. Các bạn tải về rồi giải nén ra.
  2. Để chỉnh sửa theo ý của các bạn thì các bạn hãy chỉnh sửa ở file index.html và file data.xmlnhé! (dùng trình chỉnh sửa notepad++, hoặc những trình chỉnh sửa code khác.)
  3. Thay đổi nội dung trong các file đó bao gồm tên bạn, những lời nhắn, trang web của bạn, hình ảnh của bạn và những thành phần khác trong code để web xuất hiện đúng theo ý thích của bạn…
  4. Khi đã chỉnh xong thì bạn hãy up lên host để chạy. (có thể dùng host free như buythost hay 000webhost,…).

Nếu có vấn đề hay thắc mắc gì hoặc bạn không biết cách chỉnh sửa thì hãy bình luận bên dưới để cùng trao đổi và giúp đỡ các bạn nhé!

Xem Thêm:

CHÚC CÁC BẠN THÀNH CÔNG VÀ VUI VẺ 

The post Merry Christmas Happy New Year Source Code 2 – Template Code Giáng Sinh Và Năm Mới appeared first on Tân Hồng IT.

]]>
http://localhost:82/demowp/code-web/merry-christmas-happy-new-year-2/feed/ 0
Merry Christmas Happy New Year Source Code – Template Code Giáng Sinh Và Năm Mới http://localhost:82/demowp/code-web/merry-christmas-happy-new-year/ http://localhost:82/demowp/code-web/merry-christmas-happy-new-year/#respond Fri, 21 Dec 2018 13:50:07 +0000 http://localhost:82/demowp/?p=4803 Mừng những mùa giáng sinh đến ,mình xin được tiếp tục chia sẻ một món quà nhỏ đến cho các bạn – Source Code Web Merry Christmas Happy New Year. Bộ code này là một mẫu flash nguồn mở có những hiệu ứng rất đẹp mắt giúp các bạn cảm thấy hấp dẫn và tạo cảm […]

The post Merry Christmas Happy New Year Source Code – Template Code Giáng Sinh Và Năm Mới appeared first on Tân Hồng IT.

]]>
Mừng những mùa giáng sinh đến ,mình xin được tiếp tục chia sẻ một món quà nhỏ đến cho các bạn – Source Code Web Merry Christmas Happy New Year. Bộ code này là một mẫu flash nguồn mở có những hiệu ứng rất đẹp mắt giúp các bạn cảm thấy hấp dẫn và tạo cảm hứng khi xem hơn.

merry christmas happy new year code web
merry christmas happy new year code web

 

Chỉ cần các bạn di chuyển con trỏ chuột liên tục sang trái rồi sang phải thì hiệu ứng sương mù sẽ tan đi và cho các bạn thấy những hộp quà cũng như những chiếc chuông dễ thương.

Các bạn hãy tải về và chỉnh sửa lại theo ý thích của các bạn rồi up lên host chia sẻ cho mọi người cùng xem nhé!

Download Source Code web Merry Christmas

Tải Source Code Merry Christmas tại đâyLink tải miễn phí từ Google Drive

Hiện tại Chrome đã hoàn toàn chặn chạy các Flash Player nên web này sẽ không thể hiển thị được trên Google Chrome. Các bạn cũng có thể tải về để tham khảo code nhằm học tập hoặc sử dụng trình duyệt khác để xem nhé! (Những phiên bản cũ hơn của Google Chrome vẫn có thể hoạt động tốt.)

Các bạn có thể xem demo tại đây.

Xem Demo của code tại đâyLink xem demo miễn phí

Happy New Year code web

Hướng dẫn:

  1. Các bạn tải về rồi giải nén ra.
  2. Để chỉnh sửa theo ý của các bạn thì các bạn hãy chỉnh sửa ở file index.html và file data.xmlnhé! (dùng trình chỉnh sửa notepad++, hoặc những trình chỉnh sửa code khác.)
  3. Thay đổi nội dung trong các file đó bao gồm tên bạn, những lời nhắn, trang web của bạn, hình ảnh của bạn và những thành phần khác trong code để web xuất hiện đúng theo ý thích của bạn…
  4. Khi đã chỉnh xong thì bạn hãy up lên host để chạy. (có thể dùng host free như buythost hay 000webhost,…).

Nếu có vấn đề hay thắc mắc gì hoặc bạn không biết cách chỉnh sửa thì hãy bình luận bên dưới để cùng trao đổi và giúp đỡ các bạn nhé!

Xem Thêm:

CHÚC CÁC BẠN THÀNH CÔNG VÀ VUI VẺ 

internet

The post Merry Christmas Happy New Year Source Code – Template Code Giáng Sinh Và Năm Mới appeared first on Tân Hồng IT.

]]>
http://localhost:82/demowp/code-web/merry-christmas-happy-new-year/feed/ 0
Merry Christmas Source Code – Template Code Giáng Sinh Noel Đơn Giản http://localhost:82/demowp/code-web/merry-christmas-source-code/ http://localhost:82/demowp/code-web/merry-christmas-source-code/#respond Fri, 21 Dec 2018 10:16:07 +0000 http://localhost:82/demowp/?p=4799 Mừng những mùa giáng sinh đến ,mình xin được chia sẻ một món quà nhỏ đến cho các bạn. Đây là bộ source code Merry Christmas mừng giáng sinh hoạt động nhờ sự hết hợp giữa HTML-CSS-JS. Tính năng, đặc điểm Merry Christmas Source Code: Thiết kế đơn giản Vẫn theo phong cách Horizontal Scroll […]

The post Merry Christmas Source Code – Template Code Giáng Sinh Noel Đơn Giản appeared first on Tân Hồng IT.

]]>
Mừng những mùa giáng sinh đến ,mình xin được chia sẻ một món quà nhỏ đến cho các bạn. Đây là bộ source code Merry Christmas mừng giáng sinh hoạt động nhờ sự hết hợp giữa HTML-CSS-JS.

merry christmas source code

Tính năng, đặc điểm Merry Christmas Source Code:

  • Thiết kế đơn giản
  • Vẫn theo phong cách Horizontal Scroll Style
  • Sử dụng plugin từ pagePiling.js
  • Sử dụng HTML – CSS – JS

Bộ code này có những hiệu ứng rất đẹp mắt giúp các bạn cảm thấy hấp dẫn và tạo cảm hứng khi xem hơn. Các bạn cũng có thể up lên host để chia sẻ cho nhiều bạn bè để cùng mừng những ngày noel sắp đến nhé!

Một số ảnh demo.

code giang sinh

Các bạn hãy tải về và chỉnh sửa lại theo ý thích của các bạn rồi up lên host chia sẻ cho mọi người cùng xem nhé!

Download Source Code web Merry Christmas

Tải Source Code Merry Christmas tại đâyLink tải miễn phí từ Google Drive

Các bạn có thể xem demo tại đây.

Xem Demo của code tại đâyLink xem demo miễn phí

Hướng dẫn:

  1. Các bạn tải về rồi giải nén ra.
  2. Để chỉnh sửa theo ý của các bạn thì các bạn hãy chỉnh sửa ở file index.html nhé! (dùng trình chỉnh sửa notepad++, hoặc những trình chỉnh sửa code khác.)
  3. Thay đổi nội dung trong các file đó bao gồm tên bạn, những lời nhắn, trang web của bạn, hình ảnh của bạn và những thành phần khác trong code để web xuất hiện đúng theo ý thích của bạn…
  4. Khi đã chỉnh xong thì bạn hãy up lên host để chạy. (có thể dùng host free như buythost hay 000webhost,…).

Nếu có vấn đề hay thắc mắc gì hoặc bạn không biết cách chỉnh sửa thì hãy bình luận bên dưới để cùng trao đổi và giúp đỡ các bạn nhé!

Xem Thêm:

CHÚC CÁC BẠN THÀNH CÔNG VÀ VUI VẺ 

Special Thanks To Lê Viết Hưng, MSVN

The post Merry Christmas Source Code – Template Code Giáng Sinh Noel Đơn Giản appeared first on Tân Hồng IT.

]]>
http://localhost:82/demowp/code-web/merry-christmas-source-code/feed/ 0