Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member
Do you know how many times I've stared at a web page and thought, boy, I wish I could change that? And did you know that with HTML5 any portion of a web page can be made editable with literally a single word, and that word is contenteditable. We'll apply it to our basic to- do list to get the ball rolling. So I am going to go to my Code Editor and scroll down to around line 38 or so, where I have the div with an ID of container, and an unordered list with the ID of the list, and my initial entry Enjoy Life.
So all I need to do here in order to make all the items in the unordered list editable is to put in that one attribute and we're going to put it right in the ul tag there, and it is contenteditable. Believe it or not, that's it. Let's save the page and try it out. So I'll go back to the browser, click Refresh, and let's just scroll down a little bit. So now I should be able to just click right in here and let's go ahead and get rid of this placeholder entry here, and I'll put in my own list; quick shopping list of milk, eggs, potatoes, and artichokes.
And now if I want to get rid of something, what I have to do is just go up, highlight it, delete it, and then hit Delete or Backspace in order to move the list up. It's basically an open entry and I can put any straight text I want in here. Well, talk about bang for buck. That just blows me away. But of course there is a hitch. Now if I refresh the page, as if I came back the next day, all my changes are gone. We can amend that situation pretty quickly as you'll see in the next lesson.
Get unlimited access to all courses for just $25/month.Become a member
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.