Một trong nhiều điều khó chịu về phát triển web là không có cách dễ dàng để chia sẻ dự án của bạn với người khác. Trong nhiều trường hợp, bạn sẽ phải lưu trữ dự án của mình trên máy chủ web hoặc gửi tất cả các tệp tương ứng cho ai đó muốn xem những gì bạn đã tạo. Nhưng nhờ có một công cụ trực tuyến gọn gàng có tên CodePen, bạn không phải lo lắng về điều đó nữa.
CodePen.io
CodePen là một công cụ miễn phí cho phép bạn lưu trữ các dự án của bạn trực tuyến mà không bao giờ phải trả một xu nào. Để bắt đầu, hãy truy cập CodePen.io và tạo một tài khoản miễn phí.
Khi bạn đã hoàn thành việc đó, bạn có thể tạo một Bút Pen Bút bằng cách nhấp vào nút Mới Bút Bút ở góc trên cùng bên phải của màn hình.
Sau đó, bạn sẽ có thể thêm bất kỳ HTML, CSS và JavaScript nào vào các hộp tương ứng của chúng. Khi bạn bắt đầu thêm một số mã, bạn sẽ thấy bản xem trước trực tiếp về những gì bạn đang tạo. Bạn có thể đặt tiêu đề Bút đầu tiên của bạn ở góc trên bên trái. Sau khi bạn nhấp vào Lưu Lưu đầu tiên của mình, bạn sẽ có thể chia sẻ URL của trang với bạn bè, gia đình và đồng nghiệp để họ có thể thấy những gì bạn đang làm.
Đây là cách Bút của bạn sẽ trông như thế nào với một số mã trong đó (lịch sự của dự án Free Code Camp có tên là Tribute Page):
Khi tạo Bút của riêng bạn, bạn sẽ muốn đi qua Cài đặt trước khi bắt đầu. Khi bạn nhấp vào nút Bút Mới, bạn sẽ thấy một mẫu Bút sẵn sàng để bạn bắt đầu nhập một số mã. Ở góc trên cùng bên phải sẽ là nút Cài đặt hình chữ nhật. Bấm vào đó (bạn sẽ thấy màn hình bên dưới).
Tại đây bạn sẽ có thể đi qua các tab HTML, CSS và JavaScript để thêm thông tin nhất định. Trong tab HTML, bạn sẽ có thể thêm thông tin meta, những thứ nên có trong
tab, v.v. Trong CSS, bạn sẽ có thể thêm Bộ tiền xử lý CSS như LESS và Sass. Không chỉ vậy, nhưng bạn có thể thêm vào CSS bên ngoài như Bootstrap và Foundation. Trong tab JavaScript, bạn có thể thêm vào Bộ xử lý JavaScript như Babel hoặc CoffeeScript. Ngoài ra, bạn có thể thêm vào các khung JavaScript bên ngoài như Angular, React, Lodash, D3, v.v.
Cuối cùng, CodePen sẽ cho phép bạn thay đổi chế độ xem View mà bạn đang xem. Chế độ xem mặc định là Chế độ xem Trình chỉnh sửa, cho phép bạn nhập mã của mình và nhận bản xem trước nhỏ trong bảng điều khiển bên dưới. Tuy nhiên, cũng có các tùy chọn khác, với một tùy chọn đặc biệt tiện dụng là chế độ xem Trang đầy đủ của Trang, nơi bạn sẽ thấy một dự án như thể nó đang trực tiếp trên một trang web. Có một số Chế độ xem khác có sẵn để chuyển sang, rất đáng để chơi!
CodePen thực sự là một công cụ gọn gàng và chúng tôi chỉ chạm vào bề mặt của tính hữu dụng của nó. Thật đáng để hướng tới CodePen.io và sử dụng nó để làm việc trong một vài dự án, và sau đó, nếu bạn cảm thấy thích nó, hãy chia sẻ với bạn bè hoặc đồng nghiệp của bạn.
Bạn nghĩ gì về CodePen? Bạn đã sử dụng một công cụ tương tự? Cho chúng tôi biết trong phần ý kiến dưới đây!
