How can I practice what I learn from Codecademy in my browser using Notepad?

I am looking to practice html css using my browser and notepad

I mean you could create the file type your creating like for Javascript a .js file. And then work on it. After you finish you could start running it but there are two things i dont recommend about this:

First

Why use notepadd++? When there is Sublime Text and Atom?? Its so much better in my Opinion.

Second

Best of all why not just use the actual codecademy editor?

Hey Jonathan,

You can create a file and save it as index.html, then put your HTML in it and double click it to open in a browser, and you’ll be able to see the result :slight_smile: And for CSS, you just save a file as style.css and link it up the way you were shown it the HTML & CSS Course, and put your CSS in it!

Please feel free to ask any follow up questions you may have :slight_smile:


@amanuel2

  1. There is no “best” way :wink:
  2. Being completely dependent on Codecademy for practicing programming stuff isn’t a great thing IMO.
1 Like

Hello zystvan this is kind of along the same lines. Quick answer how do I embed Js into an html document, like we are able to do with .css. My goal is for a simple video game which can be found on W3C.

@mrjlopez

Best method

Create a script.js file in the same directory as your HTML file, and add this to just before </body> in your HTML file:

<script src="script.js"></script>

Not best method

    <!-- html stuff -->
    <script>
      // javascript goes here
    </script>
  </body>
</html>
2 Likes

Thank you thought that I could embed it like .css. Any chance it might not work in Mozilla? Thank you.

Both of those methods work in all major graphics-based browsers (Firefox, Opera, Vivaldi, Chrome, etc.).

Should I post a new discussion topic. It is refusing to work. Also it is different from the code in Html game making that codecademy has, I thought that may be the issue.

Can you post a screen shot if you can? ALT+PRINTSCREEN makes it only the thing your working on.

Here is my js. Well their code but I typed it.:smile:

Here is my Html also theirs but same as above. I embedded the .css

Solved it via W3Cs environment. I did a line by line comparison of the code and my JS has an unnecessary curly brace on line six thank you zystvan and amanuel2 for your interest in my predicament.

2 Likes

@mrjlopez True, that extra closing curly brace (} was part of the problem, but you need to remove <script language="javascript"> on line 1 too. Also, your HTML is pretty messy; <script> tags, as a general rule, go in the <head> or just before </body>, and there’s no need for that empty <script> from line 16 to 19. You should also work on your indentation, it’s pretty bad (a.k.a., nonexistent).

Sorry to go through your code & point out all of the problems in it like that, but I don’t see how that code is working the way it is right now :slight_smile:

I have heard, that as a general rule script tags to below the body, so that any existing elements are already loaded; if we’re going to say it’s a general rule that is. That general rule would certainly apply to persistent incidents, such as stylesheets, but a javascript call for elements won’t work if those elements aren’t present.

1 Like

Thanks for the Advice everyone. Now I got another question how do I get an Image in the center of the page on html ?

@codemaster27831 This should help you: https://css-tricks.com/centering-css-complete-guide :slight_smile:

:sunglasses: The code works fine, once I figure out my latest issue I will post it. but as I stated the Tutorial at W3C schools is where I got it from, little snippets here and there. I highly recommend you take a look. It takes codecademies stellar game how to, to the next level. As for my indentation I take advantage of the fact that html and css (for the most part) are not whitespace sensitive unlike python. However I do comment my code. No one responded after my posting of the code so I proceeded to google tirelessly, and came up with what was posted as nothing that was suggested worked. Also believe it or not the way I have my code helps me to keep track of where I am in the code. It makes sense, it shows me what is enclosed and what is not. I thought it over zystvan I should not say nothing your suggestion to create a seperate file for my JS was spot on but you will note that again as a personal preference I kept my css inline I believe is the term, this also helps me keep track of what is going on in my code.

1 Like

Not a big fan of W3Schools (W3C & W3Schools aren’t related, BTW), they’ve gotten better but I still don’t really like them much. If you’re interested, I do like the Mozilla Developer Network a lot, it’s really good :slight_smile:

If those are your coding styles, may you never have to work on a large project :slight_smile:
(no offense meant of course, it’s just that your preferred code styles are generally recognized as a bad practice)

Mozilla Developer Network was recommended by stetim94 also. I favorited it and took a brief look. I had already found the W3Schools site it was instrumental in helping me to complete my final project as well as stetim94s much appreciated help. W3Schools problem I feel and you may agree is that unlike CodeCademy W3Schools does not make a whole lot of effort to explain the material in depth. My interest in programming is game development and one can only take so many non visual let’s build a calculator’s in a row. What makes html and css immediately approachable is the programmers ability to see the results through visual means. The other language courses don’t have this immediate visual apppeal. The syntax also makes sense open your tag close your tag. I would also like to state that these two stellar courses that Codecademy have should be at the forefront namely build a game with html and Draw with JavaScript. Respectfully request that they be taken out of the mothballs.:smiley:

1 Like

I can’t do anything about the mothballs, but I can add links to this thread.

Draw with JavaScript
HTML5 Games: Getting Started

1 Like