Viewers: in countries Watching now:
I want to begin with a clean slate. I'm going to get rid of some of the files I no longer need that are still in my server like this data.xml and this data.txt file. So I'm hitting Command+Delete, I'm in Transmit, and then hit this Delete button, gets rid of them. Eventually I'll need to add a style sheet to my HTML file, so I'll go ahead and right-click in Transmit and select New File and type in mystyle.css. You may have also noticed that I uploaded a folder full of images, and these are just photos of the different speakers.
I don't need a value, so I'll take that out. I am going to add a placeholder. That's an HTML 5 feature that let's you put in something that the reader can see before they type anything. So if I switch over here and I clear my search, you can see that it says name or info right there, so that's what I'm going to type here: name or info. So this going to need a label. A label is just the text that goes with the input field, and it has an advantage of making the label clickable to the input field. So this needs to match the id, so I'll do an id of search here, and my label is just going to say livesearch.
That means that when I am here, if I click on the word livesearch, because that's the label, it will activate my field. That is something really useful for mobile devices. And I'll add a little paragraph here to just describe what the user is supposed to do. So, let me save that. Finally, I need to add a link to my style sheet. And the style is called mystyle.css.
I don't need a type here. Let me save that. One thing I like to do is to just put a simple rule in the style sheet to make sure that it's linking properly to the HTML file. So I'll add a body selector here, background, and just give it a background color. So let me save this and I'll switch back to my browser. I need to go to a slightly different URL here. And everything looks like it's working great. So we've done a little bit of work here, and this is pretty much it for our HTML file and our folder structure.
It's a really simple page, so now we can move on to start scripting the document.
Access exercise files from a button right under the course name.
Search within course videos and transcripts, and jump right to the results.
Remove icons showing you already watched videos if you want to start over.
Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.
Click on text in the transcript to jump to that spot in the video. As the video plays, the relevant spot in the transcript will be highlighted.