Learn to Make HTML5 Content Editable with CSS


show more Making content editable provides you with in-depth training on Design. Taught by Joseph Lowery as part of the HTML5 Projects: Advanced To-Do List show less
please wait ...

Making content editable

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 pla...

Making content editable
Video duration: 1m 55s 45m 50s Intermediate

Viewers:

Making content editable provides you with in-depth training on Design. Taught by Joseph Lowery as part of the HTML5 Projects: Advanced To-Do List

Subjects:
Design Web
Software:
HTML JavaScript CSS
Author:
please wait ...