Hướng dẫn chi tiết cách sử dụng Dev Mode trong khóa Pro
3 năm trước · 4 phút đọc
Chào bạn! Nếu bạn đã là học viên khóa Pro của F8, chắc hẳn bạn đã biết tới "Dev Mode" - giúp thực hành code song song khi xem video (bạn không cần phải dùng tới VS code nữa).
I. Giới thiệu Dev Mode
1.1 Dev Mode hữu ích khi học kiến thức mới
Dev Mode cực kỳ hữu ích khi bạn học các kiến thức mới, nó giúp bạn trải nghiệm thực tế luôn, thay vì chỉ xem video đơn thuần như hầu hết các khóa học khác.
Bên trái là bài học video, bên phải là trình viết code và browser hỗ trợ live reload.
Ở hình ảnh trên, mình vừa có thể học kiến thức mới về Grid CSS, vừa có thể tự tay trải nghiệm cách hoạt động của nó.
1.2 Dev mode hỗ trợ đa ngôn ngữ
Dev Mode hỗ trợ đầy đủ các ngôn ngữ khác nhau, tùy thuộc vào nội dung bài học đang sử dụng ngôn ngữ nào.
Hỗ trợ Sass - Ngôn ngữ tiền xử lý CSS, hỗ trợ "Auto compile":
Bạn có thể viết Sass trực tiếp trong trình duyệt, quá trình biên dịch diễn ra tự động.
Hỗ trợ Javascript:
Tùy vào nội dung bài học, Dev Mode sẽ linh hoạt thay đổi ngôn ngữ để đáp ứng nhu cầu trải nghiệm một cách tốt nhất.
II. Cách sử dụng Dev Mode hiệu quả
2.1 Cách bật Dev Mode
Dev Mode chỉ hỗ trợ bài học video. Trên Header, bạn nhấn vào biểu tượng sau để bật Dev Mode:
Trong Dev Mode, bạn vừa có thể học qua video, vừa thực hành code.
2.2 Phải thành thạo cú pháp để sử dụng
Dev Mode không hỗ trợ gợi ý, bắt buộc bạn phải thành thạo cú pháp.
Theo mình, khi mới học tập thì thành thạo cú pháp là một trong những yếu tố quan trọng nhất. Tự gõ toàn bộ là cách duy nhất giúp bạn thành thạo cú pháp.
Dev Mode có hỗ trợ Emmet:
Kết quả sau khi nhấn Tab:
Hoặc viết CSS thế này:
Kết quả là:
Các bạn học Emmet tại đây: https://docs.emmet.io/cheat-sheet/. Lưu ý là không cần học tất cả, khi cần cái nào thì vào tra cứu cái đó. Lâu dần bạn sẽ thuộc hết những Emmet thường dùng, vậy là đủ.
2.3 Giảm tốc độ video hoặc pause khi cần thiết
Khi video đang phát, nếu bạn chưa thành thạo cú pháp thì rất khó để gõ code theo kịp. Vì vậy, các bạn cần phải:
- Giảm tốc độ video hoặc pause video. Gõ lại các dòng code và trải nghiệm
- Luyện tập thêm thật nhiều để thành thạo cú pháp code, cú pháp Emmet
- Hãy tự tò mò thêm, tự sửa code để xem nó chạy như thế nào
Tò mò, tự khám phá/tự trải nghiệm là điều kiện tiên quyết để trở thành một kỹ sư tài giỏi trong tương lai.
III. Tổng kết
Dev Mode là công cụ rất mạnh giúp bạn học tập tốt hơn thông qua trải nghiệm song song cùng với xem video. Tuy nhiên, bạn phải thành thạo cú pháp code để Dev Mode thực sự phát huy sức mạnh.
Các khóa học Pro hiện tại của F8 (hỗ trợ rất nhiều tính năng hiện đại mà các nền tảng khác không có):
- Khóa học HTML CSS Pro: https://fullstack.edu.vn/landing/htmlcss/
- Khóa học ngôn ngữ Sass: https://fullstack.edu.vn/landing/sass/
- Các khóa học khác, tìm hiểu thêm tại trang chủ F8: https://fullstack.edu.vn/
Have a nice day 🙌. See you!