Trong hội thảo này, bạn có thể tìm thấy một hội thảo mở rộng hướng dẫn bạn những bước đầu tiên với HTML & CSS. Do đó, với phương châm ‘thực hành tạo nên sự hoàn hảo’, chúng tôi khuyên bạn nên phát triển hơn nữa các kỹ năng mới của mình bằng cách tự thử nghiệm. Codepen là nơi lý tưởng cho việc đó.
Nếu bạn muốn thử nhanh một đoạn HTML, CSS (và có thể cả Javascript), bạn có thể tạo một tài liệu trên máy tính và mở nó trong trình duyệt của mình. Đơn giản nhưng nhược điểm là bạn không thể truy cập nó ở mọi nơi và bạn cũng phải làm mới trình duyệt mỗi khi cập nhật file. Thông qua Codepen.io, các đoạn mã của bạn được hiển thị theo thời gian thực để bạn có thể biết ngay mã nào thực hiện chức năng gì. Một công cụ không thể thiếu khi học các ngôn ngữ như HTML và CSS.
Tạo tài khoản trên Codepen.io
Codepen.io có tư cách thành viên trả phí. Ví dụ: thông qua tư cách thành viên đó, bạn có thể đặt các mẫu mã ở chế độ riêng tư. Theo mặc định, tất cả các mẫu mã bạn tạo đều có thể truy cập được đối với mọi người. Đó không nhất thiết phải là vấn đề tức thời, miễn là bạn không đưa dữ liệu nhạy cảm (chẳng hạn như chi tiết đăng nhập) vào mã của mình. Đó là lý do tại sao một tài khoản miễn phí là đủ trong hầu hết các trường hợp. Bằng cách này, bạn có thể lưu các mẫu mã của mình để có thể tham khảo lại chúng sau này. Hướng đến https://codepen.io/accounts/signup/user/free. Bạn có thể chọn đăng ký qua TwitterGithub hoặc Facebook hoặc qua email. Tạo một tài khoản theo cách bạn chọn. Sau khi đăng ký, bạn sẽ nhận được một email mà bạn phải xác nhận.
Bắt đầu một dự án mới
Bạn có thể đặt bất kỳ bộ sưu tập HTML/CSS/Javascript nào vào Codepen trong ‘Pen’. Hướng đến https://codepen.io và nhấp chuột trái Tạo bút. Bây giờ bạn sẽ thấy trình chỉnh sửa có trường dành cho HTML, CSS và JS. Bây giờ, khi bạn bắt đầu thêm các phần tử HTML và tạo kiểu cho chúng bằng CSS, bạn sẽ thấy những thay đổi ở phía dưới cùng. Đặt tên cho dự án của bạn bằng cách nhấp vào bút chì bên cạnh “Chưa có tiêu đề” ở trên cùng. Đừng quên nhấp vào ‘Lưu’ thường xuyên. Nếu bạn muốn tham khảo tất cả ‘Bút’ của mình, bạn chỉ cần nhấp vào ảnh hồ sơ của bạn ở trên cùng bên phải rồi chọn Công việc của bạn.
