HTML, CSS Tricks & Tips

<p>Khóa học này tập trung chia sẻ những mẹo và kỹ thuật hữu ích giúp bạn khai thác tối đa tiềm năng của HTML và CSS để tạo ra trang web độc đáo và hiệu quả. Bạn sẽ được trang bị các chiến lược và thủ thuật tối ưu hóa quá trình phát triển web, đồng thời giải quyết các thách thức thường gặp một cách hiệu quả. Thông qua khóa học, bạn sẽ khám phá các bí quyết sử dụng HTML và CSS một cách linh hoạt để tạo ra giao diện đẹp mắt và đầy đủ chức năng. Khóa học đặc biệt chú trọng vào việc ứng dụng các tính năng và thuộc tính đặc biệt của HTML và CSS để xây dựng trang web nhanh chóng và dễ dàng bảo trì.</p>

Lập trình 

Giao diện responsive

👉 Khóa Học HTML CSS Pro tốt nhất bạn có thể tìm thấy: https://fullstack.edu.vn/landing/htmlcss
👉 XEM LỘ TRÌNH HỌC: https://fullstack.edu.vn/learning-paths

Trong video này chúng ta cùng thực hành sử dụng BEM để tạo Toast Message đơn giản, hỗ trợ rất nhiều trong quá trình xây dựng website của các bạn sau này.

- BEM là gì: https://www.youtube.com/results?search_query=bem+la+gi+f8
- Code trong video: https://codepen.io/ng-ngc-sn-the-bashful/pen/Exgmxqp?editors=1000
- Ảnh thiết kế Toast Message: https://dribbble.com/shots/4580930-Toast-Messages/attachments/4580930-Toast-Messages?mode=media

#hoclaptrinh  #hoclaptrinhmienphi  #html_css  #frontend #backend  #devops 
----
☻ Phần mềm sử dụng trong video:
Công cụ dịch Tiếng Anh: http://bit.ly/2Wsuhet
Công cụ đo đạc giao diện web: http://bit.ly/3muevdD
Công cụ viết CV xin việc chuyên nghiệp: https://mycv.vn
--------------
☻ Khóa học lập trình web MIỄN PHÍ:
Kiến thức nhập môn: https://fullstack.edu.vn/courses/lessons-for-newbie
Xây dựng giao diện với HTML, CSS: https://fullstack.edu.vn/courses/html-css
Xây dựng web responsive: https://fullstack.edu.vn/courses/responsive-web-design
Lập trình Javascript cơ bản: https://fullstack.edu.vn/courses/javascript-co-ban
Lập trình Javascript nâng cao: https://fullstack.edu.vn/courses/javascript-nang-cao
Làm việc với Terminal & Ubuntu: https://fullstack.edu.vn/courses/windows-terminal-wsl
Xây Dựng Website với ReactJS: https://fullstack.edu.vn/courses/reactjs
Xây dựng web với Node & Express: https://fullstack.edu.vn/courses/nodejs
HTML, CSS tips: https://fullstack.edu.vn/courses/html-css-tutorials
Ứng dụng cảnh báo khi sờ lên mặt: https://fullstack.edu.vn/courses/tool-canh-bao-so-len-mat
Xem thêm tại: https://fullstack.edu.vn/courses
-------------------------------------

F8 Official
(c) Sơn Đặng
Website: https://fullstack.edu.vn
Facebook cá nhân: https://facebook.com/sondnf8
Nhóm Học Lập Trình Web: https://www.facebook.com/groups/f8official
Email: contact@fullstack.edu.vn

© Bản quyền thuộc về Channel F8 Official ☞ Do not Reup
© Nghiêm cấm sử dụng video nhằm mục đích thương mại dưới mọi hình thức.

Use BEM to create Toast Message UI

👉 Khóa Học HTML CSS Pro tốt nhất bạn có thể tìm thấy: https://fullstack.edu.vn/landing/htmlcss
👉 XEM LỘ TRÌNH HỌC: https://fullstack.edu.vn/learning-paths

Video này sẽ hướng dẫn các bạn ứng dụng BEM để tạo ra buttons và làm như thế nào để buttons có thể dễ dàng tùy biến.
#hoclaptrinh  #hoclaptrinhmienphi  #html_css  #frontend #backend  #devops 
----
- BEM là gì? Tìm hiểu về BEM tại đây: https://www.youtube.com/results?search_query=bem+la+gi+f8
- Code trong video: https://codepen.io/ng-ngc-sn-the-bashful/pen/VwKXNyK
- Thực hành BEM level 2: https://youtu.be/7c7ABhaQJGM
- Khi các Block lồng nhau thì đặt tên như thế nào? https://youtu.be/IddL557icoc
- Flexbox là gì? Giới thiệu về Flexbox: https://www.youtube.com/watch?v=bVUN6nS82k8&list=PL_-VfJajZj0U9nEXa4qyfB4U5ZIYCMPlz&index=32
- Ảnh thiết kế button trên Dribbble: https://dribbble.com/shots/5752826-Flash-Messages
--------------

☻ Phần mềm sử dụng trong video:
Công cụ dịch Tiếng Anh: http://bit.ly/2Wsuhet
Công cụ đo đạc giao diện web: http://bit.ly/3muevdD
Công cụ viết CV xin việc chuyên nghiệp: https://mycv.vn
--------------------
☻ Khóa học lập trình web MIỄN PHÍ:
Kiến thức nhập môn: https://fullstack.edu.vn/courses/lessons-for-newbie
Xây dựng giao diện với HTML, CSS: https://fullstack.edu.vn/courses/html-css
Xây dựng web responsive: https://fullstack.edu.vn/courses/responsive-web-design
Lập trình Javascript cơ bản: https://fullstack.edu.vn/courses/javascript-co-ban
Lập trình Javascript nâng cao: https://fullstack.edu.vn/courses/javascript-nang-cao
Làm việc với Terminal & Ubuntu: https://fullstack.edu.vn/courses/windows-terminal-wsl
Xây Dựng Website với ReactJS: https://fullstack.edu.vn/courses/reactjs
Xây dựng web với Node & Express: https://fullstack.edu.vn/courses/nodejs
HTML, CSS tips: https://fullstack.edu.vn/courses/html-css-tutorials
Ứng dụng cảnh báo khi sờ lên mặt: https://fullstack.edu.vn/courses/tool-canh-bao-so-len-mat
Xem thêm tại: https://fullstack.edu.vn/courses
-------------------------------------

F8 Official
(c) Sơn Đặng
Website: https://fullstack.edu.vn
Facebook cá nhân: https://facebook.com/sondnf8
Nhóm Học Lập Trình Web: https://www.facebook.com/groups/f8official
Email: contact@fullstack.edu.vn

© Bản quyền thuộc về Channel F8 Official ☞ Do not Reup
© Nghiêm cấm sử dụng video nhằm mục đích thương mại dưới mọi hình thức.

Use BEM to create buttons | Application of BEM in CSS

Trong video này mình sẽ chia sẻ cách làm responsive navbar chỉ sử dụng HTML, CSS (không sử dụng Javascript).

Code mẫu sử dụng trong video (chưa có mobile navbar): https://codepen.io/ng-ngc-sn-the-bashful/pen/PoqbKmd

Sorry các bạn mình nói nhầm một số chỗ:
24:29 "là hơi chậm mới đúng nhé ^^"
26:29 "hoạt động trên multi platform là ko đúng nhé. Mình lỡ miệng, ý mình là multi device ^^"

🔥 Hãy chia sẻ các khóa học, vì ngoài kia có rất nhiều người đang cần nó ❤️
🔥 Truy cập http://fullstack.edu.vn (miễn phí) để quản lý được tiến độ học của bạn. Trong tương lai còn giúp bạn có hồ sơ đẹp trong mắt Nhà Tuyển Dụng.
🔥 Tham gia nhóm Học lập trình tại F8 trên Facebook: https://www.facebook.com/groups/f8official/

#hoclaptrinh #mienphi #frontend #backend #devops
---------------------------------------
HỌC LẬP TRÌNH MIỄN PHÍ
1. Khóa Javascript cơ bản: https://fullstack.edu.vn/courses/javascript-co-ban
2. Khóa HTML, CSS: https://fullstack.edu.vn/courses/html-css
3. Khóa Responsive web design: https://fullstack.edu.vn/courses/responsive-web-design
---------------------------------------
LIÊN KẾT HỮU ÍCH
1. Học lập trình: http://fullstack.edu.vn
2. Viết CV xin việc: http://mycv.vn
-----------------------------------------------------------
LIÊN HỆ
1. Facebook: https://fb.com/sondnmc
2. Email: sondnf8@gmail.com

Yêu các bạn ❤️

Responsive Navbar does not use JS (reference)

🔥 Hãy chia sẻ các khóa học, vì ngoài kia có rất nhiều người đang cần nó ❤️
🔥 Truy cập http://fullstack.edu.vn (miễn phí) để quản lý được tiến độ học của bạn. Trong tương lai còn giúp bạn có hồ sơ đẹp trong mắt Nhà Tuyển Dụng.
🔥 Tham gia nhóm Học lập trình tại F8 trên Facebook: https://www.facebook.com/groups/f8official/

Code mẫu: https://codepen.io/ng-ngc-sn-the-bashful/pen/RwPjexr

#hoclaptrinh #mienphi #frontend #backend #devops
---------------------------------------
HỌC LẬP TRÌNH MIỄN PHÍ
1. Khóa Javascript cơ bản: https://fullstack.edu.vn/courses/javascript-co-ban
2. Khóa HTML, CSS: https://fullstack.edu.vn/courses/html-css
3. Khóa Responsive web design: https://fullstack.edu.vn/courses/responsive-web-design
---------------------------------------
LIÊN KẾT HỮU ÍCH
1. Học lập trình: http://fullstack.edu.vn
2. Viết CV xin việc: http://mycv.vn
-----------------------------------------------------------
LIÊN HỆ
1. Facebook: https://fb.com/sondnmc
2. Email: sondnf8@gmail.com

Yêu các bạn ❤️

Dialog / Modal does not use JS (reference)

Xây dựng chức năng Tabs với kiến thức Javascript cơ bản.
- Link ảnh thiết kế: https://dribbble.com/shots/14483921-React-UI-kit-for-Figma-Design-Code-toolkit-2-in-1/attachments/6168243?mode=media
- Link code mẫu: https://codepen.io/ng-ngc-sn-the-bashful/pen/BaLXJbz

Bạn muốn học lập trình hiệu quả hơn không?
Hãy học tại trang web http://fullstack.edu.vn thay vì Youtube. Lý do tại sao mời bạn bấm vào đây: https://www.youtube.com/watch?v=f5hbmw7Ba7c

#hoclaptrinh #frontend #html-css  #javascript #backend #devops
---------------------------------------

☻ Phần mềm sử dụng trong video:
Công cụ dịch Tiếng Anh: http://bit.ly/2Wsuhet
Công cụ đo đạc giao diện web: http://bit.ly/3muevdD
Công cụ viết CV xin việc chuyên nghiệp: https://mycv.vn

☻ Tiện ích cho Visual Studio Code:
Gợi ý code: Tabnine Autocomplete AI (http://bit.ly/34rl0Yr)
Tự động đóng thẻ: Auto Close Tag (http://bit.ly/3mwoJue)
Tự động đổi tên thẻ đóng/mở: Auto Rename Tag (http://bit.ly/3nB0ADS)
Thêm màu sắc cho các cặp ngoặc: Bracket Pair Colorizer (http://bit.ly/37wgXfC)
Icon theme: Material Icon Theme (http://bit.ly/37ukU4b)
Hiển thị thông tin Git (commit, author, ...): Gitlens (http://bit.ly/3gYlaf9)

☻ Khóa học lập trình web MIỄN PHÍ:
Kiến thức cơ bản, cốt lõi cho dân IT: https://fullstack.edu.vn/courses/lessons-for-newbie
HTML, CSS từ zero đến Hero: https://fullstack.edu.vn/courses/html-css
Xây dựng web responsive: https://fullstack.edu.vn/courses/responsive-web-design
Lập trình Javascript cơ bản: https://fullstack.edu.vn/courses/javascript-co-ban
Xây dựng web với Node & Express: https://fullstack.edu.vn/courses/nodejs
HTML, CSS tips: https://fullstack.edu.vn/courses/html-css-tutorials
Ứng dụng cảnh báo khi sờ lên mặt: https://fullstack.edu.vn/courses/tool-canh-bao-so-len-mat
Xem thêm tại: https://fullstack.edu.vn/courses

☻ Chú ý :
- Không văng tục chửi bậy, bình luận có văn hóa.
- Không hỏi khi chưa xem xong video.
Sai phạm sẽ được mời khỏi kênh.

☻ F8 là nơi học lập trình để đi làm!
Tại sao bạn nên học lập trình tại đây? Ở đây chúng tôi có:
- Nội dung bài học chỉn chu và chi tiết giúp học viên hiểu từ cái gốc
- Kỹ năng sư phạm khác biệt từ người dạy giúp học viên có thêm nhiều động lực
- Hình ảnh và âm thanh chất lượng cao giúp học viên thêm hứng thú

F8 Official
(c) Sơn Đặng
Website: https://fullstack.edu.vn
Facebook cá nhân: https://facebook.com/sondnmc
Nhóm Học Lập Trình Web: https://www.facebook.com/groups/f8official
Email: sondnf8@gmail.com

© Bản quyền thuộc về Channel F8 Official ☞ Do not Reup
© Nghiêm cấm sử dụng video nhằm mục đích thương mại dưới mọi hình thức.

Build Tabs UI with basic Javascript

Tutorials về HTML, CSS, UI, UX sẽ được tổng hợp tại khóa học này, các video có nội dung ngắn gọn, súc tích giúp học viên có thể ứng dụng ngay vào thực tế

HTML, CSS Tricks & Tips 1

🔥 Hãy chia sẻ các khóa học, vì ngoài kia có rất nhiều người đang cần nó ❤️
🔥 Truy cập http://fullstack.edu.vn (miễn phí) để quản lý được tiến độ học của bạn. Trong tương lai còn giúp bạn có hồ sơ đẹp trong mắt Nhà Tuyển Dụng.
🔥 Tham gia nhóm Học lập trình tại F8 trên Facebook: https://www.facebook.com/groups/f8official/

#hoclaptrinh #mienphi #frontend #backend #devops
---------------------------------------
HỌC LẬP TRÌNH MIỄN PHÍ
1. Khóa Javascript cơ bản: https://fullstack.edu.vn/courses/javascript-co-ban
2. Khóa HTML, CSS: https://fullstack.edu.vn/courses/html-css
3. Khóa Responsive web design: https://fullstack.edu.vn/courses/responsive-web-design
---------------------------------------
LIÊN KẾT HỮU ÍCH
1. Học lập trình: http://fullstack.edu.vn
2. Viết CV xin việc: http://mycv.vn
3. Danh sách phát Youtube: https://www.youtube.com/channel/UCNSCWwgW-rwmoE3Yc4WmJhw/playlists
-----------------------------------------------------------
LIÊN HỆ
1. Facebook: https://fb.com/sondnmc
2. Email: sondnf8@gmail.com

Yêu các bạn ❤️

Ways to center item(s)

Hiển thị ảnh dự phòng hay còn gọi là "Fallback image".

🔥 Hãy chia sẻ các khóa học để mọi người được học MIỄN PHÍ ❤️
🔥 Truy cập http://fullstack.edu.vn (miễn phí) để làm bài tập và quản lý được tiến độ học của bạn. Trong tương lai còn giúp bạn có hồ sơ đẹp trong mắt Nhà Tuyển Dụng.
🔥 Tham gia nhóm Học lập trình tại F8 trên Facebook: https://www.facebook.com/groups/f8official/

#hoclaptrinh #mienphi #frontend #backend #devops
---------------------------------------
HỌC LẬP TRÌNH MIỄN PHÍ
1. Khóa Javascript cơ bản: https://fullstack.edu.vn/courses/javascript-co-ban
2. Khóa HTML, CSS: https://fullstack.edu.vn/courses/html-css
3. Khóa Responsive web design: https://fullstack.edu.vn/courses/responsive-web-design
4. Khóa Xây dựng web với NodeJS & ExpressJS: https://fullstack.edu.vn/courses/nodejs
---------------------------------------
LIÊN KẾT HỮU ÍCH
1. Học lập trình: http://fullstack.edu.vn
2. Viết CV xin việc: http://mycv.vn
3. Danh sách phát Youtube: https://www.youtube.com/channel/UCNSCWwgW-rwmoE3Yc4WmJhw/playlists
-----------------------------------------------------------
LIÊN HỆ
1. Facebook: https://fb.com/sondnmc
2. Email: sondnf8@gmail.com

Yêu các bạn ❤️

HTML, CSS Tricks & Tips

What you'll learn

Skills you'll gain

Course content

Instructor

Review