Getting Started with HTML

Read just the first paragraph of Introduction to HTML

Next go to Getting Started with HTML and read through the MDN sections and perform the exercises listed below.

1. Getting Started with HTML - read through up to and including the first sub-section What is HTML
   
   
2. Anatomy of an HTML element  - read this entire sub-section, pausing to 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.
      
      
3. Attributes- read this entire 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" with the modifications described below.
      
      
      1. Use VS Code to perform the entire exercise in a separate file, index.html, as suggested in the "Active Learning" instructions. Place the files the subdirectory ~/ITCS_6120/6120/anatomy-of-html/
      2. git commit -m "-exercise anatomy-of-HTML" .
5. Character 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" with the modifications described below.
      
      1. Use VS Code to perform the entire exercise in a separates files as indicated in the "Active Learning" instructions. Place the files the subdirectory ~/ITCS_6120/6120/adding-a-title/
      2. git commit -m "-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" with the modifications described below.
      
      Use VS Code to perform the entire exercise by copying editing your files from the previous exercise into the subdirectory below and git commit:
      
      1. Use VS Code to perform the entire exercise by copying and editing your files from the previous exercise into the subdirectory ~/ITCS_6120/6120/char-encoding/
      2. git commit -m "-exercise char-encoding" .
   2. Exercise [search-engines]: 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 - Read all.
   
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" with the modifications described below.
      
      1. Use VS Code to perform the entire exercise in separate files, meta-example.html, etc., as suggested in the Active Learning instructions. Place the files in the subdirectory, ~/ITCS_6120/6120/applying-css/
      2. git commit -m "-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 all of this 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 [marking-up-an-recipe]: Do "Active learning: Marking up our recipe page" with the modifications described below.
      
      
      
      1. Use VS Code to perform the entire exercise in separate files as suggested in the Active Learning instructions. Place the files in the subdirectory, ~/ITCS_6120/6120/marking-up-a-recipe/
      2. git commit -m "-exercise marking-up-a-recipe" .
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.

Test Your Skills

1. Exercise: [Test your skills!] - Read all. When you reach Task 1,2 and 3, perform the task using VS Code with separate files in directories indicated below.
   
   1. Exercise:  Task 1
      
      1. Instead of updating the 'live code', download the starting point files for Task 1 and perform Task 1 in the directory, ~/ITCS_6120/6120/test-your-skills-task-1/
      2. git commit -m "-exercise test-your-skills-task-1" .
   2. Exercise:  Task 2
      
      1. Instead of updating the 'live code', download the starting point files for Task 2 and perform Task 2 in the directory, ~/ITCS_6120/6120/test-your-skills-task-2/
      2. git commit -m "-exercise test-your-skills-task-2" .
   3. Exercise:  Task 3
      
      
      1. Instead of updating the live code, follow the alternative directions and download the starting point files for Task 3 in the directory, ~/ITCS_6120/6120/test-your-skills-task-3/
      2. git commit -m "-exercise test-your-skills-task-3" .

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.   This section guides you through creating and modifying a series of HTML files. The numbered exercises below describe additional instructions for adding these files to your git repo: 
   1. Exercise [starting-with-some-HTML]: As described in this MDN section, created the file, index.html
      1. Create a sub-directory:
         

         ▽	lucretius@monad42 ~/ITCS_6120/6120 $ mkdir started-with-CSS

      2. Move the file to the above directory.
         1. git commit -m "-exercise started-with-CSS" .
4. Adding_css_to_our_document - read all.  This section guides you through creating and modifying a series of HTML files. The numbered exercises below describe additional instructions for adding these files to your git repo: :
   
   
   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 -m "-exercise add-CCS" .
5. Styling_html_elements - read all.   This section guides you through creating and modifying a series of HTML files. The numbered exercises below describe additional instructions for adding these files to your git repo: 
   
   
   1. Exercise:  Perform described exercise on your local file instead of using the embedded interactive editor
      
      
      1. git commit -m "-exercise Styling HTML elements" .
6. Changing the default behavior of elements - read all.  This section guides you through creating and modifying a series of HTML files. The numbered exercises below describe additional instructions for adding these files to your git repo: 
   
   
   1. Exercise [changing-behavior]: As described in this MDN section, modify your previously created the files .
      1. Commit the changes | git commit -m "-exercise changing-behavior" .
7. Adding a class - read all.  This section guides you through creating and modifying a series of HTML files. The numbered exercises below describe additional instructions for adding these files to your git repo: 
   
   
   1. Exercise [adding-a-class]: As described in this MDN section, modify your previously created the files
      
      1. Commit the changes | git commit -m "-exercise adding-a-class" .
8. Styling things based on their location in a document- read all.   This section guides you through creating and modifying a series of HTML files. The numbered exercises below describe additional instructions for adding these files to your git repo: 
   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. Commit the changes | git commit -m "-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. This section guides you through creating and modifying a series of HTML files. The numbered exercises below describe additional instructions for adding these files to your git repo: 
   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 $ mkdir CSS-structure

      2. Move the files to the above directory.
         1. git commit -m "-exercise playing-with-CSS" .

3. Selectors - read all. This section guides you through creating and modifying a series of HTML files. The numbered exercises below describe additional instructions for adding these files to your git repo: 
   1. Exercise [selectors]: As described in this MDN section modify the files in your CSS-structure sub-directory.
      1. git commit -m "-exercise selectors" .

4. Properties and values - read only up but not including "Functions". This section guides you through creating and modifying a series of HTML files. The numbered exercises below describe additional instructions for adding these files to your git repo: 
   
   1. Exercise [properties]: As described in this MDN section modify the files in your CSS-structure sub-directory.
      
      
      1. git commit -m "-exercise properties" .
       
5. @rules and Shorthands - skip both these sections.
6. Comments - read all. This section guides you through creating and modifying a series of HTML files. The numbered exercises below describe additional instructions for adding these files to your git repo:
   1. Exercise [comments]: As described in this MDN section modify the files in your CSS-structure sub-directory.
      1. git commit -m "-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
2. Outer_display_type  - read all.
3. Inner_display_type  - read all.
4. Examples_of_different_display_types - read all. This section guides you through creating and modifying a series of HTML files. The numbered exercises below describe additional instructions for adding these files to your git repo:
   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 $ 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.
      
   4. git commit -m "-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". This section guides you through creating and modifying a series of HTML files. The numbered exercises below describe additional instructions for adding these files to your git repo:
   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 $ 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.
      
   4. git commit -m "-exercise playing-with-box-models" .

What is JavaScript

Goto topic What is JavaScript?

1. A high-level definition - read all.  This section guides you through creating and modifying a series of HTML files. The numbered exercises below describe additional instructions for adding these files to your git repo:
   
   1. Exercise [javascript-label]:
      1. Create a sub-directory:
         

         ▽	lucretius@monad42 ~/ITCS_6120/6120 $ 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.
      3. 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.
      4. git commit -m "-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.
         
         
      2. git commit -m "-exercise what is JS doing" .
4. How do you add JavaScript to your page? - read up to but not including "Script loading strategies".  This section guides you through creating and modifying a series of HTML files. The numbered exercises below describe additional instructions for adding these files to your git repo:
   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 $ 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 -m "-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 $ 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 -m "-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 detail.

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 $ mkdir random-color-addeventlistener

   2. The intro to Using addEventListener() discusses downloading example files.   Place them in the above directory. 
      
      
      1. git commit -m "-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. git commit -m "-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 -m "-exercise: multiple listeners"
6. Other event listener mechanisms - read all.  This section guides you through creating and modifying a series of HTML files. The numbered exercises below describe additional instructions for adding these files to your git repo:
   
   1. Exercise [other-mechanisms]:     
      
      Modify some of the code in your random-color-addeventlistener directory to use event handler properties.
      
      
      1. git commit -m "-exercise: other-mechanisms"
7. Event_Objects - Read all and download the source code that this MDN section refers to.  This section guides you through creating and modifying a series of HTML files. The numbered exercises below describe additional instructions for adding these files to your git repo:
   
   1. Exercise [event-object]:    
      
      
      1. Create a sub-directory:
         

         ▽	lucretius@monad42 ~/ITCS_6120/6120 $ mkdir event-object

      2. Perform the MDN exercises in the sub-section
      3. git commit -m "-exercise: event-object" .
      4. 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.
         
         
      5. git commit -m "random colors :)" .
8. Extra_properties_of_event_objects - read all.  This section guides you through creating and modifying a series of HTML files. The numbered exercises below describe additional instructions for adding these files to your git repo:
   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 -m "-exercise: key_events" .
9. Preventing_default_behavior - Download the source code that this MDN section refers to.  This section guides you through creating and modifying a series of HTML files. The numbered exercises below describe additional instructions for adding these files to your git repo:
   1. Exercise: [preventing-defaults]
      
      1. Create a sub-directory:
         

         ▽	lucretius@monad42 ~/ITCS_6120/6120 $ mkdir preventing-defaults

      2. Put all the MDN's sections downloaded files in this directory and modified them as suggested by the MDN docs..
      3. git commit -m "-exercise: preventing-defaults" .
   
   
10. 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 2/15/2023: Simplified exercise by giving .html file , and organize the file(s) as follows:
       
       1. Create a sub-directory:
          

          ▽	lucretius@monad42 ~/ITCS_6120/6120 $ mkdir video-player

       2. Put all the file you created in the above directory and verify result web page works as expected in Chrome.
       3. git commit -m "-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 -m "-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.
11. Event_Delegation - Download the source code that this MDN section refers to. This section guides you through creating and modifying a series of HTML files. The numbered exercises below describe additional instructions for adding these files to your git repo:
    1. Exercise: [event-delegation]
       1. Create a directory

          ▽	lucretius@monad42 ~/ITCS_6120/6120 $ mkdir event-delegation

       2. Place the downloaded files in this directory and perform any modifications described in the MDN docs.
       3. git commit -m "-exercise: event-capture" .
       4. Modify the code to have 64 tiles (8 x 8) with each one 50px in height.
       5. git commit -m "-changed to 8 x 8 tiles" .