F8 - Khóa học HTML-CSS từ đầu

Thiết kế Web HTML CSS

F8 Fullstack - Khóa học HTML-CSS từ đầu, học HTML, Học CSS ở đâu, Website học HTML CSS từ Zero đến Hero cùng F8

Bạn sẽ học được gì sau khóa học HTML, CSS từ Zero đến Hero của F8 Full-stack

Biết cách xây dựng giao diện web với HTML, CSS
Biết cách phân tích giao diện website
Biết cách đặt tên class CSS theo chuẩn BEM
Biết cách làm giao diện web responsive

HTML là gì

HTML viết tắt của Hypertext Markup Language (tiếng việt là hay là "Ngôn ngữ Đánh dấu Siêu văn bản") là ngôn ngữ để xây dựng và cấu trúc lại các thành phần có trong website

CSS là gì

CSS là chữ viết tắt của Cascading Style Sheets, nó là một ngôn ngữ được sử dụng để tìm và định dạng lại các phần tử HTML có trong webiste

Sử dụng CSS giúp trang web trở nên đẹp hơn và sống động hơn với nhiều phong cách và format khác nhau.

Tại sao lại cần học HTML và CSS

Nếu bạn học lập trình Web tất nhiên bạn phải học HTML và CSS rồi, bởi ví đó là hai thứ tạo ra phần giao diện và nội dung của một trang web.

Học HTML và CSS có khó không?

Bạn có thể học từ đầu mà không cần có kiến thức trước đó.

Chỉ cần bạn chịu khó học tìm hiểu và thực hành nhiều ví dụ là có thể làm được

Mình nghĩ HTML và CSS là dễ học vì nó khá trực quan

Bạn cần chuẩn bị những gì khi học HTML và CSS

Bạn cần có máy tính kết nối internet để xem các video bài giảng này

Một máy tính có cài một trình duyệt web

Một phần mêm soạn thảo cơ bản như Notepad, Visual Studio Code, Nodepad ++, Sublime Text...

Vậy chúng ta hãy cùng tham gia khóa học F8 HTML CSS từ đầu dành cho tất cả các bạn nhé

Video:

Đang xem:

1. HTML, CSS từ Zero tới Hero, Nhận được gì sau khóa học? 3 phút 14 giây

Nhận được gì sau khóa học? | Học lập trình web cơ bản | Tự học lập trình online

2. 14. Row - columns layout 15 phút 25 giây

Thực hành 14. Row - columns layout

3. HTML, CSS là gì? 2 phút 28 giây

Cùng tìm hiểu HTML, CSS là gì?, HTML có gì hay ho

4. Làm quen với Dev tools 3 phút 54 giây

Khi lập trình web các lập trình viên thường hay phải sử dụng các công cụ phát triển Dev Tool sẽ giúp bạn tiết kiệm thời gian và nâng cao hiệu suất làm việc.

5. Cài đặt môi trường viết HTML CSS 2 phút 56 giây

Cài đặt môi trường viết HTML CSS như thế nào, Tool để viết HTML CSS

6. Cấu trúc file HTML 6 phút 20 giây

Tìm hiểu Cấu trúc file HTML, file HTML gồm những gì nào?

7. Comments trong HTML 2 phút 12 giây

Cách ghi chú trong HTML, hướng dẫn Comments trong HTML

8. Thẻ HTML thông dụng 11 phút 8 giây

Giới thiệu các Thẻ HTML thông dụng, một số thẻ HTML hay dùng

9. Attribute trong HTML (Thuộc tính của thẻ) 1 phút 54 giây

Giới thiệu Attribute trong HTML, các thuộc tính của thẻ HTML

10. Sử dụng CSS trong HTML 7 phút 13 giây

Cách Sử dụng CSS trong HTML, làm thế nào để viết CSS trong HTML

11. ID và Class trong HTML 4 phút 18 giây

ID và Class trong HTML là gì, cùng tìm hiểu ID và Class trong HTML

12. Độ ưu tiên trong CSS 10 phút 31 giây

Cách tính Độ ưu tiên trong CSS , độ ưu tiên của HTML là gì

13. Đặt biến trong CSS 3 phút 48 giây

Cách đặt biến trong CSS, làm thế nào đặt biển ở CSS

14. Đơn vị trong CSS 10 phút 56 giây

Các đơn vị trong CSS dùng như thế nào, đơn vị style css html

15. CSS Padding 6 phút 20 giây

CSS Padding là gì, giới thiệu về Padding trong css

16. CSS Border 6 phút 6 giây

CSS Border là gì, hiểu về CSS Border

17. CSS Margin 5 phút 31 giây

Hướng dẫn CSS Margin, hiểu về CSS Margin như thế nào cho đúng

18. CSS Box-sizing 5 phút 12 giây

CSS Box-sizing là gì, hướng dẫn về Box-sizing trong CSS

19. CSS Background-clip 4 phút 14 giây

CSS Background-clip là gì, cách đặt Background-clip trong CSS

20. CSS Background-image 12 phút 47 giây

CSS Background-image là gì, Đặt ảnh nền trong css, sét ảnh nền trong thẻ HTML

21. CSS Background-size keywords 3 phút 17 giây

CSS Background-size keywords là gì, hiểu về Background-size trong CSS

22. CSS Background-origin 2 phút 58 giây

CSS Background-origin là gì

23. CSS Background-position 4 phút 15 giây

CSS Background-position, cách sét position của background trong CSS

24. CSS Background shorthand 2 phút 30 giây

CSS Background tổng hợp thực hành về Background trong CSS

25. CSS Functions 6 phút 14 giây

CSS Functions là gì

26. Pseudo classes 3 phút 43 giây

Pseudo classes là gì, kỹ năng viết Pseudo classes trong CSS

27. Pseudo elements 6 phút 15 giây

Pseudo elements là gì, Pseudo elements trong HTML

28. CSS Position: Relative 3 phút 4 giây

CSS Position: Relative là gì, Relative trong CSS như thế nào

29. CSS Position: Absolute 7 phút 58 giây

CSS Position: Absolute là gì, thuộc tính Absolute trong CSS như thế nào

30. CSS Position: Fixed 3 phút 29 giây

CSS Position: Fixed là gì, thuộc tính Fixed trong CSS Position

31. CSS Position: Sticky 3 phút 18 giây

CSS Position: Sticky là gì, thuộc tính Sticky trong CSS Position

32. Giới thiệu Flexbox 5 phút 57 giây

Giới thiệu Flexbox trong CSS, Flexbox CSS là gì

33. Thuộc tính CSS trong Flexbox 6 phút 26 giây

Flexbox CSS là gì, các Thuộc tính CSS trong Flexbox

34. Học Flexbox CSS qua ví dụ 35 phút 4 giây

Học Flexbox CSS qua ví dụ | Flexbox CSS | Flexbox layout | Flexbox example | Flexbox trong CSS

35. Liên hệ Flex model với các thuộc tính flexbox trong CSS 14 phút 23 giây

[Để học Flexbox tốt hơn] Liên hệ Flex model với các thuộc tính flexbox trong CSS

36. CSS BEM Là Gì? Đặt Tên CSS Class Theo Tiêu Chuẩn BEM 14 phút 50 giây

Tìm hiểu tiêu chuẩn BEM là gì và cách đặt tên class trong css/html như thế nào nhé. Tiêu chuẩn CSS BEM là gì

37. Ví dụ dùng BEM tạo buttons 16 phút 14 giây

Cách dùng BEM tạo buttons, thực hành dùng BEM tạo buttons

38. Ví dụ dùng BEM tạo Toast Message UI 35 phút 49 giây

BEM là gì:, Ví dụ dùng BEM tạo Toast Message UI trong CSS

39. BEM - Khi các Block lồng nhau thì đặt tên như thế nào? 10 phút 43 giây

BEM - Khi các Block lồng nhau thì đặt tên như thế nào? Cách dùng Block lồng nhau trong BEM CSS

40. Dựng source base 2 phút 54 giây

Cách dựng source base trong CSS

41. Reset CSS 5 phút 3 giây

Hiểu về Reset CSS, Tìm hiểu Reset trong HTML là gì

42. Dựng CSS base 10 phút 14 giây

Cách dựng CSS base, hiểu về CSS base là gì

43. Dựng khung web 11 phút 12 giây

Cách dựng khung web, dựng khung giao diện trong CSS web

44. Navbar CSS 23 phút 50 giây

Navbar CSS là gì, cách làm menu Navbar trongCSS

45. Nhúng Font-Icons 9 phút 38 giây

Cách nhúng Font-Icons trong CSS, dùng icon css như thế nào thay ảnh icon

46. Icons CSS 8 phút 21 giây

Icons trong CSS, sử dụng icon trong css như thế nào

47. Header QR code CSS 33 phút 7 giây

Tạo QR code CSS, sử dụng Header QR code CSS

48. Header notification CSS - Phần 1 33 phút 28 giây

Hướng dẫn thực hành Header notification CSS

49. Header notification CSS - Phần 2 19 phút 5 giây

Hướng dẫn tạo Header notification CSS - Phần 2

50. Header notification CSS - Phần 3 13 phút 16 giây

Hướng dẫn thực hành tạo Header notification CSS - Phần 3

51. Header notification CSS - Phần 4 4 phút 29 giây

Hướng dẫn thực hành Header notification CSS - Phần 4

52. Base modal 12 phút 13 giây

Tìm hiểu modal trong CSS, tạo Modal trong CSS

53. Dựng khung form đăng ký 16 phút 42 giây

Dựng form đăng ký trong HTML CSS

54. CSS form đăng ký 26 phút 58 giây

CSS form đăng ký

55. CSS form đăng ký - Phần 2 26 phút 14 giây

Cách CSS form đăng ký - Phần 2

56. CSS form đăng nhập 16 phút

Cách viết CSS form đăng nhập

57. Modal animation 6 phút 15 giây

Cách viết Modal animation

58. Dựng khung tìm kiếm 19 phút 53 giây

Thực hành dựng form tìm kiếm CSS

59. Header tìm kiếm CSS 40 phút 3 giây

Thực hành Header tìm kiếm CSS

60. Lịch sử tìm kiếm CSS 23 phút 46 giây

Thực hành với Lịch sử tìm kiếm CSS

61. Header cart badge 10 phút 46 giây

Thực hành tạo Header cart badge

62. Header giỏ hàng trống CSS 25 phút 55 giây

Thực hành với Header giỏ hàng trống CSS

63. Header cart - List products 35 phút 19 giây

Thực hành tạo Header cart - List products

64. Header user info 28 phút 5 giây

Thực hành tạo Header user info

65. Header fix ui bugs 16 phút 40 giây

Thực hành Header fix ui bugs

66. Dựng khung phần danh mục 14 phút 53 giây

Thực hành Dựng khung phần danh mục

67. Danh mục - base responsive 10 phút 53 giây

Thực hành Danh mục - base responsive

68. Danh mục CSS 21 phút 49 giây

Thực hành tạo Danh mục CSS

69. Dựng khung: Sắp xếp, lọc sản phẩm 11 phút 3 giây

Thực hành Dựng khung: Sắp xếp, lọc sản phẩm

70. CSS: Sắp xếp, lọc sản phẩm 28 phút 24 giây

Viết thực hành CSS: Sắp xếp, lọc sản phẩm

71. Dựng khung sản phẩm 18 phút 12 giây

Thực hành Dựng khung sản phẩm với CSS

72. Sản phẩm CSS - Phần 1 25 phút 26 giây

Tạo Sản phẩm CSS - Phần 1, tực hành mục sản phẩm

73. Sản phẩm CSS - Phần 2 18 phút 41 giây

Thực hành Sản phẩm CSS - Phần 2

74. Sản phẩm CSS - Phần 3 13 phút 40 giây

Thực hành Sản phẩm CSS - Phần 3

75. Sản phẩm: CSS nhãn yêu thích 18 phút 29 giây

Thực hành mục Sản phẩm: CSS nhãn yêu thích

76. Sản phẩm: CSS nhãn giảm giá 17 phút 54 giây

Thực hành mục Sản phẩm: CSS nhãn giảm giá

77. Hoàn thiện phần sản phẩm 16 phút 50 giây

Thực hành: Hoàn thiện mục sản phẩm với CSS

78. Fix UI bugs - Phần 2 35 phút 10 giây

Thực hành Fix UI bugs - Phần 2

79. Pagination UI 14 phút 45 giây

Thực hành phân trang Pagination UI

80. Dựng khung footer 16 phút 7 giây

Thực hành Dựng khung footer

81. Footer CSS 27 phút

Thực hành với Footer CSS

82. Chương cuối HTML, CSS 2 phút 53 giây

Chương cuối HTML, CSS | Công Tác Chuẩn Bị Làm Dự Án Cuối Khoá

83. 01. Giới thiệu dự án The Band | Thực hành cắt HTML CSS cơ bản 2 phút 53 giây

Giới thiệu dự án The Band | Thực hành cắt HTML CSS cơ bản | Phân tích giao diện web

84. 02. Phân biệt & gọi tên các thành phần 16 phút 15 giây

02. Phân biệt & gọi tên các thành phần

85. 03. Phân tích dự án 7 phút 31 giây

03. Phân tích dự án - Thực hành phân tích dự án

86. 04. Tạo khung dự án The Band | Dựng project base 10 phút 16 giây

04. Tạo khung dự án The Band | Dựng project base | Khóa học HTML, CSS cơ bản cho người mới bắt đầu

87. 05. Header CSS 33 phút 49 giây

Thực hành 05. Header CSS

88. 06. Navigation CSS 28 phút 45 giây

Thực hành menu với Navigation CSS

89. 07. Header search CSS 20 phút 10 giây

Thực hành bài 07. Header search CSS

90. 08. Header fixed CSS 7 phút 19 giây

Thực hành 08. Header fixed CSS

91. 09. Slider CSS 27 phút 21 giây

Thực hành 09. Slider CSS

92. 10. About section CSS 17 phút 47 giây

Thực hành 10. About section CSS

93. 11. Team section CSS 14 phút 7 giây

Thực hành 11. Team section CSS

94. 12. Tour tickets CSS 19 phút 27 giây

Thực hành 12. Tour tickets CSS

95. 13. Tour places CSS 24 phút 9 giây

Thực hành 13. Tour places CSS

96. 13.1. Buy Tickets Modal (video bổ sung) 43 phút 7 giây

Thực hành 13.1. Buy Tickets Modal (video bổ sung)

97. 14. Row - columns layout 15 phút 25 giây

Thực hành 14. Row - columns layout

98. 15. Contact form CSS 24 phút 14 giây

Thực hành 15. Contact form CSS

99. 16. Map & footer CSS 15 phút 9 giây

Thực hành 16. Map & footer CSS

100. 17. Review 6 phút 23 giây

17. Review lại dự án

101. 18. Responsive là gì? 5 phút 50 giây

Tìm hiểu Responsive là gì? Responsive trong CSS

102. 19. Media queries? 15 phút 38 giây

Media queries trong CSS, @media css là gì

103. 20. Tablet responsive 9 phút 47 giây

Tablet responsive là gì, lam sao responsive Table

104. 21. Mobile menu responsive 35 phút 39 giây

Thực hành tạo Mobile menu responsive, cách tạo menu mobile responsive

105. 22. Mobile menu fix bug 12 phút 37 giây

Thực hành Mobile menu fix bug

106. 23. Mobile fix bug submenu 20 phút 18 giây

Thực hành Mobile fix bug submenu

107. 24. Content responsive 14 phút 43 giây

Thực hành làm Content responsive trong CSS

108. 25. Contact form responsive 13 phút 41 giây

Thực hành Contact form responsive

109. 26. Review 21 phút 25 giây

Review lại dự án

110. 27. Run and fix bug on mobile 17 phút 1 giây

Thực hành: Run and fix bug on mobile

111. 28. Fix bugs 17 phút 2 giây

Fix bugs dự án

112. 13.2. Buy Tickets Modal Javascript Logic (video bổ sung) 27 phút 49 giây

Thực hành Buy Tickets Modal Javascript Logic (video bổ sung)

Từ khóa:f8, f8 html, f8 css, f8 học html css, f8 fullstack, f8 html css cơ bản, f8 html, f8 css, f8 lập trình web, f8 học lập trình web