I want to do the equivalent of adding Bootstrap, Javascript & jQuery but not in CodePen.
In Codepen I go to settings and load them, here:
How do I do this when using a text editor? Do I put the calls in the head section?
And what are the calls, are they all done like this?
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css”/> <p>Just substitute the cdn location?</p> <p>Confused.</p>Yes. in the head section.
bootstrap is like …
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
jquery…
src="https://code.jquery.com/jquery-3.2.1.js"
integrity="sha256-DZAnKJ/6XZ9si04Hgrsxu/8s717jcIzLy3oi35EouyE="
crossorigin="anonymous"></script>```
don't put ```<p>``` tags in head though.Usually the script tags are placed at the bottom of your html:
<html>
<head>
<!-- CSS links -->
</head>
<body>
<!-- Your HTML -->
<!-- script tags -->
</body>
</html>
This way all your HTML is displayed before jQuery etc is loaded.
Thank you @pompan129 and @MarkoN95 - I suspected that Codepen just appends the html and head tags. Thank you.
Here is what I have done in sublime.
(where I have downloaded local Bootstrap)
I still don’t understand where to put the script - BenGitter (sorry I can’t mention you) , you said after the html toward the bottom, but when we were going through the lessons in Free Code Camp, the script tags were put at the top? Or am I making that up?
So, would I put this right before the body closing tag?
<script src="js/bootstrap.min.js"></script>
And this would only load the javascript necessary for bootstrap to work property?
For jquery I would need:
'<script
src="https://code.jquery.com/jquery-3.2.1.min.js"
integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="
crossorigin="anonymous"></script>'
???
They were most likely placed above your own code. So order is very important, you will first have to add jQuery and then your own code (if your code uses jQuery of course).
The idea of placing your scrip tags just above </body> is to have the browser render your HTML without it waiting for the scripts to download. So the JS isn’t run any faster, but the user does have a nice site to look at faster.
There seems to be a newer, better solution:
I hope I didn’t confuse you 
Anyway don’t bother too much about it as long as it works…
Very helpful - thank you @BenGitter!!
So load jquery at the top since it needs it to render the page.
Then load javascript later, but regardless as long as it work no conflicts move on - and I"ll have a read of the Stack Overflow article now.
Sorry, I worded that incorrectly. You can definitely load jQuery at the bottom (just above </body>, but above your own code:
...
<body>
<!-- Your HTML -->
<script src="jquery_source.js"></script>
<script src="your_code.js"></script>
</body>
</html>
Below your HTML (in body) and above script tag to your own JS code.
You need put the stylesheet on head section and the javascript on bottom inside body.
As i know, js on bottom improve page speed.
@hejira42 If you already have an existing codepen, just click export in bottom right corner of your codepen. Download the zip and extract. Then open that folder as a project with your code editor. Bootstrap, jQuery and any other library or framework that you’ve used in your codepen will be added automatically.
That said. The slow and cumbersome way of manually adding and typing what you need is of course better for learning and retaining.
BTW it’s not a dumb question at all.
Love it - I am now watching that discussion and am going to watch the first video there. Thanks @adityaparab 
@Magwit I love that idea, and I tried it.
I know that in Settings in CodePen I loaded Bootstrap 3.3.7, jQuery and JS, but I don’t see it in the exported index.html:
@hejira42 That’s curious. Can you add a link to your codepen here please? I’ll export it to my local machine and test how the exported page actually looks compared with the pen…
I exported your project to my machine and it looks different from your screenshot. But I think it is better to start with looking at your codepen first. Note how you use an internal style sheet.on the html page. Even thought it works it far from optimal, and it creates some very odd tags when exported to a project.
You will be working mostly with external stylesheets anyway so this is a right moment to learn how to use them. Try this. Remove the style tags entirely and add the styling to the css sheet instead. in you codepen. This is what I did on my tribute page .
Let me know when you’re done and we’ll look at exporting the project after that.
Yes - I do see those weird tags on export. I thought it had to do with codepen styling, not my internal styling in the head.
That’s frustrating. When going through the first unit in FCC we used <style> in the head of the HTML page. And you’re right, I do want to learn the things that codepen is making hard to see, yet easy to use.
I’ll fix this tomorrow and we’ll have another look.
Thank you, @Magwit ! 
Hope you understood my accent 
@Magwit Soooo much better - I see where Bootstrap, jQuery & Javascript calls are placed - a little funny there’s 2 </body> tags?
Here’s the link to the pen: http://codepen.io/melinda_eve7/pen/GmGamY
