Giới thiệu

Nếu bạn đang làm việc hay học thiết kế web ở mức front-end thì CodePen là môi trường hấp dẫn giúp bạn có thể học hỏi và chia sẻ kiến thức một cách hiệu quả. Giao diện CodePen

Trước tiên, bạn cần tạo tài khoản cá nhân trên CodePen (Sign Up) hay đăng nhập vào CodePen (Log In). Tài khoản CodePen có hai hình thức là Free – miễn phí dùng cho những người bắt đầu học thiết kế web và Pro – trả phí dùng cho các nhà phát triển web chuyên nghiệp. Giao diện tài khoản sau khi đăng nhập (với tên tài khoản là Ngoc Minh Tran)

Thông tin về tài khoản và các hoạt động của bạn trên CodePen có thể xem tại mục YOUR:

Activity: theo dõi các hoạt động bạn đã thực hiện trên CodePen như tạo một Pen, chỉnh sửa một Collection, v.v.

Pins: tính năng này tương tự Bookmark trên các trình duyệt web, giúp chúng ta tìm kiếm các Posts, Pens hay Collections một cách nhanh chóng

Dashboard: giúp chúng ta quản lý Pens, Projects, Posts hay Collections

Profile: thể hiện các thông tin cá nhân

Thoát khỏi tài khoản CodePen bằng cách nhấn chuột vào tên tài khoản chọn Log Out:

Các thành phần cơ bản

Pen

Pen: Có thể hiểu đó là một trang web gồm 3 phần cơ bản HTML, CSS và JavaScript (hay jQuery)

Tạo một Pen: Create > Pen

Viết mã cho trang web (hay Pen): viết mã HTML, CSS hay JavaScript trong các khung tương ứng, ví dụ:

Lưu trang (Pen): nhấn nút Save (lưu ý trước đó chúng ta phải đăng nhập vào CodePen, nếu chưa đăng nhập hay chưa có tài khoản, CodePen sẽ yêu cầu). Sau khi lưu, để ý đường link phía trên:

Thay đổi tiêu đề trang (Pen): Pen ở trên của chúng ta lúc này có tiêu đề vẫn là Untitled. Có thể thay đổi tiêu đề Pen bằng cách nhấn nút Settings

Trong Pen Settings gõ tiêu đề vào Pen Title hay các mô tả về Pen trong Pen Description và nhấn nút Save & Close:

Kết quả:

Một cách khác để thay đổi tiêu đề Pen là chọn biểu tượng cây bút gần tiêu đề

và gõ trực tiếp tiêu đề mới:

Chia sẻ Pen:

  • Trong Pen Settings, chúng ta có thể chọn chia sẻ Pen đến cộng đồng (Public) hoặc cho mục đích cá nhân (Private). Mặc định Pen có phạm vi Public và bạn phải có tài khoản Pro mới có thể dùng Private. Với phạm vi Public, các thành viên khác trên cộng đồng CodePen có thể thấy mã nguồn từ Pen của chúng ta và có thể sao chép, sử dụng.
  • Cách thủ công nhất là sao chép url của Pen và chia sẻ cho người khác
  • Có thể chia sẻ liên kết Pen đến các mạng xã hội như FaceBook, Twitter, v.v. bằng cách nhấn Share, có thể nhúng Pen trong một nền tảng khác (ví dụ bạn muốn viết bài chia sẻ trên WordPress hay Blogger) bằng cách nhấn Embbed hay có thể xuất bản Pen dạng Gist (đến GitHub) hay Zip bằng cách nhấn Export.

Xem Pen: có thể xem kết quả trang web (Pen) hiển thị trên trình duyệt bằng cách chọn các tùy chọn Details View hay Full Page View trong Change View

Kết quả

Lúc này có thể vào lại Change View chọn Editor View để trở lại giao diện tạo mã nguồn cho Pen hay hiển thị Pen trong một trình duyệt và sử dụng công cụ Debug của trình duyệt này bằng cách chọn Debug mode.

Một cách khác để xem nội dung Pen hiển thị trên trình duyệt sẽ trông ra sao bằng cách chọn Open Live View in a New Window

Xem tất cả các Pen bạn đã tạo: chúng ta có thể xem tất cả các Pen, Collection, Project hay Post chúng ta đã tạo bằng cách chọn DashBoard

Collection

Một Collection là một tập hợp chứa các Pens. Tạo một Collection mới bằng cách chọn Create > Collection:

Nhập thông tin về Collection:

Thêm Pen đến Collection: tìm đến một Pen nào đó đã tạo (trong DashBoard) và chọn Add to Collection

và chọn Collection (ví dụ Collect_1 chúng ta vừa tạo)

Bây giờ chúng ta chọn Collections trong DashBoard để xem Collection chúng ta vừa tạo:

Project

Với CodePen, chúng ta có thể xem và tạo dự án website (Project) bằng cách vào Dashboard chọn Projects hay đơn giản là chọn Create > Project

Hình trên thể hiện chúng ta chưa có dự án website nào. Nhấn nút Go make one!

Bạn có thể dùng các Template khác nhau cho dự án nhưng cơ bản là Basic HTML5 + Structure

Dự án chúng ta sẽ trông như sau:

Mặc định cấu trúc dự án chúng ta gồm thư mục scripts chứa các tập tin JavaScript, thư mục styles chứa các tập tin CSS và tập tin index.html. Chúng ta có thể tạo các tập tin mới bằng cách chọn New File hay kéo từ một ổ đĩa lưu trên máy cá nhân và thả vào vị trí tương ứng trong khung PROJECT ROOT. Tương tự chúng ta có thể tạo một thư mục mới bằng cách chọn New Directory hay kéo từ  một ổ đĩa lưu trên máy cá nhân và thả vào vị trí tương ứng trong khung PROJECT ROOT. Ví dụ thêm một thư mục tên MyImage (lưu ý tên thư mục không có khoảng trắng):

Cách 1: Chọn New Directory và gõ MyImage

Nhấn Enter

Để xóa thư mục này chúng ta nhấn chuột phải vào thư mục và chọn Delete Folder

Cách 2: Kéo một thư mục tên MyIMage từ ổ đĩa cục bộ của máy tính và thả vào PROJECT ROOT

Tương tự với việc thêm một tập tin.

Post

Nếu bạn là người thích việc viết lách giảng giải kiến thức cho người khác, thì Post sẽ giúp bạn tạo các bài viết và chia sẻ trên cộng đồng CodePen. Tạo một Post mới bằng cách vào Create > Post

Post, Project hay Collection có thể được chia sẻ giống như một Pen.

Lời kết

CodePen là một môi trường hữu ích với nhiều tính năng hấp dẫn cho những người thiết kế và lập trình (Front-end) web. Bài viết này chỉ giới thiệu một số tính năng cơ bản, chi tiết về các tính năng trên CodePen có thể tham khảo tại CodePen Document.