Show Đã đăng vào thg 6 22, 2016 11:43 CH 3 phút đọc 3 phút đọc Codepen là một trang web siêu dễ dàng và phổ biến để code Front-end online ( HTML, CSS, Javascript).  Có một vài OSCP ( online source code playground ) khác tương tự Codepen như JSFiddle, JS Bin, CSSDeck & Dabblet, tuy nhiên Codepen chắc chắn là một trong những OSCP nổi tiếng nhất mà những lập trình viên front-end hay sử dụng. Sau đây là một vài lời khuyên cơ bản và hữu ích cho việc sử dụng Codepen. 1.Run buttonCodepen sẽ tự động refreshing khi bạn đang code, nếu bạn không thích điều này hãy bỏ chọn option "Auto Update Preview" và bạn sẽ thấy nút Run thay thế. fi bạn click vào nút Run này, bạn sẽ nhìn thấy ngay kết quả của mình tại khung hiển thị kết quả. 2. Number Increment/DecrementTăng hoặc giảm số trong code của bạn mà không cần gõ lại số mới bằng cách bôi đen số cần thay đổi và sử dụng phím Crtl / Cmd và mũi tên lên xuốngCrtl / Cmd và mũi tên lên xuống 3. Multiple CursorsBạn gõ thể đặt con trỏ tại nhiều vị trí trong code, sau đó chỉnh sửa vào tất cả những điểm đó cùng một lúc. Chỉ cần giữ phím Crtl / Cmd khi nhấp vào nhiều điểmCrtl / Cmd khi nhấp vào nhiều điểm 4. Different Colored Console MessagesCodepen cung cấp cho bạn giao diện điều khiển console riêng giúp bạn không cần phải dùng đến browser's console. Bạn có thể mở nó bằng cách nhấp chuột vào nút console trên thanh taskbar phía dưới. 5. ExportSau khi save bạn có thể xuất code của bạn ra file ZIP, nó sẽ chứa tất cả code HTML, CSS và Javascript của bạn bằng cách nhấp vào nút export phía dưới bên phải màn hình ( sau khi đã đăng nhập ). 6. Find & ReplaceBạn có thể tìm và thay thể trong Codepen bằng cách dùng tổ hợp phím:
7. Emmet Tab TriggerBạn có thể dùng Emmet trên Codepen, cách sử dụng cũng giống như Emmet trên Sublime text. 8. Get Individual Code FilesPhần 5 đã hướng dẫn bạn cách export toàn bộ code ra file ZIP, tuy nhiên nếu bạn không muốn xuất hết tất cả files mà chỉ muốn xuất file theo ý muốn, bạn có thể nhấp vào nút Change View ở góc trên bên phải, bạn có thể nhìn thấy các liên kết tải xuống cho các file riêng lẻ Hy vọng những lời khuyên này có ích cho bạn. Cám ơn các đã quan tâm ! Nguồn tham khảo : http://www.hongkiat.com/blog/codepen-tips-beginners/ All rights reserved 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à 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ìnhcodepen.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.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.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.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ẻ 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ẻ 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é.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 đâyDashboard 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.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. See the Pen Weekly UI – Single Product Shoes by EvonDev (@evondev) on CodePen. # Kết luậnNhư 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é.. |
