Hello lại là mình đây. Bài viết hôm nay mình sẽ giới thiệu tới mọi người một trick khá hay khi dùng CSS flexbox nhé. Thực ra đây là do cách hoạt động của flexbox có hơi kì cục một chút, nếu không cẩn thận thì giao diện có thể bị overflow luôn. Nên mẹo này là dùng để khắc phục lỗi bất thường trên của flexbox. Ok cùng bắt đầu tìm hiểu ngay thôi. 1. Chia layout với flexbox Để bắt đầu, mình...
Happy New Year flexbox CSS
1. Yêu cầu Yêu cầu bài toán là người dùng nhập năm sinh vào ô input, khi click vào button thì tính tuổi của họ. Đây là một trong những bài tập vanilla Javascript ở mức cơ bản giúp các bạn làm quen, chủ yếu giải thích về Javascript nên phần giao diện sẽ không phân tích nhiều. Hi vọng với bài tập này các bạn sẽ thấy thích thú khi học Javascript. 2. HTML - CSS <!DOCTYPE html> <html lang="en"> <head> ...
HTML JavaScript CSS vanilla js
1. Căn trung tâm (Perfect Centering) Sử dụng flex giúp căn chỉnh một cách nhanh chóng và rất dễ dàng. Chúng ta hãy xem ví dụ về code căn trung tâm nhé : <h1>Perfect Centering</h1> <p>A container with both the justify-content and the align-items properties set to <em>center</em> will align the item(s) in the center (in both axis).</p> <div class="flex-container"> <div></div> </div> .flex-container { display: flex; ...
CSS
Giới thiệu Chào mọi người. Hiện nay trong môi trường phát triển có rất nhiều công cụ giúp chúng ta có thể viết code nổi tiếng như Sublime, Atom, Visual Code và nhiều công cụ khác nữa nhưng có lẽ trong vài năm gần đây Visual Code đang nổi lên như 1 công cụ phổ biến mà rất nhiều người ban đầu từ dùng những công cụ khác cũng đã thử với Visual Code và dần thích nó. Hôm nay mình xin giới thiệu...
JavaScript CSS ReactJS visual code
Sẽ không có âm nhạc nếu giữa các nốt không có khoảng cách. Hãy tưởng tượng nếu các nốt đều được phát ra cùng một lúc, hoặc phát ra quá nhanh đến nỗi chúng ta không thể nào phân biệt được đâu là nốt kế tiếp, "bản hòa ca" này hẳn sẽ rất đinh tai nhức óc. Zappa đã từng nói: "Phải có khoảng cách giữa các nốt với nhau" để từng âm đều rõ ràng và nổi bật theo...
CSS uiux Web Layout
I> Mở đầu: Để tạo ra 1 Chart, thường mọi người hay chọn Highchart (https://github.com/highcharts/highcharts) hoặc Chartjs(https://www.chartjs.org/) vì nó có độ ổn định và đã được anh em tin tưởng. Hôm nay, mình xin giới thiệu 2 thư viện Chart, mọi người thử xem nó có gì khác so với 2 anh lớn kia nhé. II> Thư viện thứ 1 - tui.chart: Trang chủ : https://ui.toast.com/tui-chart Github :...
HTML CSS Javasscript chart JS
Chúng ta sẽ cùng nhau tìm hiểu 3 kiểu hiển thị phần tử trong CSS đó là Block, Inline và Inline-block xem chúng có gì khác nhau nhé ! Trước khi vào bài viết thì giả sử chúng ta có đoạn mã HTML như sau: <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- displays site properly based on user's device --> <link rel="stylesheet" href="main.css"> ...
HTML Front-end CSS
1. Yêu cầu Yêu cầu bài toán là khi người dùng click vào button Copy thì sẽ lưu giá trị trong ô input bên cạnh vào bộ nhớ thay cho việc người dùng phải nhấn Ctrl + C mất thời gian. Đây là một trong những bài tập vanilla Javascript ở mức cơ bản giúp các bạn làm quen, chủ yếu giải thích về Javascript nên phần giao diện sẽ không phân tích nhiều. Hi vọng với bài tập này các bạn sẽ thấy thích thú...
HTML JavaScript CSS vanilla js
1. Yêu cầu Yêu cầu thứ nhất là khi click vào button thì thay đổi màu nền ngẫu nhiên trong một danh sách các mã màu cho trước. Yêu cầu thứ hai là màu sau không trùng với màu trước. Đây là một trong những bài tập vanilla Javascript ở mức cơ bản giúp các bạn làm quen, chủ yếu giải thích về Javascript nên phần giao diện sẽ không phân tích nhiều. Hi vọng với bài tập này các bạn sẽ thấy thích...
HTML javascipt CSS vanilla js
Bài hôm nay chúng ta sẽ học về plugin html-webpack-plugin được dùng để sắp xếp các file html theo một trật tự nhất định, giúp tối ưu nội dung file html hơn. 1. Cài đặt Link plugin: https://github.com/jantimon/html-webpack-plugin Cài cho Webpack 5 npm i --save-dev html-webpack-plugin Cài cho Webpack 4 npm i --save-dev [email protected] 2. Chuẩn bị file Để bài học được dễ dàng theo dõi chúng ta nên xóa các file trong...
HTML JavaScript CSS May Fest Webpack
1. Yêu cầu Yêu cầu bài toán là khi người dùng chọn ảnh từ máy tính thì chúng ta sẽ hiển thị hình ảnh preview để xem trước mà không cần phải upload lên server. Đây là một trong những bài tập vanilla Javascript ở mức cơ bản giúp các bạn làm quen, chủ yếu giải thích về Javascript nên phần giao diện sẽ không phân tích nhiều. Hi vọng với bài tập này các bạn sẽ thấy thích thú khi học...
HTML javascipt CSS vanilla js May Fest
1. Yêu cầu Yêu cầu bài toán là khi người dùng kéo thả ảnh từ máy tính vào vùng chỉ định thì chúng ta sẽ hiển thị hình ảnh preview để xem trước mà không cần phải upload lên server. Đây là một trong những bài tập vanilla Javascript ở mức cơ bản giúp các bạn làm quen, chủ yếu giải thích về Javascript nên phần giao diện sẽ không phân tích nhiều. Hi vọng với bài tập này các bạn sẽ thấy...
HTML javascipt CSS vanilla js May Fest
Tôi nói trước là nó dài loằng ngoằng, với chuối lắm nhá =)) Cái này để bày trò thể hiện đẳng cấp thôi, chứ cái này mà dùng js thì phút mốt là xong Nhưng để lấy tinh thần thì tôi cũng show hàng chút cho mn có tinh thần Để tiết kiệm thêm chút thời gian ae ngồi đọc thì ta sẽ bắt đầu luôn HTML Đầu tiên là code HTML, sau cái này thì tôi đoán là 1/2 ae bỏ đi tìm cái khác để đọc <div...
HTML CSS May Fest Game
Ai thì không biết nhưng với mình bộ môn Reponsive website nó luôn là một cái gì đó rất ám ảnh, là một web dev nhưng thú thật mình không hào hứng với việc Reponsive website chút nào, cho dù đây là yêu cầu cơ bản của bất cứ website thế kỷ 21 nào =)) Câu chuyện không phải vì kỹ thuật của nó quá khó mà do mình gặp vấn đề trong việc căn chỉnh @media của các dạng màn hình, được màn này thì màn...
CSS May Fest reponsive
1. Yêu cầu Yêu cầu bài toán là khi người dùng nhập text vào ô input thì kiểm tra xem Caps Lock có bật hay không. Đây là một trong những bài tập vanilla Javascript ở mức cơ bản giúp các bạn làm quen, chủ yếu giải thích về Javascript thuần không framework nên phần giao diện sẽ không phân tích nhiều. Hi vọng với bài tập này các bạn sẽ thấy thích thú khi học Javascript. 2. Giao diện HTML - CSS <!DOCTYPE...
HTML javascipt CSS vanilla js
Khi đã bén duyên với lập trình và có nguyện vọng trở thành nhà phát triển web, bạn phân vân không biết ngôn ngữ lập trình nào phù hợp với xu hướng công nghệ hiện tại và tương lai, hoặc việc nên học ngôn ngữ nào trước sẽ tốt hơn. Bài viết sau đây chúng tôi sẽ cung cấp những kiến thức cơ bản về ngôn ngữ Javascript là gì, cách hoạt động của ngôn ngữ lập trình Javascript cũng như so...
HTML JavaScript CSS Developer app developers
Tailwind là một utility-first CSS framework. Khác so với các framework CSS khác như Bootstrap nó không đi kèm với các thành phần được xác định trước. Thay vào đó, Tailwind CSS hoạt động ở cấp độ thấp hơn và cung cấp cho bạn một tập hợp các class hổ trợ CSS. Bằng cách sử dụng class này bạn có thể nhanh chóng tạo thiết kế tùy chỉnh một cách dễ dàng. Tailwind CSS không những tạo ra các class có...
CSS React tailwind
1. Introduction Width: Auto width mặc định của các block-element như <div> hoặc <p> đều là auto, điều này làm cho chúng chiếm toàn bộ chiều rộng của block chứa chúng. Theo thông số CSS: ‘margin-left’ + ‘border-left-width’ + ‘padding-left’ + ‘width’ + ‘padding-right’ + ‘border-right-width’ + ‘margin-right’ = width of containing block Khi một element có width là auto, nó có thể có margin, padding và...
flexbox CSS grid markup Auto
Khi thiết kế và phát triển web, đôi lúc chúng ta gặp khó khăn trong việc tổ chức và quản lý code CSS. Nhiều nhà thiết kế website nghĩ rằng việc tổ chức và quản lý code thật là rắc rối, tuy nhiên nếu bạn đưa chúng vào một tiêu chuẩn cụ thể, thì sẽ giúp cho công việc của bạn tốt hơn, cũng như website của bạn sẽ hoạt động và có khả năng cải tiến tốt hơn trong tương lai. Cú pháp Sử...
CSS Clean Code clean code css thaycacac hoapn
Trong HTML, một vài loại phần tử có khả năng giữ tỉ lệ kích thước không đổi, ví dụ với <img> hay <canvas>. Khi những phần tử này bị thay đổi chiều rộng (width) chẳng hạn, thì chiều cao (height) của chúng cũng tự giác thay đổi theo tương ứng, giúp bảo toàn tỉ lệ kích thước như ban đầu! Tuy nhiên, có một vài trường hợp mà bạn cần tạo một phần tử DIV có khả năng giữ...
CSS May Fest
Xin chào các bạn, việc ngày càng có nhiều web thiết kế UI sử dụng các thư viện, framework hỗ trợ việc tạo component thì cũng sẽ có rất nhiều cách để phân chia, thiết kế component khác nhau. Qua các dự án thực tế mình xin giới thiệu đến các bạn về một cách thiết kế component mà mình đã được làm việc qua là Atomic Design Như tiêu đề của bài viết, chúng ta sẽ kết hợp Atomic design và BEM...
CSS VueJS May Fest
CSS Box-sizing Xin chào các bạn, hôm nay mình sẽ tìm hiểu về thuộc tính Box-sizing của css. Để hiểu rõ tính ứng dụng, cũng như tác dụng của nó khi thêm vào thì mình xin đưa ra một ví dụ như sau: Mình sẽ tạo 1 thẻ <div class="box">Đây là nội dung bài viết</div> Thêm luôn cho nó css: .box{ width: 100px; height: 100px; color: white; background-color: darkorchid; } Bây giờ mình muốn thêm...
Front-end CSS ReactJS SCSS Box-sizing
Object-fit Thuộc tính CSS object-fit được sử dụng để chỉ định cách thay đổi kích thước của <img> hoặc <video> để phù hợp với vùng chứa của nó. Thuộc tính này cho biết nội dung cần lấp đầy vùng chứa theo nhiều cách khác nhau; chẳng hạn như "giữ nguyên tỷ lệ khung hình đó" hoặc "mở rộng và chiếm nhiều dung lượng nhất có thể". Nhìn vào hình ảnh sau gốc sau...
CSS
Đầu tiên tôi biết các bạn đọc bài viết này đã code CSS rất nhiều, kiểu nhiều vãi ấy và chắc chắn 100% rằng các bạn đã từng sử dụng ít nhất một trong số các đại lượng của CSS để căn chỉnh các số đo liên quan đến Margin, Padding, Width, Height,... Một trong số tức là kiểu có nhiều ấy: px, rem, em,pt, vh, wh,... Có thể có nhiều bạn sẽ thấy không quen với việc sử dụng rem hay em mà...
CSS
Giới thiệu Đợt này có tìm hiểu mình thấy 1 số thư viện HTML, CSS, Javascipt hay nên hôm nay chia sẻ tới Anh Chị Em trong cộng đồng để tham khảo nhé. Những thư viện này củng cố kiến thức và thuận tiện khi chúng ta làm dự án. Libary - Resource 1.Docz | Git Docz là 1 thư viện giúp chúng ta dễ dàng viết và public document cho code. Nó sẽ tạo ra MDX file để hiển thị code của bạn 1cách trực quan và còn...
HTML JavaScript CSS
1. Sticky element Bạn có thể đã sử dụng thuộc tính CSS position với các giá relative và absolute trong quá khứ. Các trình duyệt web hiện đại hiện hỗ trợ giá trị "sticky". Nó cho phép bạn làm cho các phần tử dính lại khi cuộn đến một điểm nhất định. Một phần tử có vị trí: sticky sẽ hoạt động giống như một phần tử được định vị tương đối cho đến khi nó đạt đến một...
CSS
Introduction: What Is Aspect Ratio? Trong thiết kế web, khái niệm tỷ lệ khung hình (aspect ratio) được sử dụng để mô tả tỉ lệ giữa chiều rộng (width) và chiều cao (height) của hình ảnh, có mối quan hệ về kích thước tương ứng với nhau. Hãy xem xét hình sau. Chúng ta có tỷ lệ 4 : 3. Điều đó cho thấy tỉ lệ giữa táo và nho là 4 : 3. Nói cách khác, khối nhỏ nhất mà chúng ta có thể tạo với...
CSS SCSS Aspect ratio
Giới thiệu Các lỗi thường gặp và cách khắc phục Kết luận 1. Giới thiệu Ngày nay CSS được coi là một trong những cách dễ dàng và dễ tiếp cận nhất để tạo các trang web hiện đại, dụa trên các tiêu chuẩn, quá trình viết mã CSS đôi khi chúng ta vẫn còn mắc phải một số lỗi phổ biến. Vì vậy, chúng ta cần sửa những lỗi này để mang lại sự nhất quán hơn trong thiết kế web, cải...
HTML CSS SCSS
Đầu tiên, mình sẽ tạo một khung bao bằng svg như sau: <svg width='300' height='200' style='background: cyan'></svg> Tiếp theo, mình sẽ tạo hình chữ nhật bằng rect, với chiều rộng 200px, chiều cao 100px: <svg width='300' height='200' style='background: cyan'> <rect width='200' height='100' /> </svg> Hình chữ nhật có mặc định màu đen ở góc trên bên trái, bắt đầu tại điểm tọa độ x = 0, y = 0. Mình sẽ...
HTML CSS frontend rectangle svg
Trọng tâm của hướng dẫn này, mình sẽ đưa bạn để cách làm dễ nhất và có thể bắt tay vào làm ngay. Do đó, mình không cố để viết một bài chi tiết hay nặng về lý thuyết. Bạn có thể tìm hiểu sâu thêm từ internet. Trước khi đi vào bài viết, mình có để lại link bài viết về cách tạo SVG được sử dụng trong bài viết này. https://naututs.com/svg-ellipse/ Mình sử dụng Codepen để demo các...
HTML JavaScript CSS svg GSAP
Trọng tâm của hướng dẫn này, mình sẽ đưa bạn để cách làm dễ nhất và có thể bắt tay vào làm ngay. Do đó, mình không cố để viết một bài chi tiết hay nặng về lý thuyết. Bạn có thể tìm hiểu sâu thêm từ internet. Trước khi đi vào bài viết, mình có để lại link bài viết về cách tạo SVG được sử dụng trong bài viết này. https://naututs.com/svg-line/ Mình sử dụng Codepen để demo các...
HTML JavaScript CSS svg GSAP