Các công cụ giúp bạn bắt tay vào xây dựng website nhanh chóng.

I am a developer, I write blogs occasionally. I hope you will find something new when reading my blogs.
Search for a command to run...

I am a developer, I write blogs occasionally. I hope you will find something new when reading my blogs.
No comments yet. Be the first to comment.
Trong series này mình sẽ chia sẻ về các cách khác nhau để làm giao diện website
Font, kích thước và màu sắc là những cái cơ bản của việc làm giao diện (Click vào link để đọc qua để có thể nắm được). "Cơ bản" ở đây nghĩa là nó đc sử dụng rất nhiều và ở mọi nơi. Do đó, để setup và dùng nó 1 cách có hệ thống không đơn giản. Chủ yếu...
Login xong rồi thì làm gì? Tất nhiên là các thao tác xử lý dữ liệu. thường viết tắt là CRUD (Create Read Update Delete). Chúng ta sẽ làm tất cả trên Wordpress, tiếp nối 2 bài viết về login trước. CRUD với việc Login bằng Ultimate User Chúng ta cần ti...

Ở bài trước chúng ta đã có thể login bằng cách cài thêm plugin cho Wordpress. Về bản chất, đó là việc dùng Wordpress làm server xử lý thông tin đăng nhập. Wordpress vừa hiển thị giao diện, vừa xử lý thông tin đằng sau. Ở bài này chúng ta sẽ học cách ...

Tiếp nối với bài về Header thì chúng ta sẽ bàn đến nút Login / Signup có trên Header. Thường thì các flow phổ biến sẽ là: click nút Login / Signup sẽ dẫn sang trang Login, ở đó sẽ có nút dẫn sang trang Signup nếu chưa có tài khoản, hoặc có design sẽ...
Từ bài này trở đi chúng ta sẽ bắt đầu thực hành các kiến thức về UI Builder, Web component và React để làm từng thành phần của web. Đầu tiên là Header, hay còn được gọi là Navigation bar, Navigation menu,.... Mục đích của phần giao diện này là giới t...

Fonts, Sizes và Colors Vì chúng ta sẽ làm việc trực tiếp trên Wordpress + Elemetor nên bước này cả 3 sẽ giống nhau: Vào Site settings và cài đặt Global Colors để dùng cho Elementor Tạo global style trong Custom CSS để dùng CSS variable cho Web Comp...

Mặc dù cách tốt nhất (trong việc học/làm code dài hạn) vẫn là cài đặt tất cả các thành phần cần thiết để code nhưng quá trình đó có thể mất thời gian, nếu bạn chưa có nhiều kiến thức, và không có nhiều thời gian, thì tốt nhất không nên. Ở bài này sẽ giới thiệu các công cụ có thể giúp bạn bỏ qua phần "cài đặt" và có thể bắt tay luôn vào code.

Jsbin.com chia layout thành nhiều cột giúp bạn nhìn được tất cả mọi thứ 1 cách tổng quan, rất tiện cho việc test nhanh 1 số đoạn css.
Điểm mạnh của Jsbin.com là không chỉ có test code giao diện, bạn có thể dùng nó để test code logic javascript nhanh chóng (ẩn hết các tab về giao diện, chỉ mở tab javascript và console).


Để code React trên máy bạn sẽ cần cài Nodejs, Visual Studio Code, đôi khi là Python để build SASS. Hãy tranh thủ cài khi rảnh. Còn bây giờ b có thể thử ngay bằng việc dùng codesandbox. Tạo 1 ứng dụng React chỉ qua 1 vài click. Giao diện code rất giống với Visual studio Code.

LocalWP mặc dù vẫn phải cài vào máy nhưng quá trình rất đơn giản, nó tự cài hết các thành phần cần để bạn chạy được wordpress

LocalWP cho bạn chọn nhiều lựa chọn về các version trước khi cài đặt. Mình lựa chọn Wordpress vì nó opensource, dễ dàng phát triển ở máy cá nhân cũng như trên server. UI Builder từ Wordpress có thể không phải là tốt nhất, có rất nhiều Builder khác tốt hơn, nhưng lại không phải open source khiến bạn phải lệ thuộc vào các dịch vụ đó, và mất phí sử dụng theo tháng.
Để tiến hành với Wordpress thì bạn sẽ cần cài thêm các plugins:
Simple Custom CSS and JS: dùng để chèn HTML JS CSS vào tất cả các trang.
All-in-One WP Migration: dùng để backup và restore, để đồng bộ bản web ở máy cá nhân và bản web trên server
Elementor: là UI Builder chính chúng ta sẽ dùng.
Simply Static: để export web của bạn ra html, cần dùng trong các dự án deploy frontend lên các site static hosting, như Netlify, S3, Firebase hosting, Surge,....
Plugin quan trọng nhất là Elementor, các cái khác có thể không có cũng được. Elementor có bản free và bản pro, bản free thì khá hạn chế, quan trọng nhất là phần Theme builder bị lock, sẽ không dùng được tính năng builder header và footer của nó. Tuy nhiên vẫn có thể dùng Elementor bản Free để build đc.

Trong ảnh là demo mở 2 tab 1 bên là UI Builder và 1 bên là kết quả. Để làm được cái này thì phải thêm custom CSS để ẩn hết các phần không cần thiết của Wordpress để cho phần build bởi Elementor rộng full width.
Lưu ý, việc custom CSS này sẽ tùy thuộc vào theme bạn đang xài. Khi dùng Wordpress cài đặt 1 theme khác, thì phải viết lại đoạn CSS này.
Mình sẽ đính kèm file backup của bản wordpress demo bên trên, bạn có thể cài 1 bản Wordpress mới bằng LocalWP (PHP 8.1.23, Wordpress 6.4.2, Mysql 8.0.16), cài All in one migration và import bản backup này vào sẽ ra đc kết quả như ảnh trên.
Tải file backup về tại đây.
Ghi chú: mình có 1 bộ backup khác có thể dùng All in one migration không giới hạn, Elementor có dùng được Theme Builder và Custom Selector CSS. Bạn nào cần liên hệ trực tiếp với mình share FREE (lequanghuylc@gmail.com), bộ này sẽ không post trực tiếp trên bài viết. Các bài viết sau sẽ chủ yếu hướng dẫn dựa trên bộ này.
Việc dùng LocalWP ở bên trên mình thấy cũng khá dễ dàng rồi. Tuy nhiên khác với JSBin cho HTML, Codesandbox cho React thì LocalWP lại không có khả năng làm trên web, tức là không làm được ở nhiều thiết bị khác nhau. Để làm được thì bạn sẽ cần 1 server riêng để code đc lưu trên server và có thể đăng nhập được từ nhiều thiết bị. Bạn nên mua 1 wordpress hosting có thể cài Wordpress nhiều version bằng 1 click. Bạn có thể google để tìm 1 bên bán wordpress hosting chi phí hợp lý. hoặc có thể liên hệ mình.
Tools chuẩn bị xong rồi thì giờ sẽ tiến hành đi sâu vào xây dựng giao diện website nhé các bạn.