I’ve been working through the lessons and enjoying them very much. On this particular lesson the jQuery library and the Animate.css have already been included in the document. How can I use this on my own page when it’s not displayed how they are using it? Is this something I’m going to learn later on? Am I just getting ahead of myself?
Loving this site btw!! 
Yeah, this isn’t really covered much in the program. But there are plenty of resources on the web.
To make matters worse, codepen is great for trying things out, but it kind of divorces you from both the complete files and how they fit together. A more realistic HTML file will look something like:
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
</head>
<body>
/*
* your web page
*/
</body>
</html>
You see the script and link elements in the head section? That’s how you link them into your code. Those are linking to an external site. In some situations you might with to have those files local on your computer, in folders off of your main directory, like this:
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="css/animate.min.css">
<script src="js/jquery.min.js"></script>
</head>
<body>
/*
* your web page
*/
</body>
</html>
This is putting the js file in a folder called js and the css in a folder called css. That’s also where you would put your own css and js files, and how you would link them into your html file.
I recommend spending some time making some simple web pages on your own computer and trying them out. You can copy your js and css into their respective files and folders, Then you just need to copy the html file and put the right header info on it. It will start to help put together the big picture.Don’t worry, it’s pretty easy once you start doing it.
Not necessarily. Many sources recommend putting your script tags at the end of the body, right before </body> so that the page fully loads first. I suppose that is debatable.
Perhaps. I’m just trying to get him started.
I agree with you on that one. It seems like several new programmers here haven’t even attempted to create html, css and js files on their computers. Then they get lost quickly when something doesn’t work on Codepen. They have no sense of how it all ties together.
Thanks ksjazzguitar! That’s what I’ve been doing, creating my own HTML and CSS locally so I know how it all ties together. I don’t like when things are hidden. I want to know how to put this all together in the real world. Thanks for explaining!
I guess maybe I should start using codepen more?
You’re doing fine. I think the problem is that for those who have never done any web dev work at all prior to joining here and don’t use any other learning source end up doing everything on Codepen without even knowing the basics of how a full HTML document works. I have seen many posts where the question referred to problems with Bootstrap & JQuery not working, because they didn’t have a concept of how it all ties together. I’m not blaming them; we’re immediately thrown on Codepen upon joining. Codepen could be called Co-depend. It does a lot for you with simple button clicks.
Gotcha. Sorry. Well done.
Codepen is a tool. A great tool. It is a little playpen for you to try out frontend ideas. But to make your life a little easier it does some things automatically for you, namely how it connects the files together and the html header info.
It’s not that difficult - it will take a few minutes to get started and after a few web pages you’ll have it all. The problem is a lot of beginners who don’t realize that codepen is doing a little of the work behind the curtain and therefore are confused when they have to hand code a web page.
But codepen is a great learning tool.
Personally, I have given up on CodePen. I write my code on my own computer (using Brackets) and get it working great. I move it over to CodePen and I almost have to rewrite things to get back where I was with my own editor.
I still use codepen if I want to quick and dirty test some javascript algorithm like if I’m working on a code wars problem or answering a question here. But I don’t really use it to build sites.
Thanks alot guys!