How to preview the result from HTML and CSS coded in Atom?


#1

Hi,
I’m brand new to Atom and cannot see how to check my code in a browser.
Please advise.
Terrys


#2

What code? If it’s HTML, you just double-click on the file icon.


#3

Hi,
Don’t think I explained too well.
I have created some html and css code and want to see how it looks when uploaded to a browser


#4

You can open the HTML file in a browser. Just double-click on it and your preferred browser will open automatically.


#5

Have tried that but nothing happens


#6

What operating system are you running?


#7

windows 7 pro 64 bt


#8

When you look at the HTML file in Windows Explorer, what icon do you see? You can right-click and select Open with to select a specific program to open the file. Your browser should be on that list.


#9

If I click on a file it opens in any of my 3 browsers that I select.
I am currently using notepad++ and have no trouble running my code to view in a browser.
The problem must lie in the Atom version I have just installed.
I am thinking, is it worth struggling any further with Atom?
Terrys


#10

This is the exact reason I stopped using sublime. With Notepad++ you can go to the menu and view your work in a browser, same with Dreamweaver…why isnt it this simple, so you have to save and then go to where ever you saved your file and then double click, but why cant you just go to your menu within the program, doesnt sound to difficult but its annoying more than anything. Just save it and open it in Notepad++, and choose which browser as opposed to >>>having to opening another editor but then why would you switch out of notepad++ to go back and forth? Just stay in notepad++…or go back to using Adobe Dreamweaver. Its the little things that they apparently overlook.


#11

I’ve been using HTML editors since late 90’s, and I was excited for this, just as I was with Sublime, but there is 1.Adobe Dreamweaver, 2.Notepad++, and 3.everything else, in that order. Because of this simple feature…why cant you guys have that middle pane as a live preview? instead of an advertisement for the editor that we’ve already downloaded, seems like a waste of space.


#12

Thanks for your comments, if this is the only way to view in a browser, what’s the point in using Atom?


#13

There are plenty of packages for HTML preview. If you prefer testing in real browsers, using LiveReload (package) or Browsersync (package) are probably the best choices – the browser will automatically refresh the page once you save it in the Atom.

By the way, your initial posts weren’t exactly well-phrased, so it wasn’t clear what you’re actually asking for. Your question is a very common one. If you had made use of the search function, you likely would’ve found the answer yourself.


#14

Atom is a general purpose editor (unlike Dreamweaver, which is for web developers only). Not everybody has the same use cases for an editor, so there’s no need to equip it with every feature under the moon. Ask yourself, you develop websites – if Atom was equipped with packages for Fortran or plotting, you’d have no use for them, you might even call it bloated. Atom is extensible, you can tailor it to suit your needs. If you develop Fortran, you install a package for it. If you plot data, you install a package for it. If you need anything that’s not part of the core, you install a package for it.


#15

Thank you for your response, impressive. I found a solution: After you bring the page up in the browser, you can leave the browser open, save your page in your editor and hit reload in the browser and it will show your work with its edits. I love the editor but this (the issue were talking about) just reminded me of Sublime and I never got a response from them when I went to their boards/forums, so the old frustrations I had with them was wrongly brought to this issue, I apologize. But you won me over with such a timely and informative response. Thank you


#16

It could be. Do you want to add a menu item to open the current file in your browser? You could do it by hand in init.coffee, but process-palette is perfect for that and has a much nicer editing interface. You can install process-palette and add an entry with the following configuration:

It’s not the only way to view in a browser. But you also didn’t ask for a specific functionality in Atom, just how to view your code in a browser.

This is a time-honored solution, but it takes a lot of time. browsersync is what I use and it removes the hassle of reloading at all, so you don’t even have to switch windows if all you want to do is see how it displays.