Bài viết được sự cho phép của tác giả Trần Anh Tuấn

Khi học HTML, CSS chắc các bạn sẽ gặp nhiều vấn đề, đang muốn thử một tính năng rất gì và này nọ cơ mà đăng lên nhóm hỏi mọi người thì không biết làm sao ngoài cách phải upload code lên một đống nhìn rối não, người ta vào đọc chẳng muốn thèm giúp chút nào luôn.

Ngồi nghiên cứu tìm tòi thì thấy có các trang cho phép code online và chạy trên đó luôn, hỗ trợ đầy đủ các ngôn ngữ về Frontend như HTML, CSS, SASS, LESS, JavaScript, thư viện các kiểu với giao diện dễ nhìn, dễ sử dụng và tiện lợi nữa. Và nổi bật một trong số các trang code online đó chính là Codepen.

# Codepen là gì?

CodePen là một nền tảng phát triển code online. Nó cho phép bạn viết code trong trình duyệt và xem kết quả online. Một trình soạn thảo code online hữu ích tập trung chủ yếu vào các ngôn ngữ về phía Frontend như HTML, CSS, JavaScript và các thư viện cũng như các Preprocessing như Sass, Less, TypeScript để hỗ trợ cho các ngôn ngữ đó.

# Hướng dẫn tạo tài khoản miễn phí

Để tạo tài khoản, các bạn truy cập vào trang codepen.io rồi sau đó các bạn nhấn vào nút Sign Up như hình

Sau đó các bạn có thể đăng ký tài khoản với các trang mạng xã hội như Twitter, Facebook hay là Github hoặc là đăng ký với Email cũng được.

Việc đăng ký rất là đơn giản, nếu các bạn đăng ký với các trang mạng xã hội thì cấp quyền là xong, rồi tự động đăng nhập luôn sau đó. Còn nếu các bạn đăng ký với Email thì các bạn sẽ điền các thông tin như là Name, Email, Username và Password vào rồi sau đó nhấn Submit là được.

Sau đó nó sẽ hiện ra trang thông tin cho phép các bạn nhập địa chỉ ,giới thiệu và ảnh avatar. Các bạn có thể cập nhật hoặc không cũng không sao rồi sau đó nhấn Save and Submit để hoàn thành.

Tada! Ta có kết quả

# Hướng dẫn sử dụng

Để tạo một Pen mới các bạn nhấn vào chữ Pen như hình

lúc này ta sẽ được một giao diện mới như hình gồm các tab chính là HTML, CSS và JS. Nút Save để lưu, nút Setting để thiết lập các cài đặt, nút Change View để đổi cấu trúc giao diện code, bên trái là icon bút chì để sửa tiêu đề của Pen.

Ở Codepen khi các bạn code HTML thì chỉ đơn giản code những thứ trong thẻ body là được không nhất thiết phải lôi cả cấu trúc HTML khi code dưới máy vào như thẻ html, head, body, script… Muốn chèn script vào hay fontawesome bootstrap thì các bạn nhấn vào nút Setting, sau đó gõ thư viện bạn muốn vào khung tìm kiếm rồi chọn sau đó nhấn Save & Close là được.

Các bạn muốn code SCSS, LESS trong CSS hay PUG trong HTML hoặc TypeScript trong JS thì các bạn cũng vào Setting rồi chọn mục tương ứng như HTML, CSS và JS lần lượt là

Ngoài ra còn có tab Behavior ở đây cho phép các bạn thiết lập sử dụng Tabs hay là Spaces tuỳ theo cách code của mỗi người. Và còn có thêm 2 lựa chọn khác là Autosave nghĩa là tự động lưu khi các bạn đang code và Auto-Updating Preview nghĩa là khi các bạn code tới đâu UI nó sẽ cập nhật tới đó ví dụ code thẻ p {color: red;} thì lập tức UI có thẻ p sẽ đổi sang đỏ ngay lập tức.

Ngoài ra còn có các thiết lập khác như là chỉnh kiểu chữ khi code, các theme hiển thị cho đẹp, dark hay là light theme, kích thước chữ, emmet khi gõ nhấn tab sẽ tự động sinh ra code… Các bạn có thể thiết lập bằng cách nhấn vào Avatar sau đó chọn mục Setting sẽ ra trang như hình dưới đây. Các bạn có thể tuỳ chỉnh tuỳ thích hoặc để thiết lập mặc định cũng được nhé.

Sau khi các bạn code xong một Pen và lưu lại thì để xem danh sách các Pens mà các bạn đã làm thì các bạn vào mục Dashboard nhé. Nó sẽ hiển thị ra danh sách cho các bạn như dưới đây

Ngoài ra sau khi các bạn code xong, các bạn muốn chia sẻ cho người khác xem thì các bạn copy đường dẫn phía trên thanh url có dạng codepen/username/sdaffjiuewrkjlz  rồi đem đi chia sẻ là xong. Dưới đây là một ví dụ về Codepen mà mình code để các bạn tham khảo nha.

# Kết luận

Như vậy là mình đã nói sơ qua về Codepen cho các bạn cũng như hướng dẫn cho các bạn cách đăng ký tài khoản với Codepen, giới thiệu sơ về khả năng mạnh mẽ của Codepen là gì, cách tạo một Pen đơn giản cũng như là các thiết lập của nó. Hi vọng với những kiến thức cơ bản này sẽ giúp ích cho các bạn trong định hướng trở thành 1 Frontend-Developer thực thụ nhé.

Devmaster Academy via evondev