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

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: 

• Lộ trình học PHP Căn Bản
• Merry Christmas Source Code – Template Code Giáng Sinh Noel Đơn Giản
• Merry Christmas Happy New Year Source Code – Template Code Giáng Sinh Và Năm Mới
• Cách sửa lỗi error establishing a database connection cho website
• 6 điều bạn có thể hiểu sai khi sử dụng Máy Tính
• Share Source Code TimeRubik – Bấm Giờ Rubik Cực Hấp Hẫn

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.

Nó được coi là trình soạn thảo HTML chuẩn WYSIWYG tiêu chuẩn của ngành, điều này sẽ làm cho việc thiết kế web trở nên rất dễ dàng cũng như rất thoải mái.

Adobe Dreamweaver CC 2020 giúp bạn tạo,  mã và quản lý các trang web động dễ dàng bằng công cụ mã hóa thông minh, đơn giản.

Đây được coi như là một phần mềm thiết kế web chuyên nghiệp cung cấp giao diện hình ảnh trực quan cho việc thiết kế và chỉnh sửa các trang web của Adobe.

Các tính năng của Adobe Dreamweaver CC

• Được coi là trình soạn thảo HTML WYSIWYG tiêu chuẩn của ngành, điều này sẽ làm cho web desiging rất dễ dàng cũng như rất thoải mái.
• Cho phép nhà thiết kế tạo trang web có khả năng hoạt động trên máy tính để bàn, thiết bị di động và máy tính bảng.
• Có công nghệ Bố cục Lưới Chất lỏng cùng với bảng điều khiển Xem trước MultiScreen sẽ cho phép bạn có được khả năng tương thích với các sản phẩm cầm tay.
• Có một bộ chuyển tiếp CSS sẽ đơn giản hóa quá trình tạo một số hình ảnh động hấp dẫn.

Các tính năng mới của Adobe Dreamweaver CC 2020

• Thiết kế và xây dựng các trang Web tiêu chuẩn
• Mã hóa được tích hợp với môi trường đồ họa
• Hỗ trợ các công nghệ web và ngôn ngữ lập trình
• Hỗ trợ JavaScript, ActionScript, CSS, ASP, PHP, HTML
• Thiết kế và phát triển nhiều trang động dựa trên công nghệ Ajax
• Khả năng tự động phát hiện loại chương trình mã lập trình
• Xem và chỉnh sửa các trang web được thiết kế trực tuyến
• Khả năng tải lên các trang trực tiếp trên các máy chủ
• Công cụ thiết kế mới và hỗ trợ tích hợp công nghệ CSS
• Tương thích hoàn toàn với các tiêu chuẩn web mới nhất
• Hỗ trợ nhiều màn hình dành cho người dùng Windows
• Giao diện người dùng được thiết kế lại, hiện đại hơn
• Tăng cường tích hợp Bootstrap và hỗ trợ phiên bản mới nhất

Cấu hình tối thiểu:

• CPU: Intel® Core 2 or AMD Athlon® 64 processor; 2 GHz hoặc cao hơn
• Hệ điều hành: Microsoft Windows 7 SP1, Windows 8.1, or Windows 10 64 bit
• Ram: 2 GB of RAM (4 GB khuyến nghị)
• Ổ cứng: 2 GB
• Màn hình: 1280×1024 display with 16-bit video card

Download Adobe Dreamweaver CC 2020

Hướng dẫn cài đặt phần mềm Dreamweaver 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.

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

The post Download Adobe Dreamweaver CC 2020 – Phần mềm thiết kế trang web chuyên nghiệp appeared first on Tân Hồng IT.

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:

*Với Bracket Pair Colorizer và 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.

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

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.

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.

7. Material Icon Theme

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

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

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:

• 6 điều bạn có thể hiểu sai khi sử dụng Máy Tính
• Đánh số phiên bản phần mềm – Software Versioning
• Chia sẻ Khóa Học Git & Github cho lập trình và thiết kế website
• Bộ Video Hướng Dẫn Tăng Tốc Máy Tính Của Bạn (Speeding Up Your PC)
• MAGIX VEGAS Pro 17.0 Build 284 Full Active 2020 – Phần Mềm Làm Video Phim Chuyên Nghiệp

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.

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

Download Full Bộ 1000 Cinematic Overlays Bundle

Source: sharewareonsale

Xem thêm:

• Chia sẻ khóa học How To Get Your DREAM Salesforce Admin / Developer Job!
• Full Key Professional + Enterprise Và Link Download Microsoft Visual Studio Tất Cả Các Phiên Bản Mới Nhất
• Code Web Trung Thu Đẹp, Nhiều Hiệu Ứng
• Chia sẻ 6 mẫu Code Form Login giao diện cực đẹp và dễ thương cho Website

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.

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.

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 trung thu

Tải Source Code trung thu tại đâyLink tải miễn phí từ Fshare

Tải Source Code trung thu tại đâyLink tải miễn phí - Dự Phòng

Xem Link web demo

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. Tất cả text trên web đều ở file index.php, bạn chỉ cần edit lại theo ý mình trong file này. Và có thể chỉnh lại thời gian bằng cách vào file js/countdown.js và chỉnh sửa dòng var targetDate = new Date("2019/9/14 00:00:00"); (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:

• Share Source Code Chào Mừng Năm Mới Với Hiệu Ứng Tuyệt Đẹp
• MAGIX VEGAS Pro 17.0 Build 284 Full Active 2020 – Phần Mềm Làm Video Phim Chuyên Nghiệp
• BlueLife Host Editor – Chỉnh Sửa File Host Trên Windows Dễ Dàng
• Merry Christmas Source Code – Template Code Giáng Sinh Noel Đơn Giản

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

The post Code Web Trung Thu Đẹp, Nhiều Hiệu Ứng appeared first on Tân Hồng IT.

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 code Form Login 2

DOWNLOAD CODE TẠI ĐÂY

Mẫu code Form Login 3

DOWNLOAD CODE TẠI ĐÂY

Mẫu code Form Login 4

DOWNLOAD CODE TẠI ĐÂY

Mẫu code Form Login 5

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 !

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

• Download Khóa Học Lập Trình Java Từ Cơ Bản Đến Nâng Cao
• Doraemon Stand By Me 2014 Thuyết Minh Tiếng Việt Full HD
• Chia sẻ Khoá Học Lập Trình Game Nâng Cao Trong Unity 3D – 2018
• Download Khóa Học Angular 8 từ cơ bản đến nâng cao
• Chia sẻ Khóa Học Git & Github cho lập trình và thiết kế website

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.

Bạn sẽ học được gì từ khóa học:

• Cách cài đặt git và Github
• Cách up và tải file và lưu trữ trên github
• Sử dụng các lệnh trong Git
• Web Development
• Front End Development
• Sử dụng Git & Github trong việc tạo ra một website cá nhân trực tuyến với tên miền tùy chọn
• Sử dụng Github làm domain và hosting riêng để làm Website CV Cá nhân 
• Cách nhúng facebook comment vào github

Yêu cầu cần có cho khóa học hoặc điều kiện tiên quyết?

• Một chút kiến ​​thức lập trình, không cần phải kiến ​​thức nâng cao

Khóa học này dành cho ai:

• Beginner Developers
• Intermediate Developers
• Người muốn tìm hiểu và sử dụng GitHub
• Bất cứ ai muốn bắt đầu phát triển các trang web tuyệt đẹp với khung web hiện đại

Tải Khóa Học Tại Đây:

LINK Xem Online Hoặc DOWNLOAD KHÓA HỌC (GOOGLE DRIVE)

Những hành vi sao chép reup sẽ bị xử phạt theo luật DMCA – bảo vệ bản quyền tác giả. Hãy cùng là những người văn minh. Khi copy hoặc share cho mọi người vui lòng ghi rõ nguồn TanHongIT.Net. Xin cảm ơn.

Các bạn hãy bật thông báo trên trình duyệt tại website này để nhận được thông tin khi có khóa học mới được up lên các bạn nhé!

Nếu các bạn có nhu cầu down khoá học cứ liên hệ mình hoặc bình luận dưới bài viết nhé. Mình sẽ sẵn sàng share nếu có. Cảm ơn các bạn.

Donate – Xin Ủng Hộ Đóng Góp Website TanHongIT.Net

DONATE FOR TANHONGIT

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

The post Chia sẻ Khóa Học Git & Github cho lập trình và thiết kế website appeared first on Tân Hồng IT.

Thư viện Javascript

Particles.js —  Thư viện giúp tạo các floating particle cho trang web

Three.js —  Thư viện giúp tạo các đối tượng và không gian 3D trên trang web

Fullpage.js —  Giúp dễ dàng thực hiện tính năng cuộn trang

Typed.js — Hiệu ứng đánh máy

Waypoints.js — Kích hoạt một function khi bạn di chuyển đến một element của web

Highlight.js —  Làm nổi bật các cú pháp cho website

Chart.js —  Tạo các biểu đồ trực quan bằng cách dùng javascript

Instantclick —  Đẩy nhanh thời gian tải trang, tải trước tài nguyên trên di chuột

Chartist —  Một thư viện về biểu đồ khác

Motio —  Một thư viện cho các hình động và hoạt họa dựa trên nền sprite

Animstion —  Plugin Jquery cho chuyển đổi trang bằng css animaton

Barba.js — Chuyển trang bằng fluid

TwentyTwenty — Một công cụ khác biệt trực quan để tìm những khác biệt

Vivus.js — Thư viện để tạo các ảnh vẽ trên SVG

Wow.js — Cung cấp các animation khi bạn cuộn trang

Scrolline.js —  Theo dõi việc bạn đã cuộn từ đầu cho đến khi kết thúc trang

Velocity.js —  Tạo hình động với javascript cực nhanh và đẹp

Animate on scroll —  Tạo sự đơn giản cho webite

Handlebars.js — Cung cấp các mẫu  Javascript

jInvertScroll — Cuộn trang với Parallax

One page scroll —  Một trang cuộn thư viện

Parallax.js —  Công cụ Parallax phản ứng với một thiết bị thông minh

Typeahead.js —  Hoàn thành tìm kiếm

Dragdealer.js —  Thư viện cung cấp việc minh họa drag

Bounce.js —  Tạo các hình động CSS3 cool

Pagepiling.js —  Cuộn một trang

Multiscroll.js —  Cuộn một trang web thành hai thanh cuộn dọc

Favico.js — Tạo các  favicon đa dạng

Midnight.js — Chuyển tiêu đề thành cố định

Anime.js — Thư viện animation

Keycode — Tạo  keycode javascript chỉ với một nút

Sortable — Kéo và thả

Flexdatalist —  Tự động điền

Slideout.js —  Trình điều hướng trình chiếu cho các ứng dụng di động

Jquerymy —  Liên kết dữ liệu bằng cách sử dụng jquery

Cleave.js — Định dạng nội dung nhập

Page — Định tuyến phía client cho các ứng dụng trang đơn

Selectize.js — Selected box ghép nối để thêm tag

Nice select — Thư viện JQuery để tạo các hộp chọn

Tether —  Sử dụng các yếu tố định vị một cách hiệu quả

Shepherd.js —  Hướng dẫn người dùng thông qua ứng dụng

Tooltip — Tên speak cho chính nó

Select2 — Thay thế Jquery cho các selected box

IziToast —Dễ dàng thực hiện các js notification

IziModal — Dễ dàng thực hiện các js modal

Thư viện CSS / Công cụ thiết kế

Animate.css — Thư viện animation

Flat UI Colors — Danh sách các màu chính đơn giản và hiệu quả

Material design lite — Framework dựa trên material design của Google

Materialui.co —  Nhiều tài nguyên cho material design framework

Colorrrs —Generator màu ngẫu nhiên

Section separators — Phân chia css

Topcoat —  Framework

Create ken burns effect — Ken hiệu ứng bằng cách sử dụng các css3 animation

DynCSS —  Thêm các hàm vào css, làm cho nó trở nên thân thiện

CSSpin —  Bộ sưu tập của css spinners

Feather icons — Đưa ra  Icon

Ion icons — Các icon

Font awesome — Icon và phông chữ

Font generator —  Kết hợp các phông chữ và tạo ra mixture

On/Off switch — Tạo chuyển đổi on/off với css

UI Kit —  Framework

Bootstrap — Framework

Foundation — Framework

Các sản phẩm/liên kết hữu ích

<cheat> cheatsheet – một danh sách tất cả mọi thứ có thể đi vào <head> tag

Ghost —  nền tảng blog đơn giản dựa trên node.js

What runs —  Plugin của Chrome để khám phá công nghệ nào được sử dụng để xây dựng trang web

Learn anything — Cung cấp các Mindmap để minh họa một các chủ đề khác nhau.

Đó là những liệt kê cho 67 công cụ hữu ích, thư viện và tài nguyên để tiết kiệm thời gian cho web developer. Từ giờ các lập trình viên web có thể giảm thiểu thời gian tìm hiểu các công cụ, thư viện hỗ trợ cho công việc.

Xem thêm: Những kiến thức về lập trình khác tại đây.

The post 67 công cụ hữu ích, thư viện và tài nguyên để tiết kiệm thời gian cho web developer appeared first on Tân Hồng IT.

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.

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:

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ụ 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ụ Accessibility

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

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

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

Công cụ Margin

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

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

Công cụ Padding

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

Phí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ễ

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

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

Công cụ Shadow

Chỉnh shadow cho element

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

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

Công cụ EditText

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

Công cụ Search

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

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é:

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.

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.

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:

• Tổng hợp những phím tắt hữu ích của trình duyệt Google Chrome
• Merry Christmas Source Code – Template Code Giáng Sinh Noel Đơn Giản
• Share Source Code Chào Mừng Năm Mới Với Hiệu Ứng Tuyệt Đẹp
• Download Khóa Học Angular 7 Course by Lior Avital – Become an Angular Expert
• Share code web Cây Thông Noel mừng Noel đến
• Share Template Blogger Convert Video Youtube To Mp3 – chuyển đổi video youtube

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.