HTML & CSS - Freetuts

HTML & CSS

Danh sách các bài viết trong chuyên mục HTML & CSS, đây là những bài viết mới nhất được cập nhật trong mục HTML & CSS.

HTML đóng vai trò là vật liệu để xây dựng giao diện của website, nhiệm vụ của nó là hiển thị văn bản, hình ảnh, video, và nói chung là hiển thị dữ liệu lên trình duyệt. Nếu bạn xây một ngôi nhà thì bạn sẽ cần gạch, đá, xi măng và các vật liệu phụ khác, vậy thì HTML nó giống như những vật liệu mà bạn cần để xây nhà đó.

HTML rất đơn giản, nó có một số lượng thẻ cũng tương đối ít và rất dễ nhớ nên học nó không có gì khó, cái khó là làm thể nào kết hợp với CSS và jQuery để trình bày một cách thẩm mỹ.

Hiện nay version mới nhất là HTML5, đây là version có mối liên hệ chặt chẽ với Javascript và CSS3 nên sẽ có độ phức tạo cao hơn, và đương nhiên càng phức tạp thì giao diện càng sinh động.

Trong chuyên mục này mình sẽ tổng hợp tất cả các tài liệu học HTML từ căn bản đến nâng cao, nó sẽ rất hữu ích cho các bạn đấy.

1HỌC HTML
HTML
1	Tạo Trang web E-commerce từ HTML & CSS
2	HTML là gì? Bổ cục HTML của một trang web là gì?
3	Phân biệt HTML Elements và HTML Attributes
4	Định dạng văn bản bằng HTML
5	Heading và List trong HTML
6	Thẻ Table trong HTML (colspan, rowspan, cellpadding và cellspacing)
7	Thẻ a trong HTML và các thuộc tính của thẻ a thường dùng
8	Cách dùng thẻ img trong HTML và các thuộc tính của img
9	Thuộc tính style trong HTML
10	Thẻ style trong HTML
11	Phân biệt thẻ HTML Block và Inline
12	Cách dùng thẻ div trong HTML để tạo các khối giao diện
13	Phân biệt ID và Class trong HTML
14	Tạo bổ cục layout HTML đơn giản
15	Tạo HTML danh sách bài viết đơn giản
16	Tạo menu một cấp bằng HTML đơn giản
17	Tạo background và đường viền cho thẻ HTML
18	Các thẻ HTML tạo form thu thập dữ liệu
HTML5
19	Cấu trúc HTML5: Cách tạo template HTML5 đầu tiên
20	Thẻ article trong HTML5
21	Thẻ header trong HTML5
22	Thẻ hgroup trong HTML5
23	Thẻ nav trong HTML5
24	Thẻ section trong HTML
25	Thẻ aside trong HTML5
26	Validate form bằng HTML5
Canvas
27	HTML5 Canvas là gì?
28	HTML5 Canvas - Vẽ đường thẳng
29	HTML5 Canvas - Vẽ đường cong
30	HTML5 Canvas - Nối nhiều đường
Heading tags
31	Thẻ title trong HTML
32	Thẻ base trong HTML
33	Thẻ link trong HTML
34	Thẻ meta trong HTML
35	Thẻ script trong HTML
36	Thẻ noscript trong HTML
Form tags
37	Thẻ select trong HTML
38	Thẻ input trong HTML
39	Thẻ textarea trong HTML
40	Thẻ button trong HTML
41	Thẻ option trong HTML
42	Thẻ optgroup trong HTML
43	Thẻ fieldset trong HTML
44	Thẻ label trong HTML
45	Thẻ form trong HTML
List tags
46	Thẻ ul trong HTML
47	Thẻ ol trong HTML
48	Thẻ li trong HTML
49	Thẻ dl trong HTML
50	Thẻ dt trong HTML
51	Thẻ dd trong HTML
Paragraph tags
52	Thẻ p trong HTML
53	Thẻ br trong HTML
54	Thẻ pre trong HTML
Common tags
55	Thẻ comment in html trong HTML
56	Thẻ DOCTYPE trong HTML
57	Thẻ abbr trong HTML
58	Thẻ address trong HTML
59	Thẻ audio trong HTML
60	Thẻ b trong HTML
61	Thẻ blockquote trong HTML
62	Thẻ body trong HTML
63	Thẻ canvas trong HTML
64	Thẻ caption trong HTML
65	Thẻ col trong HTML
66	Thẻ colgroup trong HTML
67	Thẻ datalist trong HTML
68	Thẻ del trong HTML
69	Thẻ details trong HTML
70	Thẻ dialog trong HTML
71	Thẻ div trong HTML
72	Thẻ embed trong HTML
73	Thẻ figcaption trong HTML
74	Thẻ figure trong HTML
75	Thẻ footer trong HTML
76	Thẻ hr trong HTML
77	Thẻ html trong HTML
78	Thẻ i trong HTML
79	Thẻ iframe trong HTML
80	Thẻ ins trong HTML
81	Thẻ legend trong HTML
82	Thẻ main trong HTML
83	Thẻ mark trong HTML
84	Thẻ meter trong HTML
85	Thẻ noscript trong HTML
86	Thẻ object trong HTML
87	Thẻ output trong HTML
88	Thẻ param trong HTML
89	Thẻ picture trong HTML
90	Thẻ progress trong HTML
91	Thẻ q trong HTML
92	Thẻ rp trong HTML
93	Thẻ rt trong HTML
94	Thẻ ruby trong HTML
95	Thẻ s trong HTML
96	Thẻ small trong HTML
97	Thẻ source trong HTML
98	Thẻ span trong HTML
99	Thẻ strong trong HTML
100	Thẻ sub trong HTML
101	Thẻ summary trong HTML
102	Thẻ sup trong HTML
103	Thẻ table trong HTML
104	Thẻ tbody trong HTML
105	Thẻ td trong HTML
106	Thẻ tfoot trong HTML
107	Thẻ th trong HTML
108	Thẻ thead trong HTML
109	Thẻ time trong HTML
110	Thẻ tr trong HTML
111	Thẻ u trong HTML
112	Thẻ var trong HTML
113	Thẻ video trong HTML
114	Thẻ wbr trong HTML

2HỌC CSS
Căn bản
1	CSS là gì? Học CSS như thế nào?
2	Cú pháp CSS - các cách viết CSS
3	Selector là gì? Tìm hiểu CSS Selector căn bản
4	Thiết lập màu nền với CSS background
5	Tìm hiểu về color trong CSS
6	Tìm hiểu về font trong CSS
7	Các thuộc tính CSS định dạng text
8	Các thuộc tính CSS định dạng thẻ a (links)
9	Tìm hiểu về border trong CSS
10	Thuộc tính float ( left - right - none) trong CSS
11	Thuộc tính display trong CSS (inline - block -none)
12	Thuộc tính margin - padding và Box Model trong CSS
13	Position relative - absolute trong CSS
14	Xây dựng menu dọc hai cấp đơn giản bằng CSS
15	Position Fixed trong CSS
16	Thuộc tính z-index trong CSS
17	Kỹ thuật ClearFix trong CSS
18	After và Before trong CSS
19	Vùng chọn trong CSS (CSS Combinators)
20	Tìm hiểu về list trong CSS
21	Tìm hiểu về overflow trong CSS
22	Tìm hiểu về pseudo-class trong CSS
23	Tìm hiểu về Pseudo-Elements trong CSS
24	Tìm hiểu về unit trong CSS
25	Tìm hiểu về navigation trong CSS
26	Tìm hiểu về Specificity trong CSS
27	Tìm hiểu về table trong CSS
28	Tìm hiểu về Align trong CSS
CSS3
29	Tìm hiểu về border-radius, border-image trong CSS
30	Margin collapsing trong CSS
31	CSS3 - Hiệu ứng Animation
32	Tìm hiểu object-fit trong CSS3
33	CSS3 Emphasis Marks
34	CSS3 là gì? Các module trong CSS3
35	Học CSS3 - Border Radius - Bo góc
36	Học CSS3 - Border Image - Tạo đường viền bằng hình
37	Học CSS3 - Các thuộc tính Backgrounds
38	Học CSS3 - Định dạng màu sắc
39	Học CSS3 - Gradient Background
40	Học CSS3 - Text Shadow - Box Shadow
41	Học CSS3 - Xử lý Text
42	Học CSS3 - Sử dụng @fonf-face
43	Học CSS3 - 2D Transforms
44	Tạo thanh loading ngang với HTML và CSS
45	Tạo thanh Loading xoay với HTML và CSS
46	Tạo menu mờ với HTML và CSS
47	Tạo hiệu ứng khói với HTML và CSS
48	Tạo thanh tìm kiếm co dãn với HTML và CSS
49	Tạo hiệu ứng trò chơi pacman với HTML và CSS
50	Tạo đồng hồ treo tường với HTML và CSS
51	Tạo hiệu ứng mưa với HTML và CSS
52	Hiệu ứng bóng đổ với thuộc tính box-shadow của CSS3
53	Tạo hiệu ứng mặt trời mọc với HTML và CSS
CSS Responsive
54	Bài 01: CSS Responsive Web Design là gì?
55	Bài 02: Sử dụng @Media CSS tạo Responsive cho Website
56	Bài 03: Sử dụng Javascript tạo Responsive cho Website
57	Bài 04: Video học làm Responsive CSS căn bản
58	Bài 05: Cách viết Responsive với SASS CSS
CSS Parallax
59	Parallax - Hiệu ứng Parallax là gì?
60	Parallax - Tạo chuỗi ảnh nền
61	Parallax - Tạo thanh menu dọc
62	Parallax - Tạo hiệu ứng cuộn với thanh menu dọc
63	Parallax - Tạo hiệu ứng Parallax scrolling
64	Parallax - Tạo hiệu ứng cho văn bản
65	Parallax - Chèn nhạc nền theo chuyển động cuộn
66	Parallax - Tạo trang đầu và cuối
67	Parallax - Hoàn thiện bố cục, hiệu ứng và mở rộng

3HOW TO
Menus
1	Hướng dẫn tạo Menu Icon với HTML và CSS
2	Hướng dẫn tạo Tab Header bằng CSS và Javascript
3	Hướng dẫn tạo thanh top navigation bằng HTML và CSS
4	Hướng tạo thanh search bar bằng CSS
5	Hướng dẫn tạo right aligned menu và centered menu bằng CSS
6	Hướng dẫn tạo Thumbnail Image
7	Hướng dẫn tạo Pagination với CSS
8	Hướng dẫn tạo Hoverable Sidenav
9	Hướng dẫn tạo Animated Side Navigation
10	Hướng dẫn tạo Responsive navbar
11	Hướng dẫn tạo Icon Bar với HTML, CSS và Javascript
12	Hướng dẫn tạo Click Dropdown với HTML, CSS và JAVASCRIPT
13	Hướng dẫn tạo accordion với HTML, CSS và Javascript
14	Hướng dẫn tạo Modal Box với HTML, CSS và Javascript
15	Hướng dẫn tạo tabs bằng HTML, CSS và Javascript
16	Hướng dẫn tạo Fixed Menu
17	Hướng dẫn tạo Vertical Tabs với HTML, CSS và Javascript
Images
18	Hướng dẫn tạo Hero Image với CSS
19	Hướng dẫn thêm Image Effects với CSS
20	Hướng dẫn tạo Image Hover Overlay Slide với CSS
21	Hướng dẫn tạo Slideshow với HTML, CSS và Javascript
Buttons
22	Hướng dẫn tạo hiệu ứng cho Animate Buttons
23	Hướng dẫn tạo các nút liên kết mạng xã hội bằng HTML và CSS
24	Hướng dẫn tạo loading buttons với CSS
25	Hướng dẫn tạo Scroll To Top Button
Forms
26	Hướng dẫn tạo Toggle ẩn/hiện một phần tử
27	Hướng dẫn tạo contact form đơn giản với CSS
Filters
28	Hướng dẫn xây dựng chức năng sắp xếp dữ liệu
29	Hướng dẫn tạo filter list với Javascript
Tables
30	Hướng dẫn tạo Filter table với Javascript
31	Hướng dẫn tạo Responsive Tables đơn giản với CSS
More
32	Hướng dẫn tạo hiệu ứng animations với javascript
33	Hướng dẫn tạo một To Do List với CSS và Javascript
34	Hướng dẫn xây dựng đồng hồ đếm ngược với Javascript
35	Hướng dẫn tạo Animate Icon với CSS và Javascript
36	Hướng dẫn tạo Testimonials với CSS
37	Tìm hiểu về Aspect Ratio với CSS
38	Hướng dẫn tạo hiệu ứng Parallax Scrolling Effect với CSS
39	Hướng dẫn tạo các dấu mũi tên với CSS
40	Hướng dẫn tạo Profile Card với CSS
41	Hướng dẫn tạo Coming Soon Page
42	Hướng dẫn tạo Responsive Pricing Table bằng CSS
43	Hướng dẫn tạo Progress Bar với Javascript
44	Hướng dẫn tạo thanh Skill Bar với HTML và CSS
45	Hướng dẫn tạo Tooltip với CSS
46	Hướng dẫn tạo Toggle Like and Dislike
47	Hướng dẫn tạo Calendar Layout với HTML và CSS
48	Hướng dẫn tạo equal height columns với HTML và CSS
Website
Grid
Google Map
49	Hướng dẫn tích hợp google map vào website
50	Hướng dẫn tích hợp Google Translate button
Converters
51	Viết chức năng phóng to thumbnail khi hover với CSS3
52	Hướng dẫn tạo Toggle Switch với CSS
53	Hướng dẫn tạo Modal Images
54	Hướng dẫn tạo Alert Buttons với HTML và CSS

Bài xem nhiều

Các hàm xử lý chuỗi trong Javascript (cắt / tách / nối chuỗi ..)

Chia lấy phần dư / chia lấy phần nguyên trong javascript

Các cách khai báo biến trong Javascript

Các sự kiện (Event) trong Javascript

Hướng tạo thanh search bar bằng CSS

Cách kiểm tra số nguyên dương trong javascript

Hàm array.slice() trong Javascript

Tính tổng hai số bằng Javascript (cộng hai số)

Tính tổng các phần tử trong mảng javascript

Javascript là gì? Tìm hiểu ngôn ngữ lập trình javascript

Bắt sự kiện click trong Javascript

Hàm Array splice() trong Javascript

Kiểm tra số nguyên tố bằng Javascript

Function trong Javascript - cách tạo hàm và gọi hàm trong JS

Thẻ Table trong HTML (colspan, rowspan, cellpadding và cellspacing)

Hàm alert() - confirm() - prompt() trong javascript

Các thuộc tính CSS định dạng thẻ a (links)

Hàm addEventListener() trong Javascript

Thẻ a trong HTML và các thuộc tính của thẻ a thường dùng

Hướng dẫn tạo Slideshow với HTML, CSS và Javascript