Training Guide: Programming in HTML5 with JavaScript and CSS3 Ebook

Practice exercises CHAPTER 9 407

1. Start Visual Studio. Click File and choose New Project. Navigate to Installed | Templates
   | Visual Basic or Visual C# | ASP.NET Empty Web Application.


2. Set the name of your application to AnimationExample.


3. Select a location for your application.


4. Set the solution name to AnimationExampleSolution.


5. Be sure to keep the Create Directory For Solution check box selected.


6. Click OK to create your new project.
   When the application is created, you will have an empty project.


7. To add a home page, right-click the AnimationExample project in the Solution Explorer
   window, choose Add, select HTML Page, and name it default.html.


8. To set it as the start page, right-click the new default.html page in Solution Explorer
   and click Set As Start Page.


9. Add a reference to jQuery by right-clicking the project node. Click Manage NuGet
   Packages. Type jQuery in the search text box. Click the Install button on the jQuery
   result.


10. In the Solution Explorer window, right-click the Scripts folder and add a JavaScript file
    called default.js.


11. In the Solution Explorer window, right-click the AnimationExample project, choose
    Add, select New Folder, and name it Content. In the Content folder, add a default.css
    style sheet file.


12. In the default.html file, reference the default.css, jquery-1.8.2.js, and default.js files by
    dragging the files from the Solution Explorer window and dropping them after the
    
    
    
    
    


13. Add a
    element that covers the screen with its id attribute set to cover.


14. Add a
    element that displays the message and sets its id attribute to messageBox.
    The element should look like the following.