Rất chào các bạn, Như các bạn đã biết, trong kỉ nguyên công nghệ, song song với sự sinh ra dày đặc của các trang web mới cũng là sự biến mất của những trang web "lạc hậu" hay hoạt động kém hiệu quả. Một trang web hấp dẫn người dùng luôn có cách cung cấp nội dung hiệu quả, sáng tạo, dễ dàng nắm bắt; và các bức ảnh chất lượng, thú vị là cách tốt nhất để thực hiện điều...
Happy New Year HTML javascipt best tips Front-end
1. Articles and standards HTML 5.3 - Current HTML5 spec Progressive enhancement The extensible web manifesto Differences between HTML5 and HTML4 from W3C 2. Multimedia capabilities 2.1. Audio Getting started with the Web Audio API Web Audio API at MDN Making a Guitar Tuner with HTML5 Audio visualisation with the Web Audio API and React 2.2. Media Capture Capturing Audio & Video in HTML5 Using the media capture API 2.3. Picture in Picture Chrome's new Picture in Picture API 2.4....
HTML Web Web Design HTML Design
Chào các bạn, Có lẽ trong hành trình code của các bạn thì không ít lần gặp vấn đề méo ảnh do fix cứng cả width, height của ảnh nhỉ? Hoặc kể cả khi bạn set value cho 1 thuộc tính weigth hoặc height còn thuộc tính còn lại để auto thì nhiều lúc ảnh cũng không được hiển thị toàn vẹn cho lắm. Từ đó sẽ dẫn tới việc không đúng ý của người upload image. Chính vì vậy, ở bài viết này mình...
HTML frontend CSS3
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
Sau một thời gian, mình đã vô tình tìm hiểu được vài tag HTML thú vị nên muốn chia sẻ với mọi người, nếu bạn biết rồi thì cho qua nhé! 22. <dfn> Đầu tiên sẽ là tag <dfn>, tag này dùng để định nghĩa một thuật ngữ (xuất hiện lần đầu trong tài liệu) trong HTML. Cách sử dụng của nót tương tự như các từ in nghiêng ở giữa đoạn văn bản. Tag cha gần nhất của tag <dfn> phải...
HTML HTML5
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
Có rất nhiều cách để chúng ta có thể học, tiếp thu kiến thức trong ngành IT này. Ví dụ đọc sách, xem video tutorial, đọc blog ...v.v. và học từ những câu hỏi phỏng vấn cũng là cách để chúng ta có thể kiểm tra được kiến thức hiện tại của mình, cũng như mở rộng kiến thức ở những phần mình chưa biết, chưa nắm chắc. Thỉnh thoảng mình cũng lên mạng để hóng mấy câu hỏi phỏng vấn...
HTML Interview Questions for HTML
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
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
Bài viết này chúng ta sẽ cùng nhau tìm hiểu về những điều nhỏ nhặt trong HTML nhưng lại có tác dụng không hề nhỏ khi biết được công dụng của nó nhé! Bắt đầu thôi nào! 1. Thuộc tính alt trong tag image <img src="user.png" alt="User Profile Image" /> alt được sử dụng như một văn bản thay thế khi image không thể hiển thị. Hay cụ thể hơn là dùng để mô tả về ảnh, dành cho các công cụ tìm...
HTML alt Input Autofocus Auto Complete
Thẻ HTML là một công cụ cần thiết để thiết kế nên các website tĩnh. Việc áp dụng HTML giúp trang web có cấu trúc tốt và chạy ổn định trên hầu hết các trình duyệt khác nhau. Dưới đây là những thông tin cơ bản về loại ngôn ngữ này mà bạn cần biết trước khi bắt tay vào xây dựng web. Thế nào là HTML? HTML – HyperText Markup Language (Ngôn ngữ đánh dấu siêu văn bản) là một ngôn ngữ đánh...
HTML
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
GET và POST là hai kỹ thuật phổ biến để gửi dữ liệu đến server và browser cần chúng để giao tiếp với server. Hai phương thức này khác biệt ở chỗ phương thức GET thêm dữ liệu được mã hóa vào URI trong khi trong với phương thức POST, dữ liệu được nối vào phần body chứ không phải URI. Ngoài ra, phương thức GET được sử dụng để lấy dữ liệu. Ngược lại, phương thức POST được sử...
HTML HTTP
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
Đối với ứng dụng web và di động thì việc tải lại một file là rất quan trọng như với nhiều nhu cầu khác nhau từ người sử dụng: đăng hình sản phầm, logo, tập tin thống kê... Và nhờ một chút sự trợ giúp từ Javascript thì nhà HTML cũng cung cấp cách tải 1 tệp lên trang web của bạn. Cùng nhau tìm hiểu ở bài viết này nhé! 1. Tải 1 file Chúng ta có thể dùng tag <input> và chọn định dạng...
HTML file upload
Đầ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
Đầ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 tròn bằng circle, với bán kính là 40px: <svg width='300' height='200' style='background: cyan'> <circle r='40' /> </svg> Hình tròn có mặc định màu đen ở góc trên bên trái và tâm đường tròn nằm tại điểm tọa độ x = 0, y = 0. Mình sẽ di chuyển hình vào vị trí...
HTML Web frontend svg circle
Đầ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 ellipse với bán kính trục tung là 40px và bán kính trục hoành là 80px: <svg width='300' height='200' style='background: cyan'> <ellipse rx='80' ry='40' /> </svg> Hình ellipse có mặc định màu đen ở góc trên bên trái và tâm đường ellipse nằm tại điểm tọa độ x = 0,...
HTML Web frontend svg ellipse
Đầu tiên, mình sẽ tạo một khung bao bằng thẻ svg như sau: <svg width='200' height='200' style='background: cyan'></svg> Tiếp theo, mình sẽ tạo hình đa giác bằng thẻ polygon, với điểm bắt đầu tại điểm x = 65, y = 50 và đi đến các điểm còn lại: <svg width='200' height='200' style='background: cyan'> <polygon points='65,50 135,70 150,150 50,150'/> </svg> Cuối cùng, mình sẽ thêm một số thuộc tính màu...
HTML Web Polygon frontend svg
Khác SVG Polygon sẽ nối tất cả các điểm thành một vòng khép kín. SVG Polyline sẽ không nối điểm đầu và điểm cuối. Đầu tiên, mình sẽ tạo một khung bao bằng thẻ svg như sau: <svg width='200' height='200' style='background: #B71C1C'></svg> Sau đó, mình sẽ vẽ các đoạn thẳng bằng thẻ polyline, với tọa độ bắt đầu là x=20, y=20, bằng cách tạo ra các điểm khác nhau trên hành trình. Lưu ý rằng x...
HTML Animation Web polyline svg
Đầu tiên, mình sẽ tạo một khung bao bằng thẻ svg như sau: <svg width='300' height='200' style='background: #B71C1C'></svg> Tiếp theo, mình sẽ tạo hình ngôi sao bằng thẻ polygon, tại điểm bắt đầu là x = 150, y = 30: <svg width='300' height='200' style='background: #B71C1C'> <polygon points='150,30 105,165' stroke='#FFD600'/> </svg> <svg width='300' height='200' style='background: #B71C1C'> <polygon points='150,30 105,165...
HTML Web frontend svg star
Đầu tiên, mình sẽ tạo một khung bao bằng thẻ svg như sau: <svg width='200' height='200' style='background: #B71C1C'></svg> Sau đó, mình sẽ gõ nội dung hiện thị bên trong thẻ text, với tọa độ x = 50, y = 24 và kích cỡ chữ 24pt như bên dưới: <svg width='200' height='200' style='background: #B71C1C'> <text x='50' y='24' font-size='24pt'>I LOVE SVG</text> </svg> Mình sẽ xoay dòng chữ ở góc 45 độ và tùy chỉnh...
HTML Animation Web svg text
Đầu tiên, mình sẽ tạo một khung bao bằng thẻ svg như sau: <svg width="200" height="200" style="background: #B71C1C"></svg> Sau đó, mình sẽ tạo các đường kẻ bằng thẻ path, lưu ý là M xuất hiện ở tọa độ điểm đầu tiên: <svg width="200" height="200" style="background: #B71C1C"> <path stroke='white' d='M20,20 180,20'/> <path stroke='white' stroke-width='2' d='M20,40 180,40'/> <path stroke='white' stroke-width='3'...
HTML Web frontend svg stroke
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