Which editor for newbies, (or everyone)?

#1

Hey, happy new year everyone!

I have been only editing here, online (w3schools MDN etc.) and the codepen. I read some articles here, but they were all from 2016, so I thought I would post in case there have been any relevant changes since then.

If I am doing a webpage using HTML, CSS, and js, I have read about editors like VSCode or Atom but I have no idea what it is like to work with an editor, nor which one is better for a beginner. Any suggestions/hints/tips? Or is CodePen all one needs?

Like if I am trying something out in notepad I would have to style my page (as I know now) with my
< head >
< style >
< body >

and save as .htm (or.html, is one better?) and look at my results that way. But is an editor necessary? and if so, which one and why? I like being able to see my changes in realtime like code pen but I am also fine with refreshing my saved notepad page if that makes more sense. I am totally new so if this is obvious I apologize in advance.

Thanks.

#2

Hey Studiofletch,

Starting with CodePen is great. You have the 3 panels with HTML, CSS, and JS which makes it easier to segregate things. CodePen is great for sharing code with others. However, in real life, you have different files for HTML, CSS, and JS, you need to add your CSS and JS to your HTML, etc…

When you feel comfortable enough, you should download VSCode or Atom and try to recreate the challenges by yourself.

When it comes to which to choose…it is subjective. I personally recommend VSCode because it can be customized, and it has an active community. Additionally, you have extensions like Live Server which make your page auto-reload when you save your file after a modification.

Why is an editor better than CodePen ? Well CodePen only has 3 panels.
You are working on a single HTML file, CSS file and JS file. In a more complex application, you have more files for multiple pages.

Your HTML file should have a .html extension.

#3

Any free text editor is fine. You don’t need to worry about all the IDE bells and whistles of VS Code, but you can use it to get used to the interface if you like. There are also much simpler text editors such as Notepad++ and SublimeText. The main reason that these are better than just using your computer’s default text editor is that they have syntax awareness: based on the file extension, they can do things like color your code (the way that the freeCodeCamp editor does), auto-indent, suggest closing tags, etc.

Which one you use doesn’t really matter. You’ll mess with several over the years and end up just using whichever one you become most comfortable with.

#4

Thanks for the info. I will do that with the challenges, but I have websites I need to make and I will make those my projects at first. But that stage is still a ways away yet.

#5

Yea, thats what I figured. Thanks for the info.