I’ve done some looking around on this topic, but maybe I’m putting the wrong search terms in. Since I began this journey I’ve been completing all of my projects in codepen. I plan to continue that, but I want to start writing them in a text editor. I downloaded Atom, but I feel completely lost. I’m not sure how to set it up and all of the guides I see out there seem to be for folks who already know what they’re doing with them. I apologize if these are stupid questions, but here they are:
Do I need to install something for JavaScript/CSS/React etc to work in the editor?
What file extension do I use for JavaScript? I know CSS is .css and HTML is .html
How do I set up git and GitHub in Atom? I’ve looked around, but I feel completely lost and I’m not sure what guide to follow or if I’ll wind up downloading the correct items.
Thank you for any links to videos or blogs that will help me
I personally use VS code but there are a lot of similarities with Atom.
For react, there is the create react app. The documentation will walk you through how to set it up with your code editor.
For vanilla javascript, you just have to create the file name and add .js to it.
ex. index.js
I know in vs code there is an option to bypass the command line and push your changes to github. So there is probably a simliar option in Atom. So I would consult with the documentation or a video source that walks you through the steps.
For me personally, I tried using git with vs code only and it was super easy. But I think it is important to learn and get comfortable with the command line.
It might be super intimidated at first, but with practice then you will get the hang of it.
If you are struggling with Atom try something else. I first tried Sublime and was not happy, so I tried VS Code and was much happier and have used it since.
To get started, if you haven’t already done so, you need to install git, and I would recommend watching a git tutorial on how to use the command line (it helped me anyway) to understand git better even though VS Code has a GUI for git, Atom might as well but I’m not familiar with Atom.
Thank you! I’ll check out all of these. I have another question. I’m struggling to find an answer to this. How do I actually preview my code in a browser? I downloaded VS Code and I created a folder with three files(.css, .html, and .js) from one of my previous projects. But I cannot figure out how to view it. I’ve tried googling multiple things but the results are lists of text editors for beginners or other unrelated results. One result led me to install the “open in browser” extension, but even when I open the html file it is a blank screen.
Thank you! I’m definitely going to focus on the command line and I’m going to try out VS Code. I’m still struggling to understand how to actually view the code I’ve written. I have a folder with .css, .html, and .js files, but even with the “open in browser” extension I cannot preview my project. I’ve been unable to locate a good “here is how text editors work” tutorial. It feels like everything I find assumes that they’re really intuitive.
It looks like there are several “open in browser” extensions. I use Live Server, which automatically reloads your web page when you save your file, so you don’t have to manually hit refresh in your browser every time you make a change. To use it right click your html file and select “Open with Live Server” or click Go Live when your html file is open like in one of the other comments. Open in browser probably works similar.
You could also, not using VS Code, simply navigate to the html file you want to view and open it with whatever browser you use.
I actually have a blog post that might help you get started with VS Code and other code editors. The article walks you through creating and linking an Html and CSS file. Hope it helps!
You didn’t say which OS you’re using, which might be relevant here.
But in general you should open the HTML file in your Web browser of choice. On Windows, this can be done by either right-clicking on the HTML file and selecting “Open With” then selecting your Web browser, or dragging the HTML file onto your Web browser window. Assuming your HTML file is written correctly, everything between your HTML, CSS, and JS files should display correctly.
Also it’s very possible to have a “blank screen” even with HTML, CSS, and JS files that all have something written in them. You need to put something in your BODY tags, like an H1 or P text, to get something visible on the screen. In fact, I’d recommend just writing literally “Hello World” in your HTML file by itself on the first line (no tags needed at all) so you can test to see that your HTML file is displaying.
You only need a “live” or “local” server once you start getting to writing some React/Angular/Vue. But before then you should be able to drop HTML files right onto your Web browser, or right-click/open, or double-click, to view them.
Edit: since it kinda sounds like to me you might need this suggestion with the “blank screen” comment, your workflow with a text editor in general should be this: opening/editing the HTML, CSS, and JS files in your text editor and writing code in each file in the text editor. Then save the file(s) and open only the HTML file in your Web browser. Everything you’ve written should then display in your Web browser.
