codepen – Thiết kế web Center http://thietkeweb.center Mon, 07 Nov 2016 04:04:11 +0000 vi hourly 1 10 lời khuyên cho người mới bắt đầu với Codepen http://thietkeweb.center/10-loi-khuyen-cho-nguoi-moi-bat-dau-voi-codepen/ Thu, 28 Jul 2016 10:44:32 +0000 http://45.76.186.148/?p=690 Codepen là một trang web siêu dễ dàng và phổ biến để code Front-end online ( HTML, CSS, Javascript).. Nếu bạn không biết gì về Codepen hoặc vẫn chưa nghe nói gì về nó trước, về cơ bản nó là một sân chơi mã nguồn trực tuyến cho các front-end mã hóa; HTML , CSS và […]

The post 10 lời khuyên cho người mới bắt đầu với Codepen appeared first on Thiết kế web Center.

]]>
Codepen là một trang web siêu dễ dàng và phổ biến để code Front-end online ( HTML, CSS, Javascript).. Nếu bạn không biết gì về Codepen hoặc vẫn chưa nghe nói gì về nó trước, về cơ bản nó là một sân chơi mã nguồn trực tuyến cho các front-end mã hóa; HTML , CSSJavaScript . Codepen được xem là một trong những nhà phát triển Front – end nổi tiếng nhất hiện nay, nhiều người thường lựa chọn Codepen để làm nguồn hỗ trợ đắc lực cho mình khi thiết kế web. Ở bài viết này chúng tôi sẽ đưa ra cho các bạn 10 lời khuyên cho người mới bắt đầu với Codepen

Codepen1. Run Button

Nếu bạn không muốn kết quả đầu ra mã của bạn trong Codepen bị làm mới lại trong khi đang nhập thì bạn có thể thoát khỏi tùy chọn “Auto Update Preview” , và nhận được một nút ” Run ” thay thế. Khi bạn nhấp vào nó, bạn sẽ có thể xem và cập nhật kết quả đầu ra mã của bạn bất cứ khi nào bạn muốn .

Đây cũng là một lựa chọn tuyệt vời nếu bạn đang làm việc với một mã đầu ra mà đi qua rất nhiều thay đổi bố cục , và vẽ lại mỗi khi nó được cập nhật, dẫn đến sự chậm chạp.

codepen-tip-show-run-btn (1)

2. Số tăng / giảm dần

Tăng hoặc giảm số trong mã của bạn trong Codepen mà không cần gõ vào các con số mới . Tất cả những gì bạn phải làm là sử dụng kết hợp các phím Ctrl / Cmd , mũi tên Up và Down

codepen-tip-number-incdec

3. Nhiều Cursors

Bạn có thể đặt con trỏ tại nhiều điểm trong mã nguồn , sau đó gõ hoặc chỉnh sửa vào tất cả những điểm cùng một lúc . Điều này chỉ hoạt động nếu bạn đăng nhập vào các thông tin tương tự, và làm giảm nhu cầu sao chép-dán. Chỉ cần giữ Ctrl / Cmd trong khi nhấp vào nhiều điểm.

codepen-tip-multiple-cursors

4. Tin nhắn Bảng điều khiển màu khác nhau

Bạn có thể sử dụng info(), warn() error()các phương pháp thông tin ,cảnh báolỗi . Thông thường, web game tô màu những tin nhắn kiểu khôn ngoan, hoặc sẽ hiển thị một biểu tượng thích hợp bên cạnh họ (giống như một dấu hiệu cảnh báo cho các thông điệp cảnh báo) công nhận dễ dàng hơn .

Codepen có giao diện điều khiển riêng của mình mà bạn có thể mở bằng cách nhấp vào nút Bảng Điều Khiển ở góc dưới bên trái. Đó là điều kiện lý tưởng để kiểm tra nhanh chóng các thông điệp điều khiển mà không cần phải mở giao diện điều khiển của trình duyệt . Giao diện điều khiển này phân biệt các loại khác nhau của các thông điệp giao diện điều khiển với màu nền khác nhau .

codepen-tip-colored-console-msgs

5. Xuất tập tin

Sau khi đã lưu (một thực thể Codepen duy nhất) có thể được xuất như là một tập tin ZIP với tất cả trong HTML, CSS và mã JS trong các tập tin. Ngoài ra còn có một tùy chọn để lưu như một Github (Git) chính. Bạn có thể tìm thấy những nút ” Export ” ở góc dưới bên phải của mỗi cây bút.

codepen-tip-export

6-Tìm & Thay thế

Tìm & Thay thế  là một hoạt động thiết yếu cho folks – những người mà có xu hướng đổi tên tên biến của cả bây giờ và sau này. Ctrl / Cmd + Phím Shift + F là phím kết hợp để mở hộp thoại “Tìm & Thay thế”.

codepen-tip-find-and-replace

7. Kích hoạt Emmet Tab

Emmet là một công cụ hiệu quả cho các nhà phát triển front-end cho phép bạn gõ mã cốt lõi mà sau này được mở rộng thêm . Để làm điều này trong Codepen, chỉ cần nhanh chóng gõ tên viết tắt phù hợp vào trình soạn thảo, nhấn Tab chính, và các mã hoàn chỉnh xuất hiện cùng một lúc. Chỉ có sẵn cho HTML trong Codepen.

codepen-tip-tab-trigger

8. Nhận Mã số tập tin cá nhân

Nếu bạn sử dụng tùy chọn ” Export” như đã đề cập trước đó, bạn sẽ nhận được tất cả ba tập tin (HTML, CSS và JS) của ngòi bút. Nhưng nếu bạn quan tâm đến chỉ có một hoặc hai trong số các tập tin , và muốn tải về chúng riêng rẽ, cũng sẽ có một tùy chọn như vậy trong Codepen.

Sau khi đăng nhập vào Codepen và click vào Xem nút Change ở góc trên bên phải. Ở dưới cùng của danh sách thả xuống, bạn sẽ thấy các liên kết tải về trực tiếp cho các tập tin cá nhân .

codepen-tip-export-indivudual-file

9. Kiểm tra biến JavaScript

Codepen của bảng điều khiển JavaScript kết nối với JavaScript lưu trong bút của bạn, bạn cũng có thể sử dụng nó để nhanh chóng kiểm tra JavaScript. Tính năng này đặc biệt tiện dụng trong việc kiểm tra các biến JS , như cách này bạn không cần phải chèn thêm giao diện điều khiển hoặc tin nhắn cảnh báo vào mã ban đầu chỉ duy nhất cho mục đích thử nghiệm.

codepen-tip-inspect-js-var

10. Turn Pen to Template

Nếu bạn có xu hướng bắt đầu các pens của bạn với cùng một mã , bạn có thể sử dụng một mẫu để save những mã code đang lặp lại . Để turn pen to template, đánh dấu vào tùy chọn Template trong menu Settings. Sau đó bạn tạo ra một pen mới, bạn có thể bắt đầu với mẫu lưu của bạn bằng cách nhấn vào mũi tên xuống ở phía bên phải của New Pen nút. Nó sẽ mở ra một danh sách thả xuống với tất cả các mẫu lưu của bạn để lựa chọn.

codepen-tip-template

The post 10 lời khuyên cho người mới bắt đầu với Codepen appeared first on Thiết kế web Center.

]]>