Hướng dẫn dùng codepen cho người mới

CodePen là một môi trường phát triển xã hội dành cho các nhà thiết kế và phát triển front-end (lập trình giao diện web). Với trang web này, bạn có thể xây dựng và triển khai một trang web, tạo dựng các bản thử nghiệm để tìm hiểu, gỡ lỗi cũng như tìm cảm hứng mới.

CodePen là trang web dành riêng các nhà thiết kế và phát triển front-end

Tính năng chính của CodePen

Xây dựng và Thử nghiệm

Hoàn thành công việc nhanh hơn bằng cách xây dựng toàn bộ dự án hoặc cô lập mã để kiểm tra các tính năng và hoạt ảnh ngay trên Code Pen.

Tìm hiểu và Khám phá

Bạn là người mới bắt đầu làm quen với lập trình web? Vậy thì CodePen là một nơi tuyệt vời để tìm hiểu cách tạo và đặt mã hoạt động cho các trang web. Muốn giảng dạy? Chế độ Professor cho phép sinh viên của bạn xem và nhận xét về các bản cập nhật Pen trong thời gian thực.

Tìm cảm hứng từ các tác phẳm của hơn 1.8 triệu nhà thiết kế và phát triển trên thế giới

Chia sẻ công việc của bạn

Trở thành một phần của cộng đồng front-end tích cực nhất trên thế giới bằng cách chia sẻ công trình của bạn trên CodePen.io. Thuyết trình tại một hội nghị? Hiển thị mã của bạn trực tiếp trong trình duyệt với chế độ Presentation.

Tìm cảm hứng

Trong CodePen, bạn có thể tìm cảm hứng từ 1.8 triệu nhà thiết kế và phát triển đẳng cấp thế giới trong cộng đồng front-end.

CodePen là môi trường front-end tuyệt vời để xây dựng và thử nghiệm web

Ngoài trang web CodePen, bạn có thể tự mình thực hành thiết kế và lập trình web với các phần mềm như: KompoZer, BlueVoda Website Builder, WampServer, Brackets,…

Codepen là một trang web để thử nghiệm và giới thiệu các đoạn code HTML, CSS, JavaScript. Nó hoạt động như một chương trình soạn thảo trực tuyến và cung cấp môi trường học tập mở cho các thành viên. Nó được thành lập vào năm 2012 bởi full-stack developer Alex Vazquez, Tim Sabat và front-end developer Chris Coyier. CodePen là một trong những cộng đồng lớn nhất dành cho web designers và developers để giới thiệu các đoạn code với nhau, với ước tính 330.000 người dùng đã đăng ký và 16,9 triệu khách truy cập hàng tháng. (Địa chỉ truy cập: codepen.io)

Sau đây là một số tính năng nổi bật của CodePen để giải thích tại sao đây lại là môi trường tốt nhất cho các developer.

1. Tùy chọn CSS

CodePen cung cấp một số tinh năng tuyệt vời để viết CSS nhanh hơn. Bạn có thể chọn Normalize.css hay reset.css vào trong CSS của mình một cách đơn giản.

Điều gì sẽ xảy ra khi bạn không chắc chắn về CSS techniques mình đang sử dụng? Đừng lo, CodePen có tích hợp CSSLint để kiểm tra code CSS của bạn và cảnh báo khi có lỗi.

2. Tích hợp nhiều ngôn ngữ tiền xử lí của HTML, CSS và JavaScript

Codepen hỗ trợ rất nhiều ngôn ngữ tiền xử lí của HTML, Css và JavaScript. Đối với HTML, bạn có thể sử dụng HAML, Markdown, Slim hay thậm chí Jade. Đối với CSS thì là Sass và SCSS cũng như Less và stylus.

Trong JavaScript bạn có thể chọn Babel, TypeSciprt, CoffeeScript và LiveScript.

3. Emmet và Vim Binding

Codepen là công cụ phát triển nhanh và mượt mà. Bạn có thể sử dụng các bộ công cụ như Emmet để giữ dự án tiếp tục. Trình soạn thảo Codepen cho phép bạn sử dụng Vim keys binding là phím tắt dòng lệnh. Kết hợp hai công cụ này với nhau có thể giúp công việc của bạn hoàn thành nhanh hơn.

4. Bộ sưu tập và tags

Bạn có thể thêm tags vào vào Pens (mỗi dự án được gọi là pen) của bạn, sau đó có thể tìm thấy được. Tìm kiếm các tags như “Loader” và “Form” sẽ là các nguồn cảm hứng hữu ích cho bạn.

5. Các chế độ xem khác nhau

CodePen có tổng cộng 8 chế độ xem khác nhau cho các Pen. Mỗi chế độ đều có lợi thế riêng.

Editor view – Đây là chế độ xem mặc định cho chỉnh sửa Pen. Bạn có thể điều chỉnh kích thước của Code preview và chọn ngôn ngữ hiển thị.

Details view – Chế độ này cho phép bạn xem thẻ tag của Pen, độ yêu thích, bình luận,… Chế độ này chứa hầu hết các tính năng xã hội cho CodePen.

Full page view – Chế độ xem toàn màn hình. Chỉ để lại codepen footer

Debug view – là chế độ xem màn hình nhưng với các tính năng bổ sung và loại bỏ footer để truy cập bảng điều khiển JavaScript dễ dàng hơn.

6. CodePen Pro Views

Nếu bạn đang dùng CodePen Pro, bạn có quyền truy cập nhiều chế độ xem hơn:

Presentation Mode – cho phép thay đổi font chữ, màu sắc của trình soạn thảo, thay đổi kích thước xem,… mà vẫn giữ nguyên code.

Live View – Khi bạn chỉnh sửa Pen của mình thì máy chủ sẽ tự động cập nhật code.

Professor Mode – Chế độ cho phép mọi người xem code theo thời gian thực. Ngoài ra có thêm một cửa sổ chat để các giảng viên giúp đỡ.

Collab Mode – cho phép nhiều người cùng viết một Pen, và có thêm cửa sổ chat giữa các thành viên.

7. Viết blog

Cho phép bạn chia sẻ các status như trên mọi mạng xã hội khác.

Bạn có thể viết bằng MarkDown và sử dụng các công cụ nhúng đặc biệt để nhúng Pen khi cần. Bạn có thể thêm CSS tùy chỉnh vào bài viết và các bản xem trước bài viết của bạn.

Các bạn có thể xem Pen của nhau, chia sẻ nhận xét và giúp đỡ nhau khi gặp khó khăn. Đây có lẽ là tính năng nổi bật nhất để đem CodePen trở thành nơi học tập tốt nhất cho các developer.

9. Cảm hứng

Các Pen ấn tượng luôn được hiển thị trên trang chủ, cũng như các bài viết, bộ sưu tập tuyệt vời. Việc học tập qua các Pen ấy sẽ đem lại các ý tưởng tuyệt vời cho bạn cũng như giải quyết các khó khăn, cải thiện trình độ HTML, CSS và JavaScript.

Trên đây là những lý do tuyệt vời để bạn đến với CodePen. Hãy tham gia nó và theo đuổi niềm đam mê của bạn!