Develop Reference

Recreating a webpage by copy-pasting?

I’m new to the world of HTML. I wanted to create a local copy of the website I wanted to play around with by copying, pasting and saving the HTML source, as well as saving the webpage (with all the CSS, javascript, .ico elements etc.) and placing the HTML file in the same directory. However, when I opened up the HTML file, it was broken, and all styles were gone. Why is this so? Sincere apologies if this is a repeat, I didn’t really know what to search when looking for an answer. Thank you!

Without going into too much detail - Most modern websites are incredibly complex (JS, CDNs, webfonts, crossdomain content, etc etc) and are unlikely to look like anything reasonable when 'copy and pasted' to a local location.
If you're using Chrome I'd try the More Tools -> Save Page As feature which is slightly smarter about preserving dependencies, and even then it might not work very well.
Your best bet is to analyze the site inside of the browser, e.g. Chrome's Developer Tools and apply your learnings to a local stack you create from scratch.

It's kind of impossible to know what's going on without seeing the code or what (if any) errors are being produced by your browser.
I would suggest opening the JavaScript console in your browser to see if there are any errors. I could guess that the JS and CSS files are being referenced with an absolute path, and because you're serving them form the filesystem you need a relative path. But like I said, you're just going to have to debug this yourself.

The html file doesn't always contain everything it needs to render the page. Often css is stored in external files. The html file you copied should have a reference to the css that looks like.
<link rel="stylesheet" href="styles.css" >

It sounds like the stylesheets / scripts in the copied html are pointing to files that don't exist in your copied environment.
Could you post the way you have the files structured?
It could be that you have the filesystem set up differently than in the original webpage, ex/
wwwroot/
|-- index.html (which has stylesheet references to "css/styles.css")
|-- app.js
|-- styles.css
^ here the index.html file would be looking for styles.css in a folder called "css", but the styles.css file is not in that location.
(I'm aware this is not an actual answer, and may be more appropriate as a comment. I don't have enough reputation for commenting, so my apologies if I'm not following the StackOverflow ways of doing things.)

This could be the issue ideally because of the use of the external resources which are being used in that webpage and are not present on your local system.
You can check it from the developer console in chrome or whichever browser you are using.
Press F12 while viewing the webpage, this will open the Developer Tools
Click on the Console tab, here you can see all the errors and warnings that can cause any issue to that page.
Refer to the screenshot for the process:
You will be able to see errors in red color and warnings in orange color.

How to find source of dlls and js files?

I'm building a Powershell script to find the source of dlls and js files. This is to keep track of internal and external code.
So far for dlls, I've come up with $dll.VersionInfo.LegalCopyright which works if they provide copyright information. (e.g. Microsoft, Twitter, Google, Company, etc)
If there's a better way, do tell.
However, I'm stumped on JS files. For most cases, the js file will be just jQuery but not always.
JS files aren't compiled so there isn't anything I can scrape from. Maybe inside the file? Is there a pattern/convention that developers sign js files with that I can try to match?

Thinking about it further, this seems like a far-fetched endeavor. There is no way to generalize all the signing conventions of everyone. For the time being, I'll just separate js into Jquery and Other, seeing as how 90% of the js files seem to be Jquery.

External javascript files not loading properly in Firefox, or sometimes not at all

I'm having a weird issue that I can't seem to figure out by looking at the developer tools. All of my javascript files seem to be loading when I look at the 'network' tab in Firefox, but every time I refresh it seems (quite randomly) one or two of my javascript files will not be functioning properly.
I am super confused as to what could be causing this. I am loading all my <script> tags at the bottom of my html document before the closing </body> tag. Is there somewhere else I should be loading them for firefox? When I test this on my dev server everything loads fine, but when I upload it to AppEngine some of my js files just choose not to load.
Is there some weird thing with timeouts or loading order for firefox that I should be aware of? Or some random setting that I have turned off somewhere? I can't seem to find any documentation on the matter, either, so any links to reading would be appreciated.
Thanks!

To be clear, this isn't Firefox specific issue, FF just happens to be the browser that you are encounter it in. This is a common issue when loading js assets at runtime.
tl:dr
If you are loading assets from different locations that can cause runtime inconsistencies, shoot, even if you are requesting two separate assets from the same location you can run into issues since they are occurring in separate requests and are subject to network performance.
Option One:
Consolidate the js assets that are being render inconsistantly.
So if you're loading the following:
jquery.js
script-one.js
script-two.js
Then concat them into one asset:
jquery.js
scripts.js
Option Two:
Use a module system like require or browserify.
Longer Answer
If you are loading assets into the browser at runtime that require each other to be loaded in order to function there will always be a certain degree of risk if you aren't using any sort of module loader or build process to mitigate the solution.
Say you have to following situation
You have jquery and three plugins which needs to be loaded in a particular order. Just because you have your tags stacked in a particular order doesn't guarantee that is the order they will be available at runtime. Take the following:
<script src="jquery.js"></script>
<script src="modal.js"></script>
<script src="widget.js"></script>
Its very possible that these could load jquery > widget > modal, then jquery > modal > widget on the next. It might seem like someone is messing you, but that's just the world wide webs doing its thing. As I stated above there are common ways to solve this problem that are already well vetted and I suggest looking into them. This is also one of the main features on ES6 that people are VERY excited to for.
Hope that clears up your FF gremlins! Cheers.

How to show the animation without exposing the code?

There's an animation done in jQuery within jsfiddle. I do not have a website as of now to "implant" it and share the URL.
I also can't give the jsfiddle. So how can I share my animation to the audience without showing the code? Does github or any other facility tools allow locking the code and showing the final product without having a website, yet I could get a URL for the audience to view it?
I regret for the rookie-question in this context as I am still new to web stuff.
EDIT:
jsFiddle shows 3 code windows along the results :html, css, js. My requirement is to only show the results window to the audience and by all means to hide codes and leads via URL to the codes.
Ideal solution demands a results to be shown and URL that is encrypted (at best).

If I understand your question you could try the following:
Copy your jsfiddle text to a single index.html file (use script tag for js and style tag for css)
Install node.js on your development computer
Install a tool to obfuscate your file (e.g. npm install -g munch)
Obfuscate your file (see instructions https://www.npmjs.org/package/munch)
Host your file somewhere (could be a github project page with a repository containing only the obfuscated file - although its not really the point of github).
Send url to audience
Someone could still reverse engineer your animation but it would take a lot of effort and would probably be easier to write from scratch.
However, perhaps you would be better off doing a screen cast and sharing a youtube link.

The thing you're asking for is simply not possible.
JavaScript is a client-side scripting language and is interpreted by the browser of the viewer of your animation. This means that, by the nature of the language, the viewer needs the code loaded in his/her browser to view your animation.
More in-depth information can be found here: http://computer.howstuffworks.com/javascript.htm
The only way you could achieve your goal is by screen capturing the animation, but that would, of course, only work with static animations.

Now that you've clarified your question, we can give you an actual answer.
Click the Share button in jsFiddle's toolbar (after saving your fiddle) to get a link to the result only.

If you don't want users to see your code do this in your html code:
<body oncontextmenu="return false;">

Referencing javascript embedded resource but intellisense doesn't show anything

I'm stuck... I'm trying to reference a javascript file that has been embedded inside a third party assembly, but it doesn't seem to work:
What I've done:
I have a folder RefAssemblies where this library DLL with embedded javascript file is located
I added a project reference and pointed to this library assembly
I added a line in my javascript file where I want the reference to work ie.
/// <reference name="ScriptName.js" assembly="AssemblyName" />
I tried naming my assembly with name only, and also with full assembly name including name, version, culture and public key token. No difference.
Added my library assembly to my project's web.config inside system.web\assemblies (AFAIK that's the part where you have to add your assembly and make it well-known in your application) so I should be able to access it without referencing assembly at all just resource name. No difference.
And yes I was pressing the Ctrl+Shift+J after any change I've done so Visual studio refreshed Javascript intellisense cache. I even unloaded and reloaded my web project after I changed web project's web.config. Just so that Visual Studio would read the file and reload everything anew.
But still unlucky... And I'm not getting any Javascript Intellisense errors in the General output window either...
I must be missing something...
Additional note:
It may be helpful to know that I'm running ReSharper 6.1.1000.82 within Visual Studio 10.0.40219.1
Other things I've done afterwards
Uninstalled ReSharper from my machine
Reset Visual Studio by running it from command prompt using
devenv /ResetSettings
No luck either.
Do you have any other suggestions I might do?

I'm also having odd problems with embedded resources. I have managed to get it working though by using the fully qualified resource name. You can find that out by using ilspy to open the assembly and then select the Resources folder, then the full name of all the resources will be displayed.
As i said i have gotten this to work in one solution, but in others it doesnt work and i have no idea why.. the non working solution has a diffrent structure where the diffrent assemblies are in diffrent folders, but i have nto been able to isolate that as the cause..
-edit-
After much trial and error it seems like the key thing to making embedded javascript references work is to set the output folder for the project containing the reference to bin and not bin\debug.
from what i can gather, there are no other settings or assembly references that affect the embedded resources, only the output folder of the project that has the reference. i'm guessing that the javascript language service is unable to find the assemblies with embedded resources unless they are in the private path or the gac, but i have yet do understand exactly where this binpath is set.
i've tried setting it on the project itself and on what i think is the actual language service exe, but to no avail.
i made a connect issue here:
https://connect.microsoft.com/VisualStudio/feedback/details/770185/js-references-to-embedded-files-require-the-referencing-project-to-have-outputpath-bin