There is no doubt that Web design can sometimes be a little intimidating, not only is there so much to learn but the environment is ever changing and it seems as if every day there is something new that you need to learn if you want to stay up-to-date. Don’t know where to start? Don’t worry we have compiled some of the best resources on the web for learning web design. Some of the suggestions offered here are free while some come at a small cost. Some focus only on HTML while others will teach you anything from HTML, CSS to jQuery and everything else you could possibly imagine.

#1. W3Schools

Your first stop on the quest for learning HTML and CSS should really be W3Schools, if you have never heard of this site then you are missing out on some great tutorials. At w3schools.com you will learn how to make a website. They offer free tutorials in all web development technologies.

#2. Webdesigntuts+

Webdesigntuts+ is a blog made to house and showcase some of the best web design tutorials and articles around. They publish tutorials that not only produce great results and interfaces, but also explain the techniques behind them in a friendly, approachable manner.

#3. netmagazine.com

.net magazine, is stuffed with great tutorials on pretty much anything you can imagine, need a tutorial on HTML, CSS, JavaScript, jQuery, then they are your go to guys. Even though some of their tutorials are aimed at intermediate to advanced web designers, the offer is really great.

#4.  Lynda.com

Lynda.com offers a wide range of video-based tutorials that can teach you pretty much anything about web design, as well as pretty much everything else for a monthly fee. An authoritative source of web design training videos, you can get a taster by checking out its free tutorials.

#5. Smashing Magazine

Smashing Magazine is really a fantastic resource of tutorials on all aspects of web design. Similar to .Net magazine, the lessons are aimed at the intermediate to advanced end of the web design spectrum.

#6. Quackit

Quackit teaches beginners how to create websites. According to the website they start off slowly, teaching you the basics such as HTML and CSS. Then slowly they introduce you to more advanced topics so that you can add more features to your website.

#7. Codecademy

Codecademy describes itself as the ‘easiest way to learn how to code’ and has established a great reputation for itself within the web design community. Codecademy is a team of hackers working hard to build a better way for anyone to teach, and learn, how to code. We’re determined to succeed in realizing our mission to turn a world of tech consumers into one of empowered builders.

#8. Treehouse

Treehouse is a video-based service, where you can learn to build websites, create iPhone and Android apps, code with Ruby on Rails and PHP, or start a business. The extensive Treehouse library of step-by-step video courses and training exercises will give you a wide range of competitive, in-demand technology skills that will help you land your next dream job or build your startup idea. No experience? No problem!

#9. Mozilla School of Webcraft

In School of Webcraft you can earn badges backed by Mozilla, that highlight your technical and community skills to your friends, colleagues and potential employers. School of Webcraft Badges are easy to display on your personal website, online profiles, and CV and use the Open Badges framework, a way to record, track, and display your skills and knowledge across the web. The site offers a host of free web design training courses, including ones in CSS, PHP, and HTML. What’s great is that they also offer courses in Spanish.

#10.HTML Dog

What makes HTML Dog different to most other HTML guides and tutorials out there is its focus on best practices. “Web Standards” are at its heart, which, to cut a long story short, is all about using technologies, such as HTML and CSS, in the right way.

#11. CSS-Tricks

CSS-Tricks actually a blog run by web designer Chris Coyier. He covers the latest CSS techniques. Recently it has become immensely popular among professional web designers. What makes this site so great is that it is constantly updated source of tips, tutorials, and video lessons, best of all its Free.

#12. Learncss.tutsplus

30 Days to Learn HTML & CSS was created because they believe everyone has the right to learn how to build wonderful things on the web. The course is 100% free and always will be, no strings attached. It is instructed by veteran web developer and trainer Jeffrey Way, and brought to you by Tuts+ Premium.

#13. Udacity

Whether you want to learn how to build a simple web site or something as complex as your own search engine Udacity offers everything. With Udacity you can learn a whole bunch of new and interesting things, and best of all the training is absolutely free and is led by expert professors from Stanford and the University of Virginia.

#14. HTML.net

HTML.net provides guidance and help about designing and developing websites. They offer tutorials on everything from HTML, CSS, PHP to JavaScript, their motto is they will get you up and running in less than an hour.

#15. About.com

About.com has tutorials and how to guides on pretty much everything from changing a tire to changing a diaper, and of course they also have a plethora of different tutorials and guidelines for learning HTML and CSS online for free.

...

Everyone knows that in order to create the best websites you need to be up-to-date with the latest trends and developments. We asked experts and long timer designers and developers to share with us their favorite books, and the result is a selection of the very best books that everyone should read. Our list includes 25 books that all developers must read if they want to create great web sites. We cover everything from HTML to CSS, JavaScript and jQuery books.

1. Introducing HTML5

Authors: Bruce Lawson and Remy Sharp Price: $17 Amazon Kindle Buy now

As HTML5 continues to evolve, browsers are implementating at break-neck speed and HTML5 web sites spring up like flowers after rain.Lawson and Sharp’s Introducing HTML5, now in its second edition, helps you get acquainted with the possibilities of HTML5; it also explores the good and the bad within the spec, along with discussing aspects not yet fully implemented in browsers.

2. The Essential Guide to CSS and HTML Web Design

Author: Craig Grannel Price: $23.09 Buy Now

The Essential Guide to CSS and HTML Web Design is a great book, if you need suggestions on how to create great web sites that are standards compliant, usable, and look great,  and yet the book isn’t filled with boring and dry theory. No matter at what stage of your design career you, the mixture of practical tutorials and reference material makes this book invaluable to both beginners and more experienced designers.

3. HTML and CSS: Design and Build Websites

Author: Jon Duckett Price: $18 Buy Now

Every day, more and more people want to learn some HTML and CSS. Joining the professional web designers and programmers are new audiences who need to know a little bit of code at work (update a content management system or e-commerce store) and those who want to make their personal blogs more attractive. Many books teaching HTML and CSS are dry and only written for those who want to become programmers, which is why this book takes an entirely new approach.

4. CSS3 for Web Designers

Author: Dan Cederholm Price: $18/$9 (paperback/ebook) Buy now

Cederholm’s book aims to show how CSS3 is a “universe of creative possibilities”, providing insight into web fonts, advanced selectors and the many visual enhancements the technology can bring to web pages. Eric Meyer, An Event Apart partner and co-founder, says: “With Dan you know you’re getting great visual design with a fun theme, wrapped around great technical information. This book delivers big time.”

5. Handcrafted CSS: More Bulletproof Web Design

Author: Dan Cederholm and Ethan Marcotte Price: $29 Buy now

Master sophisticated CSS layout methods powered by a philosophy of ‘progressive enrichment’. Create fluid designs that support today’s plethora of connected devices, and learn techniques that create a living, textural look and feel without killing your user’s bandwidth. Dare to innovate fearlessly and gain tips on persuading your clients to accept your innovations.

6. HTML5 & CSS3 For The Real World

Author: Estelle Weyl, Louis Lazaris and Alexis Goldstein Price: $25 Buy now

One of a number of books concentrating on the core of new web technologies, HTML5 & CSS3 is all about creating dynamic websites with new toys. Instead of fluff and hype, it concentrates on fun, effective techniques that you can start using immediately. According to Studholme: “This book manages the impressive task of covering a massive amount of content without being a tome. It’s full of useful insights and real-world advice.”

7. JavaScript Enlightenment

Author: Cody Lindley Price: $15 (PDF edition) Buy now

This is the book that might transform you from a JavaScript library user into a JavaScript developer. Most of us old-timers learned JavaScript by reading other people’s code and through blind experimentation, so we missed out on a lot of the fundamentals. In this book, Cody does an amazing job walking through the ECMA spec, detailing the intricacies of the JavaScript language.

8. Scalable and Modular Architecture for CSS

Author: Jonathan Snook Price: $15 (Canadian) Buy now

In this book, which started life as a website, Snook outlines the methodology behind SMACSS (pronounced ‘smacks’), a means to examine your design process and fit rigid frameworks into a flexible thought process, thereby resulting in a consistent approach to site development when using CSS.

9. Stunning CSS3

Author: Zoe Gillenwater Price: $29 Buy now

Far too many CSS books are little more than elaborate reference guides, but Gillenwater takes a different approach, helping you learn the power of CSS3 through practical, eye-catching examples. “I don’t think this book has got the promotion and attention it deserves,” says Rewis. “It is sincerely one of the most practical, informative and lovely CSS3 books out there, due to Zoe using a project-based approach throughout to illustrate the concepts.”

10. The Truth About HTML5

Author: Luke Stevens Price: $20 Buy now

As designer and developer Sebastian Green points out, the title of this book shows this is a rather different take on HTML5: “It highlights the myths currently in circulation about the spec and also gives some information about the procedures behind creating it.” Green says the book details how people are using new tags but also shows they may have interpreted the spec incorrectly and headed in the wrong direction. It also explores a groundbreaking semantics initiative, what happens when Flash dies, and how HTML5 alters fundamental components of the web.

11. The Definitive Guide to HTML5

Author: Adam Freeman Price: $25 Buy Now

The Definitive Guide to HTML5 provides the breadth of information you’ll need to start creating the next generation of HTML5 websites. It covers all the base knowledge required for standards-compliant, semantic, modern website creation. It also covers the full HTML5 ecosystem and the associated APIs that complement the core HTML5 language.

12. HTML5: The Missing Manual

Author: Matthew MacDonald Price: $23 Buy now

HTML5 is more than a markup language—it’s a dozen independent web standards all rolled into one. Until now, all it’s been missing is a manual. With this thorough, jargon-free guide, you’ll learn how to build web apps that include video tools, dynamic drawings, geolocation, offline web apps, drag-and-drop, and many other features. HTML5 is the future of the Web, and with this book you’ll reach it quickly.

13.  Responsive Web Design with HTML5 and CSS3

Author: Ben Frain Price: $40 Buy now

Responsive web design, in my opinion, represents huge potential for business web development. It can be so easy to view it as just another buzzword, more marketing jargon if you may but if you take the time to understand what is means for web development, you will see its pretty hot with huge potential. The author moves through a well worked out movie website project to show that Responsive web design is not a huge single monolithic thing but instead a series of existing technologies ( HTML5, CSS3 ) and design techniques ( flexible grid layout, flexible images and media and media queries ).

14. CSS3: The Missing Manual

Author: David Sawyer McFarland Price:$20 Buy now

CSS3 lets you create professional-looking websites, but learning its finer points can be tricky—even for seasoned web developers. This Missing Manual shows you how to take your HTML and CSS skills to the next level, with valuable tips, tricks, and step-by-step instructions. You’ll quickly learn how to build web pages that look great and run fast on devices and screens of all sizes.

15. The Book of CSS3: A Developer’s Guide to the Future of Web Design

Author:Peter Gasston Price:$21 Buy now

CSS3 is the technology behind most of the eye-catching visuals on the Web today, but the official documentation can be dry and hard to follow. Luckily, The Book of CSS3 distills the heady technical language of the CSS3 specification into plain English, so you can get started on your next project right away. With real-world examples and a focus on results, The Book of CSS3 shows you how to transform ordinary text into stunning, richly detailed web pages fit for any browser. You’ll master the latest cutting-edge CSS features, like multi-column layouts, borders and box effects, and new color and opacity settings.

16. Stylin’ with CSS: A Designer’s Guide (Voices That Matter)

Author: Charles Wyke-Smith Price:$25 Buy now

In this completely revised edition of his bestselling Stylin’ with CSS, veteran designer and programmer Charles Wyke-Smith guides you through a comprehensive overview of designing Web pages with CSS, including the advanced capabilities of CSS3 that are now widely implemented across all the major browsers.

17. Smashing CSS: Professional Techniques for Modern Layout

Author:Eric Meyer Price: $25 Buy now

Smashing CSS takes you well beyond the basics, covering not only the finer points of layout and effects, but introduces you to the future with HTML5 and CSS3. Very few in the industry can show you the ins and outs of CSS like Eric Meyer and inside Smashing CSS Eric provides techniques that are thorough, utterly useful, and universally applicable in the real world. From choosing the right tools, to CSS effects and CSS3 techniques with jQuery, Smashing CSS is the practical guide to building modern web layouts.

18. Learning Web Design: A Beginner’s Guide to HTML, CSS, JavaScript, and Web Graphics

Author: Jennifer Niederst Robbins Price: $27 Buy now

Do you want to build web pages, but have no previous experience? This friendly guide is the perfect place to start. You’ll begin at square one, learning how the Web and web pages work, and then steadily build from there. By the end of the book, you’ll have the skills to create a simple site with multi-column pages that adapt for mobile devices.

Learn how to use the latest techniques, best practices, and current web standards—including HTML5 and CSS3. Each chapter provides exercises to help you to learn various techniques, and short quizzes to make sure you understand key concepts.

This thoroughly revised edition is ideal for students and professionals of all backgrounds and skill levels, whether you’re a beginner or brushing up on existing skills.

19. JavaScript & jQuery: The Missing Manual

Author: David Sawyer McFarland Price: Buy now

JavaScript lets you supercharge your HTML with animation, interactivity, and visual effects—but many web designers find the language hard to learn. This jargon-free guide covers JavaScript basics and shows you how to save time and effort with the jQuery library of prewritten JavaScript code. You’ll soon be building web pages that feel and act like desktop programs, without having to do much programming.

20. Learning jQuery

Author:Jonathan Chaffer, Karl Swedberg Price:$40 Buy now

Step through each of the core concepts of the jQuery library, building an overall picture of its capabilities. Once you have thoroughly covered the basics, the book returns to each concept to cover more advanced examples and techniques. This book is for web designers who want to create interactive elements for their designs, and for developers who want to create the best user interface for their web applications. Basic JavaScript programming and knowledge of HTML and CSS is required. No knowledge of jQuery is assumed, nor is experience with any other JavaScript libraries.

21. Practical CSS3: Develop and Design

Author: Chris Mills Price: $21 Buy now

This book teaches how to use CSS3 to build cool, responsive user interface features that are feasible for use in real-world projects today. Readers will appreciate the author’s approachable style and will catch on quickly with this easy-to-follow, practical guide. Well known and respected CSS3 expert Chris Mills devotes much of the book to creating fallbacks for older browsers, so that the content will still be accessible and usable.

22. Core HTML5 Canvas: Graphics, Animation, and Game Development

Author: David Geary Price:$31 Buy now

Even though Core HTML5 Canvas is written for experienced software developers with an intermediate-level understanding of JavaScript, there is really something in here for everyone. This book shows you how to implement anything you can imagine with the Canvas 2D API, from text editors to video games.

23. Head First HTML and CSS

Author:Elisabeth Robson Price:$23 Buy now

Do you ever feel like a book only makes sense when you are already an expert at something, well then it’s time you picked up Head First HTML, this book will give you a great introduction to learning HTML so you can finally create those web pages you’ve always wanted. Oh, and if you’ve never heard of CSS, that’s okay–however if you want to create great websites today there is really no way around CSS, and thats why this book also covers CSS.

24. CSS Pocket Reference

Author: Eric A. Meyer Price: $11 Buy now

Sometimes you just can’t remember all the different codes needed for a website, well thats where CSS Pocket Reference delivers. This book has all the most essential information you need to implement CSS on the fly. This book is aimed at more advanced designers who just need to quickly check up on something. Along with a complete alphabetical reference to CSS3 selectors and properties, you’ll also find a short introduction to the key concepts of CSS.

25. jQuery: Novice to Ninja

Author:Earle Castledine Price: $23 Buy now

This book is great if you want to jump-start your journey into jQuery. Whether you are a beginner or an experienced developer this book will have something for you. The book starts of with the basics, and then moves on to more advanced techniques, such as plugin development and the creation of almost every conceivable UI widget.

...

In this series we have been building the elements of a user note-keeping utility for Web pages, using the IndexedDB API. So far we have built the database, created an object store to save the user’s notes and handled adding and deleting notes. In this last part of the series we will bring these elements together by querying the note database, presenting the user notes within the page markup so that they can see them on returning to the page. This is the final part in a series of four tutorials:

Setup and opening the note database Creating the object store Adding and deleting notes Querying and presenting notes

Fetch the Stored Notes

As you may remember from the previous parts in this series, our JavaScript code calls a function named “getNotes” in various places: when a note is added or deleted and when the page is initially presented. This function is going to handle querying the object store for notes already saved, then building this data into HTML elements to include in the page markup. Add the function outline in the script section of your page head, before the line in which the “init” function is called, which should be the final line in the script:

/* Function checks if there are existing notes and if so presents them within the page - function is called after database initialization and when notes are added/ deleted */ function getNotes() { }

Inside the function, start by retrieving a reference to the database object store:

//get the object store noteObjectStore = noteDB.transaction("notes").objectStore("notes");

Now get a reference to the page element in which our notes are going to appear:

//get the page element in which the note elements will appear var noteContainer = document.getElementById("notes");

Remember that we added this element in the first part of the series. Each time this function is called it is going to clear any currently displayed notes and start from scratch, so that it can go through the same process if a note has been added or deleted. Start the content at empty:

//set to empty at first - in case a note has been deleted noteContainer.innerHTML="";

Traverse the Notes

With IndexedDB, rather than using SQL queries, we traverse the data items using a cursor. Still inside the function, add the following section to open the cursor:

//open the cursor to traverse existing notes noteObjectStore.openCursor().onsuccess = function(event) { };

The remainder of the JavaScript function will be placed inside this block. If the cursor opening process is successful, the code inside this will execute. Attempt to retrieve the result of opening the cursor:

//attempt to traverse var cursor = event.target.result; if (cursor) { }

The content of this “if” statement is going to execute once for each item encountered by the cursor, i.e. each note saved.

Build Each Note

For each note, we need to build an HTML element, which is in turn going to contain child elements. The entire note will be displayed as a div, so start inside the conditional statement by creating this element:

//create a new note div element var newDiv = document.createElement("div"); newDiv.setAttribute("class", "note");

The class attribute will allow us to style the notes. Next let’s build a paragraph to display the note date:

//create paragraph for...

The advent of HTML5 has created a new set of opportunities for web developers and site architects. The new system has also forced those unfamiliar with its origins to reassess how they view their site design, especially when it comes to questions of search engine optimization. How will HTML5 interact with the current search engine spiders, such as Googlebot and Bing, and how will those crawlers evolve in this dynamic environment?

New Content Tags

One of the biggest new features in HTML5 is the new set of markup tags. These tags have been designed to reflect the new state of web content, such as articles, sidebars, headers and footers. Many of these tags replace or supplement the <div> tags from HTML4 with additional functionality

Tag: <header> Page Function: Similar to <h1>, <h2>, etc., but can also contain a logo and navigation data. SEO Function: Just as with the <h1> tags, the <header> tags inform the crawlers that the contents are highly relevant to the page content. Example:

<header> <img src = “images/company_logo.jpg”> <h1>Main Header</h1> <h2>Subheadline</h2> </header>

Tag: <nav> Page Function: The <nav> tag allows designers to separate the major navigation functions from the page content. The <nav> tags typically nest inside the <header> tags at the top of a page. SEO Function: Links enclosed in a <nav> tag inform the spiders about the major sections of a site’s content. Example:

<nav> <ul> <li><a href=”/dccomics”>DC Comics</a></li> <li><a href=”/marvelcomics”>Marvel Comics</a></li> <li><a href=”/imagecomics”>Image Comics</a></li> <li><a href=”/darkhorsecomics”>Dark Horse Comics</a></li> </ul> </nav>

Tag: <article> Page Function: The <article> tag contains independent, self-contained content. Although the content in the <article> tags can relate to the other content on the page, it can also stand alone. SEO Function: Since “content is king” for search engines, the primary target for crawlers will be within the <article> tags. Example:

<article> <h1>Superman</h1> <h2>Origin of Superman</h2> <p>Rocketed as a baby from the doomed planet Krypton, Kal-El was adopted by Jonathan and Martha Kent, a childless couple from Smallville, Kansas, and named “Clark...

In this series on creating a user note-keeping utility, we are using IndexedDB to store user notes on a Web page. In the first two parts of the series we created the IndexedDB database and object store, as well as the initial visible HTML elements in the Web page. In this part we will implement allowing the user to add and delete notes to and from the data store. In the final part of the series we will query the notes and display them within the page. This is part 3 in a series of 4:

Setup and opening the note database Creating the object store Adding and deleting notes Querying and presenting notes

To add notes, the user will interact with the visual elements we have already created. To delete notes, the user will interact with the visible elements we will build in the final part of the series. We will add JavaScript functions to handle adding and deleting, calling these functions on user interaction.

Create a Function for Adding Notes

In your JavaScript section in the page head, after the “init” function and before the line in which you add the event listener to call the “init” function, add the following function outline:

/* Function called when user adds a note */ function addNote(){ }

Notice that this is the function we call in the HTML code, when the user clicks the “add” button to submit any text they have typed into the text-field. In this function we will pull the user text and add it to the note database. First, let’s get the content from the text input element using its ID attribute:

//get user submitted content var noteIn = document.getElementById("note_in"); var newNote = noteIn.value;

We only want to carry out the adding process if the user has actually entered text, so add the following conditional test:

//only carry on if there is content if(newNote.length>0) { }

The remainder of the adding code will go inside this “if” statement. First, get references to the transaction and object store objects using the database:

//get transaction noteTransaction = noteDB.transaction("notes", IDBTransaction.READ_WRITE); //get object store noteObjectStore = noteTransaction.objectStore("notes");

We need a transaction that will allow us to write to the database and we specify the object store by name. Remember that we are going to include the date on which a note was created, so let’s build that now as a text string ready to add as part of the new note:

//get the date var currentTime = new Date(); var month = currentTime.getMonth() + 1; var day = currentTime.getDate(); var year = currentTime.getFullYear(); var dateText = month + "/" + day + "/" + year;

Now we can try adding the new note data:

//add the new note data - date and text, ID key will be autoincremented noteRequest = noteObjectStore.add({ when: dateText, text: newNote });

The new note consists of the date, the text content of the note and the index, which is auto-generated as we specified last time. As with most IndexedDB functions, we now need success and failure handlers, still inside the “if” statement:

//successfully added noteRequest.onsuccess = function(event)...

In this series we are using the IndexedDB API to create a basic note-keeping utility within a Web page. In the first part of the series we setup the HTML5 page elements and started IndexedDB processing by attempting to open the database. In this part we will be working on creating the object store, which is how we define the structure of the note database. In the final two parts of the series we will handle inserting, deleting and querying notes. This is part 2 in a series of 4 tutorials:

Setup and opening the note database Creating the object store Adding and deleting notes Querying and presenting notes

Handle Upgrades

If you look back at the code we used last time to attempt opening the database, you will see that we included a version number along with the database name. If the database does not exist yet, or if the version number is greater than the existing version, the “onupgradeneeded” method will fire. In this method, we will specify the database structure and it will be created on first run.

The “onupgradeneeded” method is an issue on Chrome browsers at the time of writing. Unfortunately Chrome is still supporting the older “setVersion” method instead. Hopefully future editions of the browser will add support for the most recent standards.

In your page script section, inside the “init” method, after the “onsuccess” handler function we created last time, add the upgrade method as follows:

//if upgrading - this is where we specify the structure noteRequest.onupgradeneeded = function(event) { };

Notice that the method uses the request object we created and used last time. Inside this method we will specify the structure of the database.

Create the Object Store

In the new upgrade method, first retrieve a reference to the database as follows:

//get the database noteDB = event.target.result;

This is the database variable we declared last time. Now use it to define the database structure:

//create the object store var noteObjectStore = noteDB.createObjectStore("notes", { keyPath: "noteID", autoIncrement: true });

Take a moment to look over this code as understanding it is vital. The first parameter to the “createObjectStore” method is the name you want to use for the data store. Next are the optional parameters, of which we are using two – a key path and a key generator.

IndexedDB stores data in key value pairs. When you create a new object store, you can use either a key path or a key generator, or neither, or both. In this case we are using a key path defined by name and a key generator defined as auto-incrementing. This means that the data store must contain a JavaScript object to represent each user note. The key path is stored as a property within each note object, containing the auto-incremented number generated by the key generator, making each object in the data store unique. You can also choose to make any object property you are using unique with an index, which we will cover below.

When this line executes, supporting browsers should create a store with the specified properties. However, we have not indicated anything yet about the content of items in the note store.

Create Indices

The note database is going to store the time, text content and unique ID for each note. We are going to create an index for the time and text content, although this is not strictly necessary. Creating an index for a database record attribute allows you to search on the values stored for those attributes if you wish to do so. After the line in which we created the object store, add the following:

//create indices in case we want to search on these noteObjectStore.createIndex("when", "when", { unique: false }); noteObjectStore.createIndex("text", "text", { unique: false });

The first line creates an index for the time property of each note and the second for the text content. The parameters represent the index name, key path name and an array of optional parameters. We don’t need the notes to have unique times or content values, so we set the unique constraint to false.

Without an index, you would only be able to look up database items based on the auto-incremented ID key – with these indices, you will be able to query based on the values held for a note’s date and text content. You can also use the index to enforce constraints such as uniqueness, as above. However, you do not need to create indices for your data store so you can omit these two lines of code if you prefer.

Conclusion

That’s all for this part of the series. We have now implemented creating the object store for our user notes and have completed the “init” method. Next time we will add methods to insert and delete notes, before ultimately presenting the notes within the Web page in the final part. If you want to experiment further with IndexedDB for future projects, there are lots of options you can explore for the steps we have carried out in this tutorial, particularly with the structure of the database as well as the keys used within it.

...

Indexed Database (IndexedDB) is an API for storing data at client side and a proposed standard, still in the relatively early stages of development. With the IndexedDB API, developers can store data objects within the user’s browser. In this tutorial series we will explore the basics of this emerging technology by building a simple note-keeping facility for a Web page or site. Users will be able to add and delete notes, with past notes automatically displaying when the user revisits. The notes are private to the user as they are stored locally. A typical use for this utility could be on a site with informational content, such as educational material.

At the time of writing, browser support is varied – IndexedDB itself is supported by Firefox 4+, Chrome 11+ and the forthcoming Internet Explorer 10. However, readers should note that we will be using methods in this tutorial series that are not currently supported by Chrome (specifically the “onupgradeneeded” method in part 2). It goes without saying that IndexedDB is not a feature you can rely on yet, but it is hoped that Chrome and other browsers will be improving support in the near future. In these tutorials we will be getting to grips with the technology from an educational point of view, but in any live sites you are working on, make sure you don’t use IndexedDB for vital functions just yet.

This series is in four parts:

Setup and opening the note database Creating the object store Adding and deleting notes Querying and presenting notes

The following image should give you an idea what we’re building (pictured in Firefox):

Create the Page

Let’s use an HTML5 page outline as follows:

<!DOCTYPE html> <html> <head> <style type="text/css"> </style> <script type="text/javascript"> </script> </head> <body> </body> </html>

We will be adding code to the body, script and style sections throughout the series. First, add two sections in the page body:

<div id="content"> <h2>Page Content</h2> </div> <div id="note_col"> <h2>Your Notes</h2> </div>

The left side of the page will include the page content, with the note section on the right. Inside the content section add anything you like after the heading, e.g.:

<p>Here is the page content</p>

In the “note_col” div, after the heading, add the following element:

<div id="notes"> </div>

This is where the notes will be displayed. At the moment it is empty, but our JavaScript code will add elements to this when the user creates notes. Next, still inside the “note_col” element, add the following section to capture user note input:

<div id="add">Add a new note:<br/> <textarea id="note_in" rows="5" cols="30"></textarea><br/> <input type="button" value="add" onclick="addNote()"/> </div>

Take a moment to look over this code. We use a textarea to capture the user note text, with the button calling a JavaScript function we will add later.

Style the Elements

Let’s add some CSS for the initial appearance of these elements. In the style section of your page head, add the following section to apply general styling to the page body:

body { font-family:sans-serif; color:#333333; font-size:small; background-color: #ccccff; background-image: -moz-linear-gradient(top,...