New to Atom

I am attempting to use Atom for simple web design. I am a complete novice. I have never used a text editor of any kind. I have succeeded at creating an initial html file, but I can not figure out how to now change to css and how to have the two linked. What are the precise steps?

Various files can be linked to an HTML document by adding them in a <link> tag in the HTML file.

Here’s a reputable source about the <link> tag: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/link

Basically you can do the following:

  • Make a new file.
    • In Atom, you can press File -> New File in the main menu.
  • Save this new file with some file name your_filename_here.css, in the same folder where the HTML file is located.
  • Add a <link> tag to the HTML document from before, something like this:
    • <link rel="stylesheet" href="your_filename_here.css">

If you’re looking for more information I can try to help. Best of luck to you!

Thank you so much. I have at least been able to create the css file, and I will spend some time reading the link you sent me. Probably tomorrow since my brain is fried for today. Maybe more questions later.

Sounds good, glad I could help! The first coding/tech thing I ever learned was web tech (HTML and CSS), so it’s always nice to see other people learning it!

I’ll see if I can ask an intelligible question: With your instructions, I now have html and css files for my project, and can display them side-by-side. Now as I do the coding, how do I get to immediately view the results, as it would appear in the browser? I got the idea that clicking on the thunderbolt in Atom did that, but the only time I tried that, it did nothing (maybe because I did not have a CSS file yet), and seemed to need some other setting to make it work. Meanwhile, the thunderbolt and another icon that was just below it are now invisible to me and I cannot figure out how to get back to them.

Hi Lauren,

I don’t think the thunderbolt icon is a part of Atom itself – maybe it’s from an add-on package you have installed? I don’t know much about that icon, so I’m not sure I can help with that.

I found a package that seems to work okay, called atom-html-preview.

You can view your installed packages, or install new ones, from Atom’s settings. To view installed packages:

On Windows: File -> Settings -> select the Packages pane from the sidebar of the Settings view.

on Linux: Edit -> Preferences -> select the Packages pane from the sidebar of the Settings view.

on macOS: Atom -> Preferences... -> select the Packages pane from the sidebar of the Settings view.

(To install new packages, do the same as above, but select the Install pane instead of the Packages pane from the sidebar of the Settings view.)

I personally installed the atom-settings-view package. Then, while editing an HTML file, I pressed Ctrl + Shift + H to open the preview pane. I found that updating CSS requires saving the CSS file, whereas changes to the HTML file are reflected in real-time, without having to save the file.

Another option would be to open the HTML file in a separate browser (Firefox, Safari, Chrome, Edge …). Simply find where the HTML file is saved on your computer and drag it to the tab bar of your browser. The downside to this would be having to switch back and forth between Atom and your browser, and having to save both the CSS/HTML files every time before hitting “refresh” in the browser.

I hope any of that helps!

I was also able to use the atom-live-server package, which opens the HTML file in a web browser tab for you, and automatically refreshes the tab for you when you update and re-save the HTML file.

Once this package is installed, it can be activated by going to the menu bar with Atom open, and pressing Packages -> atom-live-server -> Start server.

Note that there has to be some sort of visible element within the HTML <body>, such as a <p> tag, or perhaps an <h1> tag. Otherwise these “HTML preview” packages will work, but there won’t be anything visible to display, so all you’ll see is a blank page for the preview.

(I initially got confused when I had a blank preview, until I realized I hadn’t put anything visible into my document. So I added <h1>Hello!</h1> inside the <body></body> element in my HTML file.)

Hi DeeDeeG,

Thank you again for your help.

I have not knowingly installed any packages yet, because I didn’t know what they were or which I might need. The thunderbolt will probably be a moot point once I install the package you recommend. I think there is a similar package for CSS as well as for HTML.

I’m on a Mac, so if you help me again in the future, you don’t need to explain how-to for different platforms. Though I appreciate your effort. Everything you’ve shared with me has led to my understanding things better.

Thank You,
Lauren

Hi DeeDeeG,

It’s me again, with a quick question about Atom.

When I open Atom I get a pop-up that says, “The ‘git’ command requires the command line developer tools. Would you like to install the tools now?” When I click on install, it has a progress line showing it finding the software, then before it gets to the end of that, it says, “Can’t install software because it is not currently available from the software update server.” When I click okay, it opens up the Atom welcome screen. Is this something I need to deal with, or just ignore?

Thanks,
Lauren

Hi Lauren,

I had that issue as well. (I think this happens only on macOS Catalina?)

Is this something I need to deal with, or just ignore?

The answer would depend on if you are interested in using Git-related features of Atom. (If you’re not sure, then it’s fairly safe to ignore. Git is pretty neat, though, and it integrates pretty well with Atom.)

You may already know that Git is a “version control” program, meaning it tracks changes to files in a project over time. Git also makes it relatively convenient to share your code, and/or to download other people’s code. And Git makes it relatively easy to visit or compare past states of a given project, via snapshots known as “commits”.

The GitHub website is based around being a destination for software you could download or contribute to; a “hub” for projects that happen to be tracked with Git. (Note: GitHub employees initially wrote and now maintain Atom.)

If you are interested in the Git-related functionality in Atom, you will need a “git” command accessible from the Terminal.

Here are a few options to get Git on a mac computer:

I hope this helps.

Best regards,

- DeeDeeG

I tried the cloud method, but 10.15 (Catalina is not listed. I only saw through 10.15 Mojave. Will an earlier version work?

My computer didn’t like the source forge site-said it could not guarantee it wasn’t malware. I haven’t tried Home-brew.

From Apple, “Command Line Tools for Xcode 12” should work. That’s what I have been using. (I suppose the latest “Command Line Tools for Xcode” are more universal, not limited to a specific version of macOS.)

I’m not sure if this link would work for you, but this is the one I’m meaning to recommend: https://download.developer.apple.com/Developer_Tools/Command_Line_Tools_for_Xcode_12/Command_Line_Tools_for_Xcode_12.dmg

I wasn’t logged into my iCloud account (my “Apple ID” is what Apple is calling it these days), so I forgot what the exact file name was while I was writing my previous comment.

(For what it’s worth: I also got the “might be malware” warning for SourceForge, which I suppose means the developer didn’t sign and notarize their application. macOS is fairly locked down, and not everyone gets their app signed. Anyone can write software, but getting it signed for macOS requires a paid Apple Developer Program account. The “might be malware” message can be bypassed in the “System Preferences” app under --> “Security and Privacy”, but getting something officially from Apple (such as the “Command Line Tools” mentioned above) is admittedly more reassuring.)

Thanks for your further help. I’ll try these tomorrow, since I have put the computer to bed for the night. I really appreciate you!

1 Like

You’re welcome!

I’m trying to help keep Atom a welcoming project, and help beginners, and so on, because tech has added a lot to my life! And I figure why not give back? Gad to hear it is helpful.

2 Likes

Hi DeeDeeG,

I’m making some slow progress. I installed the html previewer, which shows real-time changes to the html. I have created a CSS file, and linked the html to it, but changes I type into CSS (for background color, font, shading, or whatever, don’t show up in the html preview. Is there another package that would accomplish that? I’m pretty sure I’ve got the CSS syntax right—following along in a class I’m taking in web design.

Am I making any sense?

Thank you,
Lauren

p.s. Is there an atom package that brings up a color wheel, numbers, sampler? Part of my problem is that I don’t understand tech vocabulary. For instance, what does binding keystrokes mean?

Lauren

I found color-picker packages for Atom. Is it a problem to install more than one of them? I like the Atom color-picker, but I also like the Chrome one. Do I have to pick just one?

This is a suggestion. You can install similar packages and enable/disable the set you prefer to use. In my case I installed package package-list which through command opens up a form page showing state of all installed packages. You can use this to manage different combinations of packages (e.g. switching between different colour pickers in your case).

Hi DeeDeeG,
In the project I am working on, I have linked my html and CSS. In my html I have inserted an image, but I want that image to be my background image, which I think I have coded in CSS, but the code I am writing in CSS is not having the desired outcome. My image just stays the same, as a picture in a portion of the page, instead of filling the page behind the text. Besides that, none of the other things I try, like alternate background colors for table rows, or shading for text are showing in html preview. What am I missing? Any suggestions?

I’ve been a combination of away/busy lately. Taking a look at these comments…

I found color-picker packages for Atom. Is it a problem to install more than one of them?

It shouldn’t be a problem. Usually different packages play nice with one-another, even ones that are quite similar in purpose. (I personally used to get a bit nervous installing two packages that “do the same thing,” but I’ve found that it usually works. Add-ons generally have their own controls/interfaces, and run their own separate code “under the hood,” so there is almost never a conflict.)

Glad you found something that works!

I installed the html previewer, which shows real-time changes to the html. I have created a CSS file, and linked the html to it, but changes I type into CSS (for background color, font, shading, or whatever, don’t show up in the html preview.

I believe you have to not just update the CSS file, but also save the CSS file, for the changes in it to show in the preview. To save that specific file: Click so your cursor is somewhere among the CSS code, then do either Ctrl + S, or File --> Save in the menu at the top of the screen.

For instance, what does binding keystrokes mean?

“Keystrokes” refer to the movement one’s fingers make when typing on the keyboard. One “keystroke” is pressing one key on the keyboard. (But it can mean more-loosely: Any combination of keys pressed at the same time). In the context of customizing a piece of software (like Atom), “Binding” a key means associating something (an action, a shortcut) to that key.

An example key binding: If I “bind” the “open a new window” action to something like Ctrl + Shift + N, then any time I hit Ctrl, Shift and N at the same time, a new Atom window will open.

More info here: https://flight-manual.atom.io/using-atom/sections/basic-customization/ and https://flight-manual.atom.io/behind-atom/sections/keymaps-in-depth/

In the project I am working on, I have linked my html and CSS. In my html I have inserted an image, but I want that image to be my background image, which I think I have coded in CSS, but the code I am writing in CSS is not having the desired outcome. My image just stays the same, as a picture in a portion of the page, instead of filling the page behind the text. Besides that, none of the other things I try, like alternate background colors for table rows, or shading for text are showing in html preview. What am I missing? Any suggestions?

Hmm. This could just be needing to save the CSS file so the changes show in the preview.

Beyond that, maybe the <link> tag in your HTML file doesn’t actually point to where the CSS file is? Does any of the CSS you wrote have an effect on the appearance of the preview? If not, then it’s likely this explanation. If that’s the issue, then if you get a chance to ask your teacher for some help with that, it might be the best way. But I can follow up with more questions to get to the bottom of that.

Lastly, I can suggest a possible solution: You may want to apply the background-image CSS property to the <body> element of your HTML document.

(Another resource about background-image. This one is a little more humanistic and nicer to read: https://css-tricks.com/almanac/properties/b/background-image/)

(A note about common web design patterns… feel free to ignore this for now if it’s too much information: In more complicated web apps, it’s popular to have a <div> element that spans the whole screen, and you can set the background-image property on that <div>. The point of this note is to say that setting background-image on the <body> element isn’t the only way.)