codepen

by Michael Henderson

通过迈克尔·亨德森

CodePen技巧和最佳实践 (CodePen Tips and Best Practice)

When working in FCC there are going to be times when you create your own projects with CodePen. Campers like to share these projects on the Free Code Camp Forum to receive feedback from other Campers.

在FCC中工作时，有时会使用CodePen创建自己的项目。营员喜欢在“ 免费代码营”论坛上分享这些项目，以接收其他营员的反馈。

Today, I am going to show you how to get the most out of CodePen and how to maximize your feedback within the FCC Forum.

今天，我将向您展示如何充分利用CodePen，以及如何在FCC论坛中最大化您的反馈。

Get your sleeping bag and marshmallows. Oh, and don't forget to get your Yeti Cooler back from that bear who stole it while you were sleeping! We are going on a hike to learn a few things.

拿起你的睡袋和棉花糖。哦，别忘了从睡觉时偷走它的那只熊取回雪人冷却器！我们要去远足学习一些东西。

在CodePen中组织代码 (Organizing Your Code In CodePen)

When working with CodePen for the first time I remember having all of my code in the HTML section of my Pen. Just like the image below I had my HTML, CSS, and <head> content all in one spot.

第一次使用CodePen时，我记得我的笔HTML部分中包含了所有代码。就像下面的图片一样，我HTML，CSS和<head>内容全部集中在一个位置。

There is absolutely nothing wrong with building your website like this. But, in CodePen there are ways to clean up your code to make it more organized and readable by others who are helping you or simply checking out your awesome project.

像这样构建您的网站绝对没有错。但是，在CodePen中，有一些方法可以清理您的代码，以使其他人在帮助您或者只是检查您的出色项目时更加井井有条，可读性强。

You can open this pen in another tab by clicking here. This will allow you to play around with the code and follow along.

您可以通过单击此处在另一个标签中打开此笔。这将使您可以试用代码并继续学习。

让我们删除一些东西 (Let's Remove Some Things)

<!-- Remove The Following Lines of Code From The Html Section -->

<!DOCTYPE html>

<html lang="en">

</html>

We do not need these pieces of code because CodePen automatically injects them into our project.

我们不需要这些代码，因为CodePen自动将它们注入到我们的项目中。

请按照以下步骤将您的头部内容正确放置在CodePen中。 (Follow these steps to properly place your head content where it needs to go in CodePen.)

Let’s move our meta content and google font links to the Stuff For <head> part of CodePen.

让我们将元内容和google字体链接移动到CodePen的Stuff For <head>部分。

Here is a snapshot of the code between the head tags. You should only move the code that I have in bold.

这是head标签之间代码的快照。您应该只移动我用粗体显示的代码。

<head>  <! — Theme Made By www.w3schools.com — No Copyright --> <title>Bootstrap Theme Company Page</title> <meta charset=”utf-8"> <meta name=”viewport” content=”width=device-width, initial-scale=1"> <link rel=”stylesheet” href=”http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"> <link href=”http://fonts.googleapis.com/css?family=Montserrat" rel=”stylesheet” type=”text/css”> <link href=”http://fonts.googleapis.com/css?family=Lato" rel=”stylesheet” type=”text/css”> <script src=”https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script> <script src=”http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> <style> body { font: 400 15px Lato, sans-serif; line-height: 1.8; color: #818181; } h2 { font-size: 24px; text-transform: uppercase; color: #303030; font-weight: 600; margin-bottom: 30px; } h4 { font-size: 19px; line-height: 1.375em; color: #303030; font-weight: 400; margin-bottom: 30px; }  .jumbotron { background-color: #f4511e; color: #fff; padding: 100px 25px; font-family: Montserrat, sans-serif; } .container-fluid { padding: 60px 50px; } .bg-grey { background-color: #f6f6f6; } .logo-small { color: #f4511e; font-size: 50px; } .logo { color: #f4511e; font-size: 200px; } .thumbnail { padding: 0 0 15px 0; border: none; border-radius: 0; } .thumbnail img { width: 100%; height: 100%; margin-bottom: 10px; } .carousel-control.right, .carousel-control.left { background-image: none; color: #f4511e; } .carousel-indicators li { border-color: #f4511e; } .carousel-indicators li.active { background-color: #f4511e; } .item h4 { font-size: 19px; line-height: 1.375em; font-weight: 400; font-style: italic; margin: 70px 0; } .item span { font-style: normal; } .panel { border: 1px solid #f4511e;  border-radius:0 !important; transition: box-shadow 0.5s; } .panel:hover { box-shadow: 5px 0px 40px rgba(0,0,0, .2); } .panel-footer .btn:hover { border: 1px solid #f4511e; background-color: #fff !important; color: #f4511e; } .panel-heading { color: #fff !important; background-color: #f4511e !important; padding: 25px; border-bottom: 1px solid transparent; border-top-left-radius: 0px; border-top-right-radius: 0px; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; } .panel-footer { background-color: white !important; } .panel-footer h3 { font-size: 32px; } .panel-footer h4 { color: #aaa; font-size: 14px; } .panel-footer .btn { margin: 15px 0; background-color: #f4511e; color: #fff; } .navbar { margin-bottom: 0; background-color: #f4511e; z-index: 9999; border: 0; font-size: 12px !important; line-height: 1.42857143 !important; letter-spacing: 4px; border-radius: 0; font-family: Montserrat, sans-serif; } .navbar li a, .navbar .navbar-brand { color: #fff !important; } .navbar-nav li a:hover, .navbar-nav li.active a { color: #f4511e !important; background-color: #fff !important; } .navbar-default .navbar-toggle { border-color: transparent; color: #fff !important; } footer .glyphicon { font-size: 20px; margin-bottom: 20px; color: #f4511e; } .slideanim {visibility:hidden;} .slide { animation-name: slide; -webkit-animation-name: slide; animation-duration: 1s; -webkit-animation-duration: 1s; visibility: visible; } @keyframes slide { 0% { opacity: 0; -webkit-transform: translateY(70%); }  100% { opacity: 1; -webkit-transform: translateY(0%); } } @-webkit-keyframes slide { 0% { opacity: 0; -webkit-transform: translateY(70%); }  100% { opacity: 1; -webkit-transform: translateY(0%); } } @media screen and (max-width: 768px) { .col-sm-4 { text-align: center; margin: 25px 0; } .btn-lg { width: 100%; margin-bottom: 35px; } } @media screen and (max-width: 480px) { .logo { font-size: 150px; } } </style></head>

Click the settings button.点击设置按钮。

2. Click HTML.

2.单击HTML。

3. Paste the content into Stuff for <head>. Once you are done click Save & Close.

3.将内容粘贴到用于<he ad>的Stuff中 。完成后，单击“保存并关闭”。

现在让我们将CSS移到应该去的地方 (Now let's move our CSS where it supposed to go)

Copy everything between your opening and closing styles tag and paste it into the CSS section.复制打开和关闭样式标签之间的所有内容，并将其粘贴到CSS部分中。

Your HTML and CSS are now separated. This makes for an organized and efficient working environment. Please note: You do not have to put <styles> tags in your CSS section.

您HTML和CSS现在分开了。这提供了一个有组织的有效工作环境。请注意：您不必在CSS部分中放入<styles>标记。

将Bootstrap样式表添加到项目中 (Adding The Bootstrap Stylesheet To Your Project)

Click Settings.单击设置。
Click CSS.

单击CSS。

3. Click the drop down arrow at the bottom where it says “Quick-add” and select bootstrap. It will add it to your external CSS links.

3.单击底部显示“快速添加”的下拉箭头，然后选择引导程序。它将添加到您的外部CSS链接。

Quick Tip: You can also add Font Awesome as an external style sheet. Read the content under Add External CSS.

快速提示：您也可以将Font Awesome添加为外部样式表。阅读添加外部CSS下的内容。

添加JavaScript (Adding JavaScript)

Still in settings, click JavaScript.

仍在设置中，单击JavaScript。

2. Click the “Quick-add” drop down menu and add jQuery and Bootstrap.

2.单击“快速添加”下拉菜单，然后添加jQuery和Bootstrap。

3. Click Save & Close.

3.单击保存并关闭。

从HTML部分移走我们JavaScript (Moving Our JavaScript from the HTML section)

Scroll to the bottom and copy the javascript code between your script tags.滚动到底部，然后在脚本标签之间复制javascript代码。

<script>$(document).ready(function(){ // Add smooth scrolling to all links in navbar + footer link $(“.navbar a, footer a[href=’#myPage’]”).on(‘click’, function(event) { // Make sure this.hash has a value before overriding default behavior if (this.hash !== “”) { // Prevent default anchor click behavior event.preventDefault();

// Store hash var hash = this.hash;

// Using jQuery’s animate() method to add smooth page scroll // The optional number (900) specifies the number of milliseconds it takes to scroll to the specified area $(‘html, body’).animate({ scrollTop: $(hash).offset().top }, 900, function(){  // Add hash (#) to URL when done scrolling (default click behavior) window.location.hash = hash; }); } // End if });  $(window).scroll(function() { $(“.slideanim”).each(function(){ var pos = $(this).offset().top;

var winTop = $(window).scrollTop(); if (pos < winTop + 600) { $(this).addClass(“slide”); } }); });})</script>

2. Paste it in the JavaScript section.

2.将其粘贴到JavaScript部分。

整理起来 (Finishing up)

Now that your HTML, CSS, and JavaScript are separated out, you have a more organized working environment within CodePen. This also makes it easier for others to help you in the Free Code Camp Forum, because they can locate your code and easily diagnose any errors. Play around in the CodePen settings and see what else you can do.

现在，您HTML，CSS和JavaScript已分离出来，您将在CodePen中拥有一个更有条理的工作环境。这也使其他人可以更轻松地在Free Code Camp论坛中为您提供帮助，因为他们可以找到您的代码并轻松诊断任何错误。在CodePen设置中玩转，看看还能做什么。

Next time you build a project in CodePen you will know how to add stylesheets, where to properly place <head> content, how to add a JavaScript library, and how to separate your HTML, CSS, and JavaScript. I hope this helps!

下次在CodePen中构建项目时，您将了解如何添加样式表，正确放置<head>内容的位置，如何添加JavaScript库以及如何分隔HTML，CSS和JavaScript。我希望这有帮助！

I also have a video explaining how to do some of this too.

我也有一个视频解释如何也做一些。

Happy coding my friends!

祝我的朋友编码愉快！

If you liked this article, please let us know down in the comments.

如果您喜欢这篇文章，请在评论中告知我们。

Also, feel free to checkout my YouTube channel where I do cool stuff like review projects and share my life as a Software Engineer.

另外，请随时查看我的YouTube频道，我在那里做一些很棒的事情，例如审查项目，并分享我作为软件工程师的生活。

翻译自: https://www.freecodecamp.org/news/codepen-tips-and-best-practice-cf926ebd0b11/