Welcome to the Treehouse Community
Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.
Looking to learn something new?
Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.
Start your free trial
Megan Oliver
Front End Web Development Techdegree Graduate 20,985 PointsHow to preview a website from GitHub
I'm using Atom along with GitHub to write my code. I can't figure out how to preview the webpage from either program. In Atom I can preview just the HTML, but it isn't showing the CSS and I'm fairly certain it's all linked up correctly. Am I missing something? Workspaces has that nice little preview button, does Atom or GitHub have something similar?
4 Answers
Seth Kroger
56,416 PointsYou can often preview your web page by loading it directly in the browser as long as you aren't using aren't using AJAX or similar. Opening the HTML file in Explorer/Finder will usually open the file in your default browser.
Seth Kroger
56,416 PointsLoading directly into the browser is a general way to preview the page that works for any editor setup. On Atom specifically, a lot of functionality is left to plugins. They do have an HTML preview plugin available: https://atom.io/packages/atom-html-preview
Megan Oliver
Front End Web Development Techdegree Graduate 20,985 PointsI opened the HTML in Chrome locally (thanks! I'm new to all of this). I'm still not seeing my css at all. Should it show up? I just double clicked on my html file on my computer's hard drive.
Doc Brown
1,793 PointsCan you verify that your CSS is properly linked in your .html file? You should have a link pointing to your .css file in your .html file that looks something like this:
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
Your .css file should be in the same directory as your .html file (at least for this example).
Megan Oliver
Front End Web Development Techdegree Graduate 20,985 PointsI just added the type="text/css", but still nothing. Here's what the first part of my code looks like:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Mrs. Oliver's Science Classroom</title> <link rel="stylesheet" href="css/normalize.css"> <link rel="stylesheet" type="text/css" href="css/style.css"> </head>
This is my first time making a website totally from scratch on my own, so I'm sure I'm doing something wrong, I just can't figure it out....
Doc Brown
1,793 PointsWith the way you've linked in the CSS, can you confirm that your style.css and normalize.css files are in a separate folder called css?
Based on the example you've given, your file structure should look like this:
css
|___ style.css
|___ normalize.css
index.html
What does your CSS file look like? Is it doing anything to change the HTML elements in your html file?
Megan Oliver
Front End Web Development Techdegree Graduate 20,985 PointsIt's working! I had very little css written in because I was just testing it by making the header green and it wasn't turning green. I just added some other css and that's working. The issue was with my css, not my HTML. Thanks for all the help!
Doc Brown
1,793 PointsGreat! Glad to hear you got it working!
Seth Kroger
56,416 PointsFantastic! Glad we could help.
Doc Brown
1,793 PointsDoc Brown
1,793 PointsHave you tried opening your .html file in a browser like Chrome locally? Your HTML and CSS should load just fine like this.
Atom (nor GitHub) that I know of, has a magical way of making your webpage run in a browser. You can serve your webpage to a browser like Chrome with Express.js locally - but it takes some work to get it dynamically loading correctly through a build process.
If you're not dead-set on using Atom for simple HTML/CSS webpages, Brackets by Adobe is another text-editor that does have a magical preview button.