Nhật ký học tập

Design Principles   Tailwind CSS không chỉ đơn thuần là một CSS framework – nó là bộ công cụ xây dựng giao diện người dùng với triết lý thiết kế hiện đại: nhanh, tinh gọn, và linh hoạt. Có rất nhiều nhân tố liên quan tới việc phát triển website và bởi vì Tailwind được tạo ra để đơn giản hóa toàn bộ quá trình đó, chúng ta sẽ chia nhỏ các khái niệm để dễ nắm bắt – và tận dụng tối đa tài nguyên mà Tailwind cung cấp Utility classes Events Responsive design Dark mode Re-usage of style Creating custom styles Function and directives Chúng ta sẽ đi sâu vào một trong những yếu tố quan trọng nhất trong thiết kế hiện đại: Responsive Design Responsive Design Tailwind CSS mặc định theo mobile-first – nghĩa là bạn viết class cho màn hình nhỏ trước, rồi thêm các biến thể lớn hơn bằng cách dùng prefix breakpoint như sm:, md:, lg:… Breakpoint name Min-width Equivalent Media query sm 640px @media (min-width: 640px) { // CSS Rul...

Tailwind CSS là gì? Tailwind CSS được tạo ra bởi Adam Wathan, một lập trình viên người Canada. Ban đầu, Adam chỉ muốn tạo ra một công cụ nội bộ để tăng tốc việc thiết kế UI mà không cần rời khỏi HTML. Nhưng chính triết lý "utility-first" của anh lại mở ra một hướng đi hoàn toàn mới: viết giao diện bằng cách sử dụng các tiện ích nhỏ (utility classes) thay vì viết CSS riêng cho từng component. Tailwind được giới thiệu lần đầu vào năm 2017, và kể từ đó đã tạo nên một cuộc cách mạng nhỏ trong cách thiết kế web — vừa nhanh, vừa chuẩn, vừa nhất quán. Hệ sinh thái của Tailwind cũng phát triển cực kỳ mạnh, từ Tailwind UI (bộ giao diện trả phí do chính Adam phát triển) đến Headless UI (component UI không phụ thuộc vào style), và giờ là hàng loạt plugin, theme, và công cụ build. Tailwind Documentation: https://tailwindcss.com/docs/installation/using-vite Tailwind CSS Github: https://github.com/tailwindlabs/tailwindcss   Taiwind UI Pricing: https://tailwindcss.com/plus/ui-blocks/marketi...

Viết CSS hiệu quả, dễ bảo trì và mở rộng luôn là thách thức lớn đối với các lập trình viên front-end. Bạn thường xuyên tốn nhiều thời gian cho việc viết CSS boilerplate, gặp khó khăn trong việc bảo trì code CSS, hay dễ mắc lỗi và thiếu nhất quán? Đừng lo lắng, Tailwind CSS đã có mặt để giúp bạn! Tailwind CSS là gì ? Tailwind CSS là một framework CSS utility-first, tương tự như Bootstrap, cung cấp một tập hợp các lớp CSS được tích hợp sẵn mà chúng ta có thể sử dụng trong ứng dụng của mình. Tuy nhiên, điểm đặc biệt của Tailwind CSS là nó cung cấp một số lượng lớn các lớp CSS với các thuộc tính và quy tắc CSS khác nhau. Thay vì sử dụng các lớp CSS được định nghĩa sẵn cho các thành phần cụ thể, Tailwind CSS tập trung vào việc cung cấp các lớp CSS cơ bản mà chúng ta có thể kết hợp để xây dựng giao diện. Atomic CSS và Utility Classes Để hiểu rõ Tailwind CSS, trước tiên ta cần làm quen với khái niệm Atomic CSS và CSS utility classes: Atomic CSS : Là một phương pháp viết CSS, nơi mỗi class ...

https://adminlte.io/blog/bootstrap-5-templates/      

Có rất nhiều bài hướng dẫn canh giữa 1 phần tử DIV bất kỳ trong phần tử khác, nên hôm nay mình tóm tắt 1 trong số cách canh giữa phần tử DIV Có 4 điểm cần lưu ý: Dùng view port hay cho phần trăm: vh (viewport height), vw (viewport width), vmin (viewport minimum length) và vmax (viewport maximum length). Do phần tử Parent chứa child element có thể ko phải phần tử bao trùm page, nên bạn sử dụng position fixed với top = left = 0 Sử dụng margin với giá trị < 0. Để canh giữa, bạn chỉnh top = left = 50% Tại sao phải dùng viewport? Theo W3 Candidate Recommendation The viewport-percentage lengths are relative to the size of the initial containing block. When the height or width of the initial containing block is changed, they are scaled accordingly. Với ViewPort, kích thước dựa vùng xem của bạn hơn là phần tử chứa element đó. Margin với giá trị âm Áp dụng cho trường hợp bạn muốn canh giữa cho toàn bộ containter: This is by far the most common use case for negative margins. You give a cont...

Typography is the art and technique of arranging type to make written language readable and beautiful Use a font-size between 15 and 25 pixels The optimal point size for print is usually between 10-12 points while that for web, the optimal point size is between 15-25 points. In CSS, you should set font-size in ems or rems than pixels as the former are scalable in nature. Recently, there has been much talk about fluid typography using the newly introduced units vw and vh. Use (really) big font sizes for headlines Some of us may very well have body fonts that range between 20px - 24px and headers that are 30px - 70px, but that doesn’t always mean your website's typography is without issue. Use line spacing betwwen 120 and 150% 45 to 90 characters per line Use good font

Nhớ ngày đầu học về PHP, mình rất cuống cuồng tìm một trang web dạy về Html, Css. Cuối cùng izwebz là nơi bắt đầu để mình có kiến thức đầu tiên về thiết kế web.  Mười hai năm qua đi, vật đổi sao dời, izwebz đóng cửa. Mình rất tiếc vì lúc xưa không copy những bài viết hay lên blog. May mắn thay mình tìm được trang Youtube của nhóm izwebz mà vẫn chưa bị xóa. Hi vọng bắt đầu lại với giao diện, mình sẽ nắm lại được căn bản như xưa. Các bạn có thể xem toàn bộ video của izwebs tại: https://www.youtube.com/c/IzwebzPage/videos

Bạn muốn tìm 1 editor miễn phí, để có thể viết code html, js, css nhanh chóng, vừa có thể debug và chạy trực tiếp. Có rất nhiều tool editor miễn phí lần tính phí, nhưng theo cá nhân mình, mình thấy tool Visual Studio Code là công cụ nhẹ nhàng, mạnh mẽ, và có rất nhiều extension (tiện ích) hỗ trợ. Và quan trọng nhất là Visual Studio Code chạy được trên đa nền tảng, và có Microsoft hỗ trợ phát triển. Download: https://code.visualstudio.com/download Một số extension hữu ích và cần thiết để viết code Bootstrap Bootstrap 4, Font awesome 4, Font Awesome 5 Free & Pro Snippets - Ashok Koyi Live Server - Ritwick Dey Để cài đặt extension cho Visual Studio Code, bạn mở Ctrl + Shift + P => Install Extensions, rồi gõ tên những extension mà bạn cần cài đặt. Tạo project Web Mở Visual Studio Code. Bấm File -> Open Folder -> Chọn folder cần chứa project -> Select Folder. Tạo mới 1 file html: index.html. Gõ b4-$ rồi bấm Enter. Extension 1 sẽ tạo mới 1 file template mẫu Html ...

Nếu bạn muốn học về Flexbox, bạn chắc chắn sẽ không bỏ qua trang https://flexboxfroggy.com/ Đây là trang webgame. Trong game sẽ gồm có 2 loại nhân vật chính: frogs (ếch) và lily pads (lá súng). Nhiệm vụ của bạn là đưa những chú ếch đặt vào những lá súng. Dễ phải không? Có tất cả 24 màn chơi. Hi vọng là các bạn sẽ thích game này

Trước đây, để canh giữa 1 khối theo chiều ngang hoặc dọc, phải dùng rất nhiều thủ thuật. Nhưng từ khi css3 ra đời, đã bổ sung thuộc tính display:box, khiến việc canh giữa dễ dàng hơn. Điều kiện đầu tiên bắt buộc là bạn phải xác rộng chiều rộng và chiều cao của box cần canh giữa. Nếu bạn không xác định, việc hiển thị sẽ bị sai lệch tùy theo cách hiển thị của trình duyệt (như Firefox, Chrome).