CS412: Mobile Application Development (2018.A.01)

Unit 3: HTML/CSS/DOM and Scripting

• Unit 3 Learning Outcomes Page

• 3.1: HTML

  • University of California, Berkeley: Erik Wilde's "Mobile Application Design and Development: HTML/CSS and DOM" URL

    Mark as completed

    Read these slides.

  • Stanford University: Ben Galbraith's "Introduction to Web Technologies and HTML5" Page

    Mark as completed

    Watch this lecture, which provides a good introduction to HTML, CSS, and JavaScript.

  • Tizag: "HTML Tutorial" URL

    Mark as completed

    Work through this tutorial. You may find it helpful to download a free tool, such as ACEHTML, to help you test out some HTML on your browser.
    

  • W3Schools: "HTML Quiz" URL

    Mark as completed

    Attempt this quiz to test your knowledge of HTML.
    

  • 3.1.1: Validation

    • Terry Sullivan's "Understanding HTML Validation" URL

      Mark as completed

      Read this article. Also, if you wish to validate some HTML pages, you can do this by going to http://validator.w3.org/.

  • 3.1.2: Rendering

    • Tali Garsiel's "How Browsers Work" URL

      Mark as completed

      Work through this tutorial.
      

  • 3.1.3: Difference between Web Browsers

    • A. Lundgren's "Comparison between Browsers" URL

      Mark as completed

      Read this article.

    • Creating a Simple Web Form URL

      Mark as completed

      Work through this activity. There are some exercises to complete on your own as well as some code to try. You will want to use an editor such as TextEdit or Notepad++ to work with the HTML files. Also, you should test all of your HTML files in a web browser of your choice. Please review the solutions when you are ready.

• 3.2: Cascading Style Sheets (CSS)

  • Interactive CSS Laboratory URL

    Mark as completed

    Follow the instructions to complete this assignment. When you are finished, check your answers against the answer key.
    

  • W3Schools: "CSS Tutorial" URL

    Mark as completed

    Work through this tutorial.
    

  • W3Schools: "CSS Quiz" URL

    Mark as completed

    Attempt this quiz to test your knowledge of CSS.
    

• 3.3: Document Object Model (DOM)

  • Document Object Model (DOM) Interactive Laboratory URL

    Mark as completed

    Work through this activity. When you are finished, you may check your work against the solutions.
    

  • W3Schools: "DOMTutorial" URL

    Mark as completed

    Work through this tutorial, including the examples.
    

• 3.4: JavaScript

  • University of California, Berkeley: Erik Wilde's "Mobile Application Design and Development" URL

    Mark as completed

    Read these slides.

  • W3Schools: "JavaScript Tutorial" URL

    Mark as completed

    Work through these tutorials.
    

  • 3.4.1: Uses

    • The New Boston: "Introduction to JavaScript" Page

      Mark as completed

      Watch this video.
      

  • 3.4.2: Basic Constructs

    • 3.4.2.1: Variables

      • The New Boston: "Variables" Page

        Mark as completed

        Watch these videos.

    • 3.4.2.2: Strings

      • The New Boston: "Using Variables with Strings" Page

        Mark as completed

        Watch this video.
        

    • 3.4.2.3: Operators

      • Michael Moncur's "Understanding Expressions and Operators" URL

        Mark as completed

        Read this page.
        

      • The New Boston: "Operators" Page

        Mark as completed

        Watch these videos.

    • 3.4.2.4: Arrays

      • The New Boston: "Arrays" Page

        Mark as completed

        Watch these videos.

    • 3.4.2.5: Objects

      • The New Boston: "Objects" Page

        Mark as completed

        Watch these videos.

  • 3.4.3: Functions

    • The New Boston: "Functions" Page

      Mark as completed

      Watch these videos.

  • 3.4.4: Control Structures

    • The New Boston: "Control Structures" Page

      Mark as completed

      Watch these videos.

  • 3.4.5: Looping

    • The New Boston: "Loops" Page

      Mark as completed

      Watch these videos.

  • 3.4.6: Modes of Execution

    • Michael Moncur's "How JavaScript Fits into a Web Page" URL

      Mark as completed

      Read this page and the following page.

  • 3.4.7: Interactive Lab

    • Interactive JavaScript Laboratory File

      Mark as completed

      Work through the laboratory, which will cover how to use JavaScript to validate an HTML form. You may download a zipped collection of the HTML files here. All of the HTML pages can be tested in any browser. As you work through the tutorial, utilize the JavaScript Tutorial as a reference. When you are finished, you may check your work against the answer key.
      

• 3.5: Assessment

  • W3Schools: "JavaScript Quiz Test" URL

    Mark as completed

    Attempt this quiz to test your knowledge of JavaScript.