Codepen là gì? Tạo tài khoản CodePen miễn phí và sử dụng như thế nào?

06/05/2020 | 275 views

CodePen là gì? Tạo tài khoản CodePen miễn phí ra sao? Sử dụng như thế nào? Hãy tham khảo bài viết sau của FPT Arena để có được đáp án chi tiết nhé!

codepen-la-gi-tao-tai-khoan-mien-phi-va-su-dung-nhu-the-nao
Codepen là gì? Tạo tài khoản miễn phí và sử dụng như thế nào?

CodePen là gì?

CodePen được biết đến là nền tảng phát triển code online. Nó giúp viết code trong trình duyệt đồng thời xem kết quả trực tiếp. Trình soạn thảo code này tập trung chủ yếu đến các ngôn ngữ về phía Front End như CSS, HTML, JavaScript, các thư viện và Preprocessing.

codepen-giup-viet-code-trong-trinh-duyet-dong-thoi-xem-ket-qua-truc-tiep
CodePen giúp viết code trong trình duyệt đồng thời xem kết quả trực tiếp

Có thể bạn quan tâm:

Khóa học thiết kế web chuyên nghiệp theo xu hướng mới

Tạo tài khoản CodePen miễn phí ra sao?

Bước 1: Truy cập codepen.io => click chuột vào Sign Up (hình dưới)

tai-khoan-codepen
Tài khoản CodePena

Bước 2: Đăng ký tài khoản với các trang như Facebook, Twitter, Github hoặc Email. Nếu đăng ký với Email, bạn cần điền các thông tin như Email, Name, Username, Password => Submit => Xuất hiện trang thông tin để bạn nhập địa chỉ, avatar, giới thiệu => Save and Submit. Nếu đăng ký với trang mạng xã hội, sau khi được cấp quyền tài khoản sẽ tự động đăng nhập

dang-ky-tai-khoan-voi-trang-mang-xa-hoi
Đăng ký tài khoản với trang mạng xã hội

 

tao-tai-khoan-codepen-thanh-cong
Tạo tài khoản CodePen thành công

Sử dụng CodePen như thế nào?

Nhấn và chữ Pen để tạo một Pen mới (hình dưới).

picked-pens
Picked Pens

Xuất hiện giao diện mới gồm các tab CSS, HTML, JS => Nhấn Save để lưu => Nhấn Setting để thiết lập các cài đặt => Nhấn Change View để thay đổi cấu trúc giao diện code hoặc biểu tượng bút chì để sửa tiêu đề cho Pen (hình dưới).

giao-dien-moi-gom-cac-tab-css-html-js
Giao diện mới gồm các tab CSS, HTML, JS

 

Nếu muốn code HTML, bạn chỉ cần code trong thẻ body. Khi muốn chèn Script hay Font Awesome Bootstrap bạn chỉ cần nhấn vào Setting, gõ thư viện bạn chọn vào khung tìm kiếm sau đó nhấn Save & Close.

go-thu-vien-ban-chon-vao-khung-tim-kiem-sau-do-nhan-save-close
Gõ thư viện bạn chọn vào khung tìm kiếm sau đó nhấn Save & Close

Khi muốn code TypeScript trong JS hoặc LESS, CSS, PUG, .SASS trong HTML, bạn vào mục Setting => Chọn mục tương ứng là JS/HTML. Thực hiện lần lượt theo hướng dẫn trong các hình dưới đây:

codepen-setting-html
Codepen seting html
codepen-setting-css
Codepen seting CSS
codepen-setting-js
Codepen setings JS

Tab Behavior cho phép bạn thiết lập Spaces hoặc Tabs.

tab-behavior
Tab Behavior

Để chỉnh Theme, Dark, Light Theme,kiểu chữ, kích thước chữ,… hãy click vào Avatar => Chọn Setting => Tùy chỉnh như 2 hình dưới:

codepen-general
Codepen General hình 1

Hình 1

codepen-general
Codepen General hình 2

Hình 2

Khi code xong và lưu lại, nếu bạn muốn xem danh sách các Pen bạn có thể vào mục Dashboard. Tất cả Pen sẽ hiển thị tại đây:

tat-ca-pen-hien-thi-trong-muc-dashboard
Tất cả Pen hiển thị trong mục Dashboard

Khi muốn chia sẻ với người khác, bạn copy link phía trên URL (Link này thường có dạng codepen/username/sdaffjiuewrkjlz) rồi chia sẻ là xong.

Xem thêm thông tin:

Thiết kế UI/UX là gì? Khóa học thiết kế UI/UX – FPT Arena Multimedia

Như vậy, CodePen là nền tảng cho phép bạn viết code trong trình duyệt và kiểm tra kết quả online. CodePen có rất nhiều ưu điểm như cung cấp các tính năng để viết CSS nhanh hơn, hỗ trợ đa ngôn ngữ tiền xử lý của CSS, HTML, JavaScript,… Hãy để lại bình luận bên dưới bài viết nếu bạn muốn biết thêm các thông tin khác về codepen nhé. Đừng quên truy cập arena.fpt.edu.vn mỗi ngày để không bỏ lỡ những bài viết hữu ích khác liên quan đến học thiết kế web, mỹ thuật đa phương tiện,…

Viện Đào Tạo Quốc Tế FPT

FPT Arena Multimedia – https://arena.fpt.edu.vn

Trả lời

Email của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *