HTML, CSS and Event Tutorial

ITCS 5122/4122 Visual Analytics

Fall 2023

Professor Zachary Wartell

Due Date:  See Canvas Assignment

Revised:Wed 9/13/2023 2023 -0500(git-log)

Copyright September 2018, Zachary Wartell @ University of North Carolina at Charlotte
All Rights Reserved.

Learning Objectives

Overview

This course focuses on 2D/3D computer graphics and programming with WebGL.  WebGL runs in the context of a HTML5 web browser environment with JavaScript.  This tutorial selects a subset of several on-line resources to cover the minimal amount of HTML5, CSS and event handling required to get the most out of the book, WebGL Programming Guide, that will be used in this class.

Tutorial Structure

This tutorial has 3 parts.  Note, the parts are very different in size and complexity.

  1. Part 1 - required for all students
  2. Part 2 - Each student is required to either Option I or Option II below:
    1. Option I - HTML, CSS, Event Handling:   This option is designed for students without experience in either HTML, CSS, or HTML5 Event handling.   If you are missing any of these backgrounds you must complete the entirety of Option I.
    2. Option II - Description of Prior Experience in HTML, CSS and Event Handling: 
      This option is designed for individuals who already have programming experience in all three areas:  HTML, CSS, and HTML5 Event handling.  "Part 2 - Option II " is very short but must be completed if you choose Option II.
  3. Part 3 - required for all students

Part 1:  Project Organization and Setup

Part 1 covers project organization, setup, and general requirements.

git setup

Your working directory structure and your git repository structure must be exactly as described below.

  1. Create a Git repository called 6120-html-tutorialon the course's designated Git server following the guidelines prescribed for the course.   (Recall How to Create New Remote Repository in the earlier Git Tutorial and "Coding" Standards).

  2. If you have not already done so, create the following directory for your 6120 course work:
    $ mkdir ITCS_6120
     lucretius@monad42 ~/ITCS_6120
     $ cd ITCS_6120

  3. Clone your repo and enter the created directory.  
    lucretius@monad42 ~/ITCS_6120
     $ git clone URL of the 6120-html-tutorial repo
    /6120-html-tutorial.git
     Cloning into '6120-html-tutorial'
    [...]
     $ cd 6120-html-tutorial
  4. Inside the 6120-html-tutorial directory create a text file called README.md.  Add your name on the first line of the file.  

    1. Git commit the file with commit message "initial README.md"

  5. Inside the above directory create a second text file called Questions.txt. Add your name on the first line of the file.  

    1. Git commit the file with the commit message "initial Questions.txt"

    Some of the exercises in this tutorial may involve you answering questions.   You will write you answers in this file.

Setup for Chrome and Chrome DevTools

  1. Download and install the Chrome browser https://www.google.com/chrome

Git Commit Protocol and Rubric

In the instructions below, you are required to make git commits at specific points using specific commit messages.   This is a required part of the assignment.   It also introduces you to good git practices.

  1. For a given exercise that includes specific git commit instructions, if there is not at least 1 git commit message associated with that exercise, 1 point will be subtracted for "poor software development practices" for that exercise. 

    The student’s commit message need not be a verbatim copy of the commit message given in the exercise’s instructions, but it should be very similar.    (But you can simply cut & paste the messages, so they really should be verbatim).

    The grader will allow for a few of the required commit messages to be missing without incurring a penalty.

    Note: If you accidentally commit with a missing or bad message, you can correct the message using git commit –amend option (see https://git-scm.com/book/en/v2/Git-Basics-Undoing-Things)

    Finally, extra commit's are perfectly fine and common practice, such for fixing other types of coding mistakes, etc.
  2. For exercises that require students modify code already given to you, if only the original example code is committed with no change & there is no evidence from the student (documentation, notes, etc) of trying to solve the exercise, then minimal points will be awarded for that exercise.

The complete grading Rubric is available on Canvas.

Part 2:Option I - HTML, CSS, Event Handling

Part 2 : Option I is series of readning and exercises form the MDN doc's on HTML, CSS and event handling.

Overview of HTML

Go to the MDN page https://developer.mozilla.org/en-US/docs/Learn/HTML.   Note the expandable index on the left hand-side of the page.   Expand the first sub-section.

This assignment will guide you through reading the sub-sections highlighted red in the image above.

The instructions below tell you:

  • What sections of the Chrome DevTools and Developer Mozilla (MDN) webpages to read
  • Which of the "Active Learning" exercises in these articles you must perform
  • How to submit the results of these "Active Learning" exercises to your git repository.

Introduction to HTML

From the index, follow the link Introduction to HTML overview.    Read just the first paragraph of this page.

Getting Started with HTML

From the index, follow the link Getting Started with HTML.

  1. Getting Started with HTML - read through the first sub-section What is HTML

  2. Anatomy of an HTML element  - read this sub-section pausing to do the MDN "Active Learning" exercises listed below:
    1. Exercise:    Do "Active learning: creating your first HTML element

      This exercise.does not require you add anything to your Git repo.

  3. Attributes- read this sub-section and do the MDN "Active Learning" exercises listed below:
    1. Exercise:  Do "Active learning: Adding attributes to an element

      This exercise.does not require you add anything to your Git repo.

  4. Anatomy of a HTML document - read all.  However when you reach each Active Learning exercise perform the exercise with the instruction modifications listed below:

    1. Exercise [anatomy-of-HTML]: Do "Active learning: Adding some features to an HTML document

      Perform the entire exercise in a separate file, index.html, as suggested in the Active Learning instructions.   Then:

      1. Create a sub-directory
        lucretius@monad42 ~/ITCS_6120/6120-html-tutorial
         $ mkdir anatomy-of-HTML
      2. Move index.html to the above directory.    

        1. Git commit the file with the message "-exercise anatomy-of-HTML
  5. Entity references: Including special characters in HTML - read all.

  6. HTML comments - read all.

  7. Summary - read all.

What’s in the head? Metadata in HTML

Goto the next MDN subsection.   There is a "Next" button at the top and bottom of the page that you just read.  

  1. What’s in the head? Metadata in HTML - read up to and including the first sub-section What is the HTML head?

  2. Adding a title - read all but when you reach each Active Learning exercise perform the exercise with the instruction modifications listed below:

    1. Exercise [adding-a-title]:  Do "Active learning: Inspecting a simple example

      Perform the entire exercise in a separate file,       title-example.html, as suggested in the Active Learning instructions.

      1. Create a sub-directory
        lucretius@monad42 ~/ITCS_6120/6120-html-tutorial
         $ mkdir adding-a-title
      2. Move title-example.html to the above directory.    
        1. Git commit the file with the message "-exercise adding-a-title
  3. Metadata: the <meta> element - read all.  When you reach each Active Learning exercise perform the exercise with the instruction modifications listed below:

    1. Exercise [char-encoding]:  Do "Active learning: Experiment with character encoding

      Perform the entire exercise by editing your file from the previous exercise, title-example.html.
      1. Save the file changes.

        1. Git commit with the message "-exercise char-encoding "
    2. Exercise:  Do "Active learning: The description's use in search engines

      This exercise.does not require you add anything to your Git repo.

  4. Adding custom icons to your site - skip this sub-section

  5. Applying CSS and JavaScript to HTML - read all.  When you reach each Active Learning exercise perform the exercise with the instruction modifications listed below:

    1. Exercise [applying-CSS]:  Do "Active Learning:  Applying CSS and JavaScript to a page

      Perform the entire exercise in separate files,       meta-example.html, etc., as suggested in the Active Learning instructions.
      1. Create a sub-directory
        lucretius@monad42 ~/ITCS_6120/6120-html-tutorial
         $ mkdir applying-CSS-and-JS
      2. Move meta-example.html and the other files to the above directory.    

        1. Git commit the file with the message "-exercise applying-CSS
  6. Setting the primary language of the document - read all.

HTML text fundamentals

Goto the next MDN page, HTML text fundamentals. 

  1. The basics: Headings and Paragraphs - read the intro for HTML text fundamentals and this first sub-section..

    1. Exercise:  Do "Active learning: Giving our content structure
       
      This exercise.does not require you add anything to your Git repo.

  2.  Lists - read all.  When you reach each Active Learning exercise perform the exercise with the instruction modifications listed below:

    1. Exercise:  Do "Active learning: Marking up an unordered list"
       
      This exercise.does not require you add anything to your Git repo.

    2. Exercise:  Do "Active learning: Marking up an ordered list"
       
      This exercise.does not require you add anything to your Git repo.
    3. Exercise [recipe-page]:  Do "Active learning: Marking up our recipe page"
       
      Perform the entire exercise in a separate file,       text-start.html, as suggested in the Active Learning instructions.

      1. Create a sub-directory
        lucretius@monad42 ~/ITCS_6120/6120-html-tutorial
         $ mkdir recipe-page
      2. Move text-start.html to the above directory.    

        1. Git commit the file with the message "-exercise recipe-page
  3. Emphasis and importance - read all. When you reach each Active Learning exercise perform the exercise with the instruction modifications listed below:

    1. Exercise:  Do "Active learning: Let's be important!"

      This exercise does not require you add anything to your Git repo.
  4. Summary - read all
  5. Test your skills!  - read all. When you reach each active learning Task, perform the task with the instruction modifications listed below:
    1. Exercise:  Task 1
      Instead of updating the live code, follow the alternative directions and download the starting point files for Task 1
      1. Create a sub-directory
        lucretius@monad42 ~/ITCS_6120/6120-html-tutorial
         $ mkdir test-your-skills-task-1
      2. Move all your modified Task 1 files to the above directory.    

        1. Git commit the file with the message "-exercise test your skills - Task 1"
    2. Exercise:  Task 2
      Instead of updating the live code, follow the alternative directions and download the starting point files for Task 2.   Repeat the process in Task 1 for Task 2, but create a directory test-your-skills-task-2.

      1. Git commit the file with the message "-exercise test your skills - Task 2"
    3. Exercise:  Task 3
      Instead of updating the live code, follow the alternative directions and download the starting point files for Task 2.   Repeat the process in Task 1 for Task 3, but create a directory test-your-skills-task-3.

      1. Git commit the file with the message "-exercise test your skills - Task 3"

CSS – Styling the Web

Next, you will read and work through sub-sections of the MDN topic CSS — Styling the Web.

  1. CSS — Styling the Web - read all.

CSS first steps

  1. CSS first steps overview. -  Read up to and including the section "Prerequisites."   Skip the rest of the sub-section.
  2. What_is_CSS - Read up to and including "CSS Modules".   Skip the rest of the sub-section.
  3. Getting started with CSS :: Starting with some HTML - read all.   When you reach each Active Learning exercise perform the exercise with the instruction modifications listed below: 
    1. Exercise [started-with-CSS]: As described in this MDN section, created the file, index.html
      1. Create a sub-directory:
        lucretius@monad42 ~/ITCS_6120/6120-html-tutorial
         $ mkdir started-with-CSS
      2. Move the file to the above directory.
        1. Git commit the file with the message "-exercise started-with-CSS"
  4. Adding_css_to_our_document - read all.  When you reach each Active Learning exercise perform the exercise with the instruction modifications listed below:

    1. Exercise [add-CCS]: As described in this MDN section, create various the files, style.css, etc. Place them in your  started-with-CSS directory, modifying them as necessary.
      1. Git commit with the message "-exercise add-CCS"
  5. Styling_html_elements - read all.   When you reach each Active Learning exercise perform the exercise with the instruction modifications listed below:

    1. Exercise:  Perform described exercise on your local file instead of using the embedded interactive editor

      1. Git commit with the message "-exercise Styling HTML elements"
  6. Changing the default behavior of elements - read all.  When you reach each Active Learning exercise perform the exercise with the instruction modifications listed below:

    1. Exercise [changing-behavior]: As described in this MDN section, modify your previously created the files .
      1. Git commit the changes the message ""-exercise changing-behavior""
  7. Adding a class - read all.  When you reach each Active Learning exercise perform the exercise with the instruction modifications listed below:

    1. Exercise [adding-a-class]: As described in this MDN section, modify your previously created the files
      1. Git commit the changes the message ""-exercise adding-a-class""
  8. Styling things based on their location in a document- read all.   When you reach each Active Learning exercise perform the exercise with the instruction modifications listed below:
    1. Exercise [styling-on-location]: As described in this MDN section, modify your previously created the files that you placed your sub-directory started-with-CSS.
      1. Git commit the changes the message "-exercise styling-on-location"

Skip the rest of the "Getting started with CSS" section.

How CSS is structured

  1. Applying CSS to your HTML - read all of this first sub-section of How_CSS_is_structured
  2. Playing with the CSS in this article - read all. When you reach each Active Learning exercise perform the exercise with the instruction modifications listed below:
    1. Exercise [playing-with-CSS]: As described in this MDN section, create the files, index.html, etc.
      1. Create a sub-directory:
        lucretius@monad42 ~/ITCS_6120/6120-html-tutorial
         $ mkdir CSS-structure
      2. Move the files to the above directory.

        1. Git commit the file with the message "-exercise playing-with-CSS"

  3. Selectors - read all. When you reach each Active Learning exercise perform the exercise with the instruction modifications listed below:
    1. Exercise [selectors]: As described in this MDN section modify the files in your CSS-structure sub-directory.

      1. Git commit the file with the message "-exercise selectors"

  4. Properties and values - read only up but not including "Functions". When you reach each Active Learning exercise perform the exercise with the instruction modifications listed below:
    1. Exercise [properties]: As described in this MDN section modify the files in your CSS-structure sub-directory.

      1. Git commit the file with the message "-exercise properties"
       
  5. @rules and Shorthands - skip both these sections.
  6. Comments - read all. When you reach each Active Learning exercise perform the exercise with the instruction modifications listed below:
    1. Exercise [comments]: As described in this MDN section modify the files in your CSS-structure sub-directory.

      1. Git commit the file with the message "-exercise comments"

Skip the rest of "How CSS is structured".

How CSS works (the DOM)

  1. How does CSS actually work? - read all of this first sub-section of How_CSS_works
  2. About the DOM - read all.
  3. A real DOM representation -  read all. 
  4. Applying CSS to the DOM - read all. 
  5. What happens if a browser encounters CSS it doesn't understand? - read all.

The box model

  1. Block and inline boxes - read all of this first sub-section of.The_box_model
  2. Outer_display_type  - read all.
  3. Inner_display_type  - read all.
  4. Examples_of_different_display_types - read all. When you reach each Active Learning exercise perform the exercise with the instruction modifications listed below:
    1. Exercise [playing-box]:

      This MDN section provides an interactive example that can be done directly within the webpage's embedded interactive editor.

      After you accomplish the task using the embedded interactive editor, copy your solution code into in a local file as described next.
    2. Create a sub-directory:
      lucretius@monad42 ~/ITCS_6120/6120-html-tutorial
       $ mkdir different-display-types
    3. Inside the above directory, create a minimal working HTML file, index.html, and then insert your solution code that you developed in the embedded interactive editor into index.html.

      1. Git commit the file with the message "-exercise different-display-types"

  5. What is the CSS box model? - read all.
  6. Playing_with_box_models - read up to but not including "Use browser DevTools to view the box model". When you reach each Active Learning exercise perform the exercise with the instruction modifications listed below:
    1. Exercise [playing-box]:

      This MDN section provides an interactive example that can be done directly within the webpage's embedded interactive editor.

      After you accomplish the task using the embedded interactive editor, copy your solution code into in a local file as described next.
    2. Create a sub-directory:
      lucretius@monad42 ~/ITCS_6120/6120-html-tutorial
       $ mkdir playing-with-box-models
    3. Inside the above directory, create a minimal working HTML file, index.html, and then insert your solution code that you developed in the embedded interactive editor into index.html.

      1. Git commit the file with the message "-exercise playing-with-box-models"


Skip the rest of "How CSS works"..

Event Programming (and a teeny bit of JavaScript)

This section guides you through reading about event handling, but first it covers a teeny bit of JavaScript so as to better understand the event handling tutorial.   (A latter optional tutorial in this course will cover JavaScript in depth).

What is JavaScript

Goto topic What is JavaScript?

  1. A high-level definition - read all.  When you reach each Active Learning exercise perform the exercise with the instruction modifications listed below:

    1. Exercise [javascript-label]:
      1. Create a sub-directory:
        lucretius@monad42 ~/ITCS_6120/6120-html-tutorial
         $ mkdir javascript-label
      2. Inside that sub-directory download and save the example code (the link is given at the end the "A high-level definition" section).

        Verify the code displays correctly in Chrome.
        1. Git commit the file with the message "-exercise javascript-label
        2. Using a text editor, change the code to display ‘First Player’ instead of ‘Player 1’.   
          Modify the background color of the paragraph style.   Save your changes and verify the page appears correctly in Chrome.
        3. Git commit the file(s) with message: "-exercise javascript-label"
  2. So what can it really do? - read all.
    1. Exercise [third-party-apis]:
      1. After reading, online find any Third party API not mentioned in the text.   Write the API name and the web address in your Questions.txt file.   Put the text "JS 1)" on the line above your answer in the file.

      2. Git commit the file(s) with message "-exercise third-party-apis"
  3. What is JavaScript doing on your page?- read all
    1. Exercise [what-is-JS]:
      1. After reading, research on-line to find out how two browsers (say Chrome and one other browser of your choice) handles JavaScript.  Is it interpreted?  Compiled?  Some combination of both?

        Write your answers in your Questions.txt file.   Put the text "JS 2)" on the line above your answer in the file.

        1. Git commit the file(s) with message: "-exercise what is JS doing"
  4. How do you add JavaScript to your page? - read up to but not including "Script loading strategies".  When you reach each Active Learning exercise perform the exercise with the instruction modifications listed below:

    While reading do the following exercises:
    1. Exercise [internal-js]: Do the exercise in sub-section "Internal JavaScript
      1. Create a sub-directory:
        lucretius@monad42 ~/ITCS_6120/6120-html-tutorial
         $ mkdir internal-javascript
      2. Move all the code for the MDN exercise into the above sub-directory.

        Verify it displays correctly in Chrome.
      3. Git commit the file(s) with message:  "-exercise internal-javascript"

    2. Exercise [external-js]: Do the exercise in sub-section "External JavaScript
      1. Create a sub-directory:
        lucretius@monad42 ~/ITCS_6120/6120-html-tutorial
         $ mkdir external-javascript
      2. Move all the code for the MDN exercise into the above sub-directory.

        Verify it displays correctly in Chrome.
      3. Git commit the file(s) with message "-exercise external-javascript"

  5. Comments - read all.
  6. Summary - read all.

This introduction to JavaScript should be enough in order to complete the rest of this tutorial.   A later tutorial in the course will cover JavaScript in greater details.

Introduction to Events

Goto the sub-topic Introduction to events.

  1. What is an event? - read all.

  2. Using addEventListener() - The exercises in this MDN section are spread over multiple MDN sub-sections.  To clarify how you should submit these activities to your git repo, the sub-sections are listed as separate numbered steps below.   Start by preparing a directory as follows
    1. Create a sub-directory:
      lucretius@monad42 ~/ITCS_6120/6120-html-tutorial
       $ mkdir random-color-addeventlistener
    2. The intro to Using addEventListener() discusses downloading example files.   Place them in the above directory. 

      1. Git commit with message "-exercise:start random-color-addeventlistener"
  3. Using addEventListener() : Listening for other events - read and perform the MDN exercises on the files in your random-color-addeventlistener 
    1. Exercise:   Git commit with message "-exercise:Listening for other events"
  4. Using addEventListener() : Removing listeners - read.
    This exercise.does not require you add anything to your Git repo.
  5. Using addEventListener() : Adding multiple listeners for a single event - read.

    1. Exercise [multiple-listeners]:

      Add additional listeners to some of the code in your random-color-addeventlistener directory.   Make the additional listeners do something that is visible in the browser.

      1. Git commit with message ""-exercise: multiple listeners""
  6. Using addEventListener() : Adding multiple listeners for a single event - read.
  7. Other event listener mechanisms - read all.  When you reach each Active Learning exercise perform the exercise with the instruction modifications listed below
    1. Exercise [other-mechanisms]:     

      Modify some of the code in your random-color-addeventlistener directory to use event handler properties.

      1. Git commit with message ""-exercise: other-mechanisms""
  8. Event_Objects - Read all and download the source code that this MDN section refers to.  When you reach each Active Learning exercise perform the exercise with the instruction modifications listed below:
    1. Exercise [event-object]:    

      1. Create a sub-directory:
        lucretius@monad42 ~/ITCS_6120/6120-html-tutorial
         $ mkdir event-object
      2. Perform the MDN exercises in the sub-section
        1. Git commit with message ""-exercise: event-object
      3. Motify the code to show a border of a few pixels on the button and also randomly change the border color on each button click.

      4. Git commit the file(s) with message: "-playing :)
  9. Extra_properties_of_event_objects - read all.  When you reach each Active Learning exercise perform the exercise with the instruction modifications listed below:
    1. Exercise [extra properties]:  Experiment with the embedded interactive editor exercise
      This exercise.does not require you add anything to your Git repo.
    2. Exercise [key events]:

      Modify some of the code in your random-color-addeventlistener directory to respond to 3 different key events.   Make each event handler trigger some visible change on the page.

      1. Git commit with message: "-exercise: key_events"
  10. Preventing_default_behavior - Download the source code that this MDN section refers to.  As you read and you reach each active learning exercises perform the exercises on the downloaded files and inside the directory described below::
    1. Exercise: [preventing-defaults]
      1. Create a sub-directory:
        lucretius@monad42 ~/ITCS_6120/6120-html-tutorial
         $ mkdir preventing-defaults
      2. Put all the MDN's sections downloaded files in this directory and modified them as suggested by the MDN docs..
        1. Git commit with message:  "-exercise: preventing-defaults"

  11. Event_Bubbling
    1. Exercise: [parent-element]  Read and do the exercise in MDN sub-section Setting_a_listener_on_a_parent_element

      This exercise does not require you add anything to your Git repo.
    2. Exercise: [bubbling-example  Read and do the exercise in MDN sub-section Bubbling_example

      This exercise.does not require you add anything to your Git repo.
    3. Exercise: [video-player]  Read and do the exercise in MDN sub-section Video_player_example. Download the code from this link, video-player.html and organize the file(s) as follows:
      1. Create a sub-directory:
        lucretius@monad42 ~/ITCS_6120/6120-html-tutorial
         $ mkdir video-player
      2. Put all the file you created in the above directory and verify result web page works as expected in Chrome.
        1. Git commit with message:         "-exercise: video-player"
    4. Exercise: [stop-propagation]  Read and do the exercise in MDN sub-section Fixing_the_problem_with_stop_propagation. Apply the discussed changes to your code in your video-player directory.

      1. Git commit with message:  "-exercise: fixed propagation problem"
    5. Exercise: [event-capture]  Read and do the exercise in MDN sub-section Event_capture.

      This exercise does not require you add anything to your Git repo.
  12. Event_Delegation - Download the source code that this MDN section refers to. As you read each active learning exercises perform the exercises on the downloaded files and inside the directory described below:
    1. Exercise: [event-delegation]
      1. Create a directory
        lucretius@monad42 ~/ITCS_6120/6120-html-tutorial
         $ mkdir event-delegation
      2. Place the downloaded files in this directory and perform any modifications described in the MDN docs.
        1. Git commit with message: "-exercise: event-capture"
      3. Modify the code to have 64 tiles (8 x 8) with each one 50px in height.
        1. Git commit with message: "-changed to 8 x 8 tiles"

Part 2: Option II - Description of Your Prior Experience in HTML, CSS and Event Handling

Part 2 : Option II is only for students meeting the criteria discussed in Section Tutorial Structure. In your previously created README.md file, add the following:
  1. List all courses you already took or are currently taking where you learned HTML5, CSS, and Event Handling.

  2. List any other experience you had outside of a class work where you learned HTML5, CSS, and Event Handling.
  3. Git commit and git push.

Part 3: Chrome DevTools

Part 3 is required of all students. Part 3 is series of readings and exercises from the Chrome DevTool doc's.

Panel Overview

  1. Using Chrome goto https://developers.google.com/web/tools/chrome-devtools/

  2. Panel Overview:

    Read all of the "Chrome DevTools" page -- but do not follow any further hyperlinks.  The goal is just to get a rough idea of the functionality that the various "panels" provide.

Get Started With Viewing And Changing The DOM

Under "Elements Panel", follow the link Get Started With Viewing And Changing The DOM
  1. Read the first paragraph and follow the link to Appendix: HTML versus the DOM and read through that appendix before continuing.
  2. Appendix: HTML versus the DOM -

  3. View DOM nodes - return to "Get Started With Viewing And Changing The DOM" and continue reading sub-section "View DOM nodes
    1. Exercises:  Do all the exercises in this sub-section.  Regarding the further links embedded this sub-section follow and read all them -- but skip Get Started With Viewing And Changing CSS.

  4. Edit the DOM

    Do all the exercises in this sub-section. 

    Take screenshot(s) of the rendered HTML page as it appears after all your DOM changes.  Save it to png file(s) named edit-DOM.png.   If needed, take multiple screen capture and save to multiple files (edit-DOM-1.png, edit-DOM-2.png, etc.) in order to show the entirety of the changes that occurred to the rendered HTML page.   (It's also acceptable to composite the multiple screenshots into a single .png, if you prefer).

    1. Create the following directory structure:
      lucretius@monad42 ~/ITCS_6120/6120-html-tutorial
       $ mkdir view-and-change-DOM
    2. Move the png file(s) into this directory.

    3. Git commit the above files with commit message  "-exercise edit-the-dom"
  5. Access nodes in the Console 
    1. Exercises:  Do all the exercises, but there is nothing to submit to git.

  6. Break on DOM changes
    1. Exercises:  Do all the exercises, but there is nothing to submit to git.

  7. Next Steps -  read this sub-section.   (But you do not have to follow all the links).

    Stop here.

Get Started With Viewing And Changing CSS

  1. View an element's CSS- read all and ...
    1. Exercise:     Do them all, but there is nothing to submit to git.

  2. Add a CSS declaration to an element - read all and ...
    1. Exercise:     Do them all, but there is nothing to submit to git.

  3. Add a CSS class to an element - read all and ..
    1. Exercise:     Do them all, but there is nothing to submit to git.

  4. Add a pseudostate to a class - read all and ...
    1. Exercise:     Do them all, but there is nothing to submit to git.

  5. Change the dimensions of an element - read all and ...
    1. Exercise:     Do them all, but there is nothing to submit to git.

Get Started With The Console

Go to page  Get Started With The Console.

  1. Viewing logged messages – read this section.

  2. Running JavaScript – read this section

Log messages in the Console

Go to Log messages in the Console.

  1. First, prepare a git repo directory as follows:
    Exercise:

    Create the following directory structure:
    lucretius@monad42 ~/ITCS_6120/6120-html-tutorial
     $ mkdir get-started-console


  2. Set up the demo and DevTools - As described in this Chrome doc article set up the demo and DevTools.  Read and do all the exercises in this section.

  3. Click the Settings Icon in the Console ().   Enable the check box |Preserve Log|.   Click the Settings Icon again to close the Settings panel.

  4. Exercise [save-log]:
    1. Return to the Console window and right click the mouse on any Console output line.   A pop-up menu will list an option |Save As|.    Select |Save As|.    This opens a dialog box to save all the text that you typed in at the Console.  
    2. Save the file to the directory, get-started-console that you created the directory earlier.

    3. Verify the file is saved to the directory:
      lucretius@monad42 ~/ITCS_6120/6120-html-tutorial/get-started-console /
       $ ls developers.google.com-1535898597380.log
      [.your file name will differ.]
       lucretius@monad42 ~/ITCS_6120/6120-html-tutorial/get-started-console /
       $ cat developers.google.com-1535898597380.log
      [cat displays the file contents… your details will differ.]       document.getElementById('changeMyText') button id="changeMyText">Change My Text/button document.getElementById('changeMyText').textContent = 'Hello' VM378:1 Uncaught TypeError: Cannot set property 'textContent' of null
      [... the rest of log file will appear here ... ]


    4. Git commit the above file(s) with commit message: "-exercise get-started-console #1
  5. View messages logged from JavaScript

    Read and do all the exercises this section.  Then save the console output log:
    1. Exercise [save log]:
      1. Return to the Console window and right click the mouse on any Console output line.   A pop-up menu will list an option |Save As|.    Select |Save As|.    This opens a dialog box to save all the text that you typed in at the Console.  
      2. Save the file to the directory, get-started-console that you created the directory earlier.
      3. Verify the file is saved to the directory (as discussed earlier)
      4. Git commit the above file(s) with commit message: "-exercise get-started-console #2
  6. View messages logged by the browser - Read and do all the exercises this section.  Then save the console output log as described below:
    1. Exercise [save log]:
      1. Return to the Console window and right click the mouse on any Console output line.   A pop-up menu will list an option |Save As|.    Select |Save As|.    This opens a dialog box to save all the text that you typed in at the Console.  
      2. Save the file to the directory, get-started-console that you created the directory earlier.
      3. Verify the file is saved to the directory (as discussed earlier)
      4. Git commit the above file(s) with commit message: "-exercise get-started-console #3"

  7. Use the Console alongside any other panel - read all.

Get Started With Running JavaScript In The Console

Go to Run JavaScript in the Console
  1. Click the Settings Icon in the Console ().   Enable the check box Preserve Log, (if it’s not already enabled). Click the Settings Icon again to close the Settings panel.
  2. Return to the "Console" window and right click the mouse on any Console output line.   In the pop-up menu, select |Clear console|.

  3. Now read the entire DevTools Run JavaScript in the Console article and work through all the examples.  (You do not have to follow every link within this article, it's up to you).

    When you are done, save the console log as follows:

    1. Exercise [save log]:
      1. Return to the "Console" window and right click the mouse.   In the pop-up menu, select |Save As|.    This opens a dialog box to save all your interactions on the Console.  

      2. Save the file to the directory, get-started-console that you created the directory earlier.

      3. Verify the file is saved to the directory (as described earlier)

      4. Git commit the above file(s) with commit message: "-exercise javascript-console"
Reminder: git push your local repo to the server and give the TA and professor reporter access.

RubricFixed max error in rubric

Academic Integrity

See the course syllabus regarding partial credit and the late penalty policy.  

This is an individual student project.   Each student should be writing and submitting their own code. 

Students can discuss general aspects of the various API's and tools with each other and this is strongly encouraged.   Discussing algorithm's at the pseudo-code level is also acceptable.  

However, it is not permissible:

If you have questions about whether using a particular resource is acceptable or not, email the TA and/or Professor.