Nan & Bob's Online - Exercise

Contact Us or call 1-877-932-8228
Nan & Bob's Online - Exercise

Nan & Bob's Online

Duration: 10 to 15 minutes.

Nan & Bob want to boost their online presence with a new, also mobile-optimized, site to sell books online. You'll build a very basic shell - a first page - for that site now.

  1. Open GettingStartedjQuery/Exercises/nanandbobonline.html in a file editor.
  2. Add links to CDN-hosted jQuery Mobile CSS, jQuery JavaScript, and jQuery Mobile JavaScript files in the head of the file.
  3. In the body of the document, add markup for the page and for the header, main content, and footer.
  4. Test the file by viewing in a mobile browser; the results should look like this: Nan & Bob's online screenshot


We can (and usually do) add CSS to our jQuery Mobile pages to style the look and feel of our work. Try adding some custom CSS - a <style> tag in the head of the page - to change the look of some aspect of an element on the page. Your solution might look something like shown below, where we've changed the font face (to "Georgia") and size (a little bigger) for the paragraph in the main body of the page:

Nan & Bob's online screenshot



We link to the various CSS and JavaScript files from the and CDNs. We add markup for the canonical jQuery Mobile page structure: a div with data-role="page" and divs for the header, main content, and footer.

Challenge Solution:


The only difference in the challenge solution is the addition of a style rule in the head of the document, assigning font-family:Georgia and font-size:1.5em for the paragraph contained in the main body of the page.