Mẹo CodePen và thực hành tốt nhất

Khi làm việc tại FCC, sẽ có lúc bạn tạo các dự án của riêng mình với CodePen. Các trại viên muốn chia sẻ các dự án này trên Diễn đàn Trại Mã miễn phí để nhận phản hồi từ các Trại viên khác.

Hôm nay, tôi sẽ chỉ cho bạn cách tận dụng tối đa CodePen và cách tối đa hóa phản hồi của bạn trong Diễn đàn FCC.

Nhận túi ngủ và kẹo dẻo của bạn. Ồ, và đừng quên lấy lại Yeti Cool của bạn từ con gấu đã lấy trộm nó khi bạn đang ngủ! Chúng tôi đang đi lang thang để học một vài điều.

Sắp xếp mã của bạn trong CodePen

Khi làm việc với CodePen lần đầu tiên, tôi nhớ có tất cả mã của mình trong phần HTML của Bút. Giống như hình ảnh bên dưới, tôi có tất cả nội dung HTML, CSS và của mình.

Hoàn toàn không có gì sai khi xây dựng trang web của bạn như thế này. Nhưng, trong CodePen có nhiều cách để làm sạch mã của bạn để làm cho nó trở nên ngăn nắp và dễ đọc hơn bởi những người khác đang giúp bạn hoặc chỉ đơn giản là kiểm tra dự án tuyệt vời của bạn.

Bạn có thể mở bút này trong một tab khác bằng cách nhấn vào đây. Điều này sẽ cho phép bạn chơi xung quanh với mã và làm theo.

Hãy loại bỏ một số thứ

Chúng tôi không cần những đoạn mã này vì CodePen tự động đưa chúng vào dự án của chúng tôi.

Thực hiện theo các bước sau để đặt đúng nội dung đầu của bạn vào nơi cần đến trong CodePen.

Hãy để di chuyển nội dung meta và phông chữ google của chúng tôi đến phần Stuff cho của CodePen.

Dưới đây là một ảnh chụp mã giữa các thẻ đầu. Bạn chỉ nên di chuyển mã mà tôi có in đậm.

<đầu>
 
  Trang công ty chủ đề Bootstrap </ title>
 <meta charset = xông utf-8 ">
 <meta name = chế độ xem viewport Nội dung của người hâm mộ = chiều rộng = chiều rộng thiết bị, tỷ lệ ban đầu = 1 ">
 <link rel = phong cách phong cách trực tuyến href = = http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css ">
 <link href =, http://fonts.googleapis.com/css?family=Montserrat "rel = Thẻ styleheet Kiểu loại = văn bản / css
 <link href =, http://fonts.googleapis.com/css?family=Lato "rel = Phong cách biểu hiện kiểu chữ = văn bản / css Lỗi>
 </body></html>