Unit 3: HTML/CSS/DOM and Scripting
This unit will review HTML, CSS, the Document Object Model, and JavaScript. This unit will be helpful to those students who have not taken CS305 and will provide a refresher for those whose skills are rusty in these areas. We will look at basic web page design using HTML and review how cascading style sheets are used. The unit will conclude with a basic overview of JavaScript.
Completing this unit should take you approximately 18 hours.
3.1: HTML
Read these slides.
Watch this lecture, which provides a good introduction to HTML, CSS, and JavaScript.
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.
Attempt this quiz to test your knowledge of HTML.
3.1.1: Validation
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
Work through this tutorial.
3.1.3: Difference between Web Browsers
Read this article.
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)
Follow the instructions to complete this assignment. When you are finished, check your answers against the answer key.
Work through this tutorial.
Attempt this quiz to test your knowledge of CSS.
3.3: Document Object Model (DOM)
Work through this activity. When you are finished, you may check your work against the solutions.
Work through this tutorial, including the examples.
3.4: JavaScript
Read these slides.
Work through these tutorials.
3.4.1: Uses
Watch this video.
3.4.2: Basic Constructs
3.4.2.1: Variables
Watch these videos.
3.4.2.2: Strings
Watch this video.
3.4.2.3: Operators
Read this page.
Watch these videos.
3.4.2.4: Arrays
Watch these videos.
3.4.2.5: Objects
Watch these videos.
3.4.3: Functions
Watch these videos.
3.4.4: Control Structures
Watch these videos.
3.4.5: Looping
Watch these videos.
3.4.6: Modes of Execution
Read this page and the following page.
3.4.7: Interactive Lab
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
Attempt this quiz to test your knowledge of JavaScript.