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
Richard Stringfellow
6,883 Points34 seconds into the video and I'm already lost.
Mr. Hoskins says, "Right now I just have a very simple HTML page loaded into Chrome" I do not know how to do that. I downloaded TextMate, typed in the example in the video, and saved it as an html file on my desktop. Earlier, I downloaded Chrome, and am using it for the first time. The video shows the cursor clicking the web tab to add a new file. I have not been able to produce a page with the web tab. I'm sure this is a simple as falling off a bike. What am I missing?
27 Answers
Richard Stringfellow
6,883 PointsAs it turns out, the problems I was having were a result of my own carelessness. In addition to failing to close the title tag properly, I omitted the "=" from my source attribute, as well. I really appreciate all your efforts to help, and I promise to be more careful in the future.
I've just now seen Tom's response. Let me look into that.
Kevin Lozandier
Courses Plus Student 53,747 PointsGlad you got it worked out; typos can definitely be mistakes that can be hard to diagnose w/ markup languages and take up an unexpected amount of time to find.
Hope you have far less setbacks with the rest of the course.
Taylor Patterson
Courses Plus Student 1,769 PointsAlso you can use a work space, just add the files index.html, and my_script.js, do your javascript in the .js and the html in .html!:)
Richard Stringfellow
6,883 PointsThank you both for your responses.
I downloaded a different Workspace, imported the html.index file that I had created in TextMate, and added a myscript.js file. However, I was not able to view the results in either Safari or Chrome.
I attempted to download MAMP, but was thwarted by the AppleStore.
The only difference I notice is that my mini, running OSX 10.9.3 is running about six times slower than it was before I started this process. The Mark Pettit track was a wonderful experience. I was able to negotiate it in its entirety without any problems. The Jim Hoskins video, by comparison - at least the first 34 seconds of it - has been a nightmare. It's been a frustrating four hours, and I'm out of ideas.
Kevin Lozandier
Courses Plus Student 53,747 PointsIf you don't want to exert any more effort with the setup details at the moment (which understandably you don't to spend any more time doing today), I suggest using [jsfiddle.net](jsfiddle.net), [jsbin](jsbin.com), or [codepen](codepen.io) to use their pre-arranged environments to merely follow along the programming wisdom Jim Hoskins can provide you.
Richard Stringfellow
6,883 PointsThanks, Kevin. I'll give that a try.
Richard Stringfellow
6,883 PointsKevin,
I'm looking at codepen. But I guess I don't know what to do with it. Please note, I know nothing about programming on the web. I was introduced to tags only a week ago. Were this a training video on how to walk down the hall, I would need instructions like, "'hall' is a corridor lined with doorways. Now, raise your left foot. Your left foot can be found at the end of your left leg".
I'm trying to follow along with the Hoskins videos and mimic his actions. But when I open Chrome on my machine, it doesn't have a blank page in the upper section, as in the video. And none of the available menu commands seem to point to such a page.
Jim's second video opens showing a tabbed page titled "Introduction to Programming" in the upper section, with "localhost" as the URL. But my Chrome doesn't open in that state, and the video doesn't explain how to get there. Every third-grader in the country may know how to get there, but I don't.
Jim states, “We are going to be learning how to create programs in JavaScript files and load them onto our web page,” and I think, "Ooooh. Ahhhh." Then he says, “Right now I just have a very simple HTML page loaded into Chrome . . ." Jim errs in assuming that I know how to do that.
When the video cross-fades to the HTML file in TextMate, the web page also changes - evidently on its own, for a directory named "Web" mysteriously appears. Jim says he's going to create a new file in the same directory as his HTML file, and proceeds to do just that. But the third-grader has no Chrome directory in which to place the file he cannot write for lack of a Chrome editor.
While I am able to do parts of this exercise using a Treehouse Workspace, I don't know how to load the workspace into Chrome. Consequently, I can’t complete the lesson. Do I need JavaScript for Dummies? Be gentle, now.
Question: When Jim mentions "loading" JavaScript files onto the web page, does he mean "calling" them from the .html file and "running" them on the web page?
Question: I checked Safari Preferences and found I could add a menu called "Develop". Will that offer a solution?
Michelle Cannito
8,992 PointsI have a PC. In File Explorer, I can right click on a file with an .html
extension and select the option from the resulting menu list to "Open with"
and then from that menu, Google Chrome.Don't know if this easy solution
would help a Mac user.
Richard Stringfellow
6,883 PointsTank you, Michelle.
Your suggestion does work, but no text is displayed in the upper section.
If I choose TextMate instead of Chrome, text instantly appears. I think it's Chrome that I'm having trouble with.
Here is what it looks like in TextMate:
<!DOCTYPE html> <html lang="en"> <head> <title> Introduction to Programming<?title> <style> html { background: #fafafa; font-family: sana-serif; } </style> </head> <body> <h1>Inntroduction to Programming</h1> <h2>with JavaScript</h2> </body> </html>
Kevin Lozandier
Courses Plus Student 53,747 PointsHi again, Richard:
To better understand how I can simplify the steps towards you getting past this, are you on a Windows or a Mac?
If you're on a Mac...
If on a Mac, for the purposes of following along with a local copy you'll create and follow along with, I highly recommend having Chrome installed and pinned to your dock.
The doc is where your common apps are accessible from the bottom of your screen.
That said, <kbd>Ctrl</kbd>+<kbd>click</kbd> or tap with two fingers the Html file you've made and choose Open With... You should be able to open the file. and be able to save and refresh to see your latest changes for now.
If you're on Windows...
Michelle's advice earlier should have worked. ** If text appears on Textmate but not on Chrome, you probably did not format the HTML5 correctly, or didn't save it correctly as a .html file;** if you don't mind, please share a screenshot of the current state of the file or copy and paste its contents (wrapped by three carets characters ) )
The typical structure of a standard HTML file is the following:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title> My page </title>
<!-- Stylesheets should be here and any JS files that has to be executed for polyfilling or other special cases>
</head>
<body>
<!-- Your content and your JS files should be the last thing included here --->
</body>
<html>
Regarding Codepen
When it comes to CodePen on the left hand side, press new pen.
That said, being a JS-driven course, I recommend using JSBin to follow along; it's the simplest of the pre-arranged online environments I shared with you when it comes to experimenting with JS.
Richard Stringfellow
6,883 PointsGuys and gal(s),
I hope these file paths turn into screen shots:
^^^/Users/ricstr/Desktop/Screen Shot 2014-07-05 at 9.22.06 PM.png^^^
I am using a Mac. Chrome is installed and pinned to the dock. When I open the .html file with Chrome, the text does not appear in the upper panel, as (hopefully) you can see:
^^^/Users/ricstr/Desktop/Screen Shot 2014-07-05 at 9.29.37 PM.png^^^
This is what it looks like in the video:
^^^/Users/ricstr/Desktop/Screen Shot 2014-07-05 at 9.39.31 PM.png^^^
I selected View/Developer/Show Source, and a page tabbed index.html appeared:
^^^/Users/ricstr/Desktop/Screen Shot 2014-07-05 at 9.43.05 PM.png^^^
so at least I'm making progress.
The file will open in Xcode, but I don't know anything about Xcode:
^^^/Users/ricstr/Desktop/Screen Shot 2014-07-05 at 9.46.59 PM.png^^^
Richard Stringfellow
6,883 PointsEvidently, I don't know how to upload a screenshot to this forum.
Richard Stringfellow
6,883 PointsThe .html file syntax and indentation is as it should be. I just don't know how to post it on the forum without it all running together.
The screen transition I'm trying to emulate comes 53 seconds into the second Hoskins video in the series, and is titled"Writing Your Program."
Kevin Lozandier
Courses Plus Student 53,747 PointsYou can use a service like imgur for screenshots.
To paste code within your comment and have it display correctly, you must wrap your code around three caret characters; you can optionally put beside the first set of three caret characters the language the code was written in for more accurate syntax highlighting.
These are nuances of Markdown. For more information, click the markdown cheatsheet link right above the post/cancel buttons.
That said, for the moment, please consider trying out and pasting a link to a JSbin or JS fiddle for me to quickly access your code to see if I can help you emulate the code Hoskins is demonstrating.
Richard Stringfellow
6,883 PointsIt seems I tried to close my title tag with a "?" instead of a "/". Let me see whether that makes a difference. :)
Richard Stringfellow
6,883 PointsYes.
Richard Stringfellow
6,883 PointsSo, now Chrome opens with the text shown in the video. But the URL shows "file:///Users/ricstr/Desktop/index.html", instead of "localhost/". Do I have to make Chrome my default browser?
thomascawthorn
22,986 Pointsdon't worry too much about localhost at the moment. 'Localhost' is a reserved name, specifically for a local server. Jim has a local server (such as MAMP or WAMP) running on his computer. Although in the future you may want to run a local server, at this point in time you'll only be interested if you're running a server side language such as php or ruby. Javascript is a client-side language (i.e. any script is executed in the clients browser). Therefore there's no need to have a server running, and any code you write should work fine with the filepath.
EDIT:
Although you're not on php right now, there are some videos in the "Getting started with php" badge (it's the first one) that should explain the difference between server side and client side.
Again, not directly javascript but some of the content here might go some way to explaining local host and how to get a server installed.
http://teamtreehouse.com/library/local-wordpress-development
But remember, none of this is necessary for plain old html and javascript
Richard Stringfellow
6,883 PointsKevin,
I tried wrapping the html in carets (^^^html^^^), but it didn't work.
Tom,
The PHP video was very helpful. Thank you.
The Wordpress video enabled me to set up a local host. What a relief! However, while refreshing to "localhost" in Safari produced the desired result, doing so in Chrome produced a page that looked like a typesetting factory exploded. I took a screenshot of it, but don't know how to upload the screenshot to the forum.
thomascawthorn
22,986 Pointshmm, this is a problem I don't know how to fix! In theory, the local server should output the same to both safari and chrome. A basic debug would be to double check the code, making sure you have strong html - everything that's opened is closed, you declare a doctype etc...
You could also try clearing your browsing cache.
If you double check the page source (right click -> view source), sometimes html errors are highlighted in red. I'm using the latest firefox but not sure if this works in other browsers.
The carets are also referred to as 'backticks' They look very similar to a single quote. You're looking for this ` character. When you're writing a post, above the button that says "Post a comment" there is a link to the markdown cheatsheet. This will tell you more about how you can add code to the post.
Kevin Lozandier
Courses Plus Student 53,747 PointsHi, Tom:
I meant to say your code should be surrounded by grave characters; that should have been clear via the markdown cheatsheet.
Richard Stringfellow
6,883 Points<!DOCTYPE html>
<html lang="en">
<head>
<title> Introduction to Programming</title>
<style>
html {
background: #fafafa;
font-family: sans-serif;
}
</style>
<script src="myscript.js"></script>
</head>
<body>
<h1>Introduction to Programming</h1>
<h2>with JavaScript</h2>
</body>
</html>
thomascawthorn
22,986 PointsAwesome! So you're html is currently surrounded by paragraph tags, which might explain some dodgy output!
If you remove the
<p> </p>
tags at the top and bottom of your page, that would already be 100x better!
Your html tags tell the browser - all html is written inside of me. If you declare html outside of your html tags - the browser doesn't see it as html and that might be causing the problem.
Richard Stringfellow
6,883 PointsAs Groucho says in A Day At The Races, "It's easy when you know how to do it!"
Richard Stringfellow
6,883 PointsActually, I only added the paragraph tags to the post, as they are included in the Markdown Cheatsheet example. They do not appear in the original .html file.
I removed them from the post, and see they are unnecessary.
thomascawthorn
22,986 PointsAh I see, so the example they give is just to say - you can put html tags in like this. You only need to wrap your code in the backticks (not p tags) :-)
Are you on MAMP or WAMP?
Richard Stringfellow
6,883 PointsI'm on MAMP.
thomascawthorn
22,986 PointsWicked, and just to make sure - that means you're on a mac?
I'm just going to try and recreate what you have.
Richard Stringfellow
6,883 PointsYes, I am Mac-in'.
Are the backticks at the end of the html only necessary if you are going to follow the html with other text?
Kevin Lozandier
Courses Plus Student 53,747 PointsThe grave characters are a way to explicitly communicate that something related to code is being written within a sentence (text surrounded by a single set of grave characters) or an entire block of text is related to code ( a block of text surrounded by three sets of grave characters).
When you have a block of code you can have it highlighted a certain way based on the language by putting the name of the language directly after the first set of three consecutive grave characters.
thomascawthorn
22,986 PointsProbably best to do as Kevin Lozandier suggests and close off the block :-)
So for me it's working fine in chrome, firefox and safari. Is there anything in myscript.js?
Try removing the link to your external javascript file (myscript.js) and try again. Also restart the MAMP server, (and maybe your computer) making sure it's finished loading up the apache server (i.e. the box has a black marker) before you load localhost.
Richard Stringfellow
6,883 PointsI have the above html, plus the .js that follows:
console.log("Hello, from myscript.js"); console.log("Hello again");
var name = prompt("What is your name?");
alert("Hello " + name);
name = "Nick";
console.log("The user's name is " + name);
These are in TextMate files, stored on my desktop, and I am using them in Chrome, on a file path rather than local host. I have duplicates of these in MAMP/htdocs/TestSite.com, and am using them with Safari, with localhost:8888/TestSite.com/ls_index.html.
thomascawthorn
22,986 PointsAh, okay. So the great thing with MAMP is that you don't have to use provided htdocs file (necessarily) and you can select the directory you want to 'serve'.
On your MAMP server, click preferences, go to the 'Apache' tab and you can select the directory where your textmate files are being directly saved. The path for myscript.js you've given in your code means your js file must be in the same directory as testsite.html for it to work properly.
Kevin Lozandier
Courses Plus Student 53,747 PointsYou shouldn't name the folder TestSite.com. It should be all lower-cased, as well as not ending with a top level domain. In this case, renaming it testsite would be preferable.
Richard Stringfellow
6,883 PointsWhat is missing is the image of the Navigator bar showing the Web directory that I mentioned above and is seen in the video. I have not been able to produce that.
thomascawthorn
22,986 Pointse.g. localhost:8888?
The number following localhost defines the port the server is running through - I don't really know this part... But I can tell you that if you want to use localhost without the following :8888 In MAMP Go to preferences Go to the Ports tab Click Set Apache & Mysql ports to 80 and 3306. You won't need to define a port (add numbers) after localhost because 80 and 3306 are default values.. (but the default values of MAMP are 8888 and 8889 for apache and mysql respectively).
Richard Stringfellow
6,883 PointsDoes it have to be in a MAMP folder, or can it be on the desktop?
thomascawthorn
22,986 PointsThe folder you want to serve can be anywhere. I would: Create a directory in 'Documents' Called Treehouse. Inside Treehouse, create a directory called javascript (Where you can place all your practice projects). I'm sure you're going to be working through php, and other videos so plan ahead ;) Inside the javascript directory create a folder specific to the video/project you're in.
When you select a file in MAMP, select the specific project file to 'serve'.
Kevin Lozandier
Courses Plus Student 53,747 PointsBy default it has to be in a MAMP/XAMP folder, but you can change the settings to point to files in a different folder (as well as the desktop).
It is not recommended to change it to your desktop for a variety of reasons, including the fact you probably don't want tons of folders littering your desktop over time.
Richard Stringfellow
6,883 PointsYou're right, Kevin. The video does show it al lower case.
Richard Stringfellow
6,883 PointsDone. Chrome works with both the file path (as before), and local host. I have not changed the defaults to 80 and 3306. Things are going so well, I'm afraid to.
thomascawthorn
22,986 PointsNice! It's totally personal preference, If you do want to try it, it's super simple to convert back - you just hit the other button which set "set to MAMP defaults" :-)
You can finally start the course!
Richard Stringfellow
6,883 PointsThank you, Ladies and Gentlemen! :-)
Kevin Lozandier
Courses Plus Student 53,747 PointsKevin Lozandier
Courses Plus Student 53,747 PointsHi, Richard:
I'll try to help minimize some of the confusion you're having.
Depending on the OS you're using, you should be able to access
Open File...menu option of Chrome by clickingFilemenu open or clicking <kbd>Ctrl<kbd>+<kbd>O</kbd> or <kbd>Command</kbd>+<kbd>O</kbd>For the sake of this particular video, if you have everything involving the file within the same
htmlfile, including your JS code within<script></script>tags, you should be fine.Consider being able to have a local web server by downloading XAMPP or MAMP.
This will allow you to access and program for websites easier through
localhost. For example you can have a folder calledmysiteindevelopmentand access all the web pages for it vialocalhost/mysiteindevelopment/