mdinfotech.net  



In this unit, you will create a client side interactive webpage using HTML, CSS, and JavaScript. The HTML and CSS will be review from InfoTech 9, and the JavaScript will give you an opportunity to use your programming skills from Java on a new platform.

I'm going to use videos from a Udemy course on this topic to assist you with learning this material. The entire playlist is here: Web Development Tutorials: Ultimate Udemy Playlist (2018).

  1. Watch this video: Web Dev Part 1: What is it?.
  2. Download and install a free text editor with language highlighting. I use Notepad++ and the videos you are going to watch use Sublime. Either choice is good.
  3. For this unit, you will want to organize your files by creating a new folder called webdev. Put files associated with this unit in this folder, or in a subfolder of webdev.
  4. Download the starter code for the next video: https://drive.google.com/file/d/1w1_qZfEWIbCMtFZh5P01Ya7ob1IOiQjS/view. You will need to extract the zip file and download the files onto your computer. Save these files in your webdev folder.
  5. Watch this video: Web Dev Part 2: Create an HTML file and create the same HTML document that he does in the video.
To hand in: See Google Classroom.
Since it is very important to check that your HTML follows coding standards, I require you to get the green banner of success when you validate your HTML. To do this:
  1. Always start with a valid HTML document to start a new webpage. Here is a "Hello World" HTML document you can use: Valid HTML5 document
  2. Read this explanation of the code: Explanation of a basic HTML document.
  3. Add the HTML you need to your document. (You already did this in exercise 1a).
  4. Watch this video on how to validate your HTML.
  5. Use the HTML validator to validate your code from exercise 1a: https://validator.w3.org/.
To hand in: See Google Classroom.
In this exercise, you are going to continue the 4 part video series on a Crash Course in HTML, CSS, and JS.
  1. Watch this video on HTML and CSS For Beginners Part 3 - Colt Steele. and add the CSS from the video to your HTML document from Exercise 1.
  2. Take a screen shot of your HTML document in Chrome once the CSS is working and has "beautified" it.
  3. Use the CSS validator to validate your code from exercise 1a: https://jigsaw.w3.org/css-validator/. Note: The CSS validator *looks like* the HTML validator, but it is not. You will get "This document can not be checked" if you try and send the wrong language to either validator
  4. Correct any errors. Once your document validates, take a screen shot of your validation results.
To hand in: See Google Classroom.
In this exercise, you are going to continue the 4 part video series on a Crash Course in HTML, CSS, and JS.
  1. Watch this video on HTML and CSS For Beginners Part 4 - Colt Steele. and add the JS from the video to your HTML document from Exercise 1.
  2. Get your webpage to work so that you can click through a number of images.
To hand in: See Google Classroom.

In this exercise, you are going to use a popular online development platform called Github to host your website from the previous exercises.

Watch Ms. Wear's Lesson on How to Put a Website Online Using Github.

Here are the steps you will complete watching the video along with important links you need:

  1. After completing the previous exercises, you should have a simple website made up of multiple files: 1 html, 1 css, and 1 js file, and some image files. Currently, you are only able to view this website on your local computer in your browser. Your goal in this exercise is to put that website onto the internet so it may be viewed by anyone with an internet connection.
  2. To understand what is required to put a website on the Internet, watch this video on Web Development - What is Client Server Model.
  3. We are going to use a website called Github to host your website. While Github is an extremely popular, and powerful, online development environment, we will be using a very small subset of its capabilities. Create an account on Github. Here are instructions: https://www.wikihow.com/Create-an-Account-on-GitHub.
  4. Once your account is created, log into Github.
  5. Create a repository called yourusername.github.io. My repository is called lwear.github.io.
  6. Upload the folder containing your website from the previous exercises. My folder is called exercise1, so the remainder of these instructions will use that folder name.
  7. To see your website live on the internet, use the following URL: https://yourusername.github.io/yourfoldername. The link to my website would be https://lwear.github.io/exercise1. Note: It can take a minute or two for the upload to show up on the Internet.
  8. To upload changes to your website, make the changes on your home computer, and when you are done, upload the individual files, OR the entire folder to github, wait a few minutes, and then do an empty cache and hard reload of your page.
  9. Congratulations, you now have a website online! This is the platform we will be using for the remainder of this course.
To hand in: See Google Classroom.
  1. Follow along with this video on JavaScript Tutorial for Beginners to learn how similar the syntax of JavaScript is to Java. Note: In the video, he uses JSBin to run JS on the console. It is free to use and a simple way to familiarize yourself with the basics of JS.
  2. Browse these w3 Schools JavaScript Tutorials to follow up on any topics the video covered that you feel you need more information on.
  3. Answer the questions posted to Google Classroom
To hand in: See Google Classroom.

This lessons covers the HTML, CSS, and JavaScript needed to create and style a simple webpage with a button that, when clicked, changes the content of a div tag. Topics covered include: div tags, html block vs inline elements, button tag, innerhtml property, dom events, css reference, and id vs classes in css.

Watch and code along with CS 11 JavaScript Lesson: Change the Content of Div Tags with an OnClick Event.

The code you create will be needed in the next exercise.


Helpful Links Used in the Lesson
Create a webpage that has 5 buttons. Each button produces an interesting fact when clicked.
  • Watch this demonstration of the Fact Finder.
  • The site does not need to look identical to mine, use creativity when writing your CSS.
  • Validate your CSS and HTML.
  • Test your page with the JavaScript console open in Chrome (Ctrl+Shift+J) and ensure there are no JS errors related to your page.
  • How to hand in: See Google Classroom.

    The Lesson:

    1. Read What is a Light Box and Examples for to see when and how lightboxes are used in web design.

    2. Download LightBoxStarterCode.zip and extract it to the folder on your computer where you are saving work for this unit. Use this code to complete the work taught in the lesson.

    3. Code along with Ms. Wear's lesson on how to create a light box. This video is 70 minutes, and covers two classes worth of material. I suggest you split this lesson over two days.

    What to do for this assignment:

    1. Create a webpage with 6 thumbnails of images. When a thumbnail is clicked, a lightbox should appear showing the larger version of the image.
    2. To save you some time, the images and the thumbnails have been provided for you in LightboxStarterCode.zip.
    3. Validate your CSS and HTML.
    4. Test your page with the JavaScript console open in Chrome (Ctrl+Shift+J) and ensure there are no JS errors related to your page.

    How to hand in:

    See Google Classroom.

    Helpful Resources:

    Create the game Tic Tac Toe using HTML, CSS, and JavaScript.

    Complete each lesson, and the code associated it, as if it were 1 in class lesson. Therefore, the full lesson would take about 2 classes, or 2 days, to complete. **Do not** leave the entire assignment to complete in one day as you will not have time to do it.

    • Day 1:
      1. Watch and code along with Tic Tac Toe: Lesson 1. In this lesson you will create the Tic Tac Toe board using HTML and CSS.
      2. Validate the CSS and HTML.
    • Day 2:
      1. Watch and code along with Tic Tac Toe: Lesson 2. In this lesson you will use JavaScript to create a two player Tic Tac Toe game.
      2. Fix checkWin(). Turns out the video is missing a return statement. See below:
          // check for win
          if (checkWin()) {
            gameResult = currentPlayer + " won";
            return;  // missing code
          } 
      3. Finish writing checkWin() so that it can win for any of the 8 possible win combinations.
      4. Test your 1 player game and make sure it works for all win combinations.
      5. Validate the CSS and HTML.
      6. Make sure you have no JS errors.

    How to hand in: See Google Classroom.

    Helpful Links Used in the Lesson
    1. Watch and code along with Tic Tac Toe: Lesson 3. In this lesson you will use JavaScript to create a 2 player Tic Tac Toe game with a very unintelligent Computer Player.
    2. Watch and code along with Tic Tac Toe: Two Bug Fixes. Two issues found with the code from Tic Tac Toe series and how to fix them.
    3. Make your computer player more intelligent. Improved upon computer player intelligence, will allow for a more challenging, but still winnable, game. Try searching google for ideas if you cannot come up with any on your own. Computer player intelligence must be described in attached Google Doc on Google Classroom.
    4. Test your 2 player game and make sure it works.
    5. Validate the CSS and HTML.
    6. Test your page with the JavaScript console open in Chrome (Ctrl+Shift+J) and ensure there are no JS errors related to your page.

    How to hand in: See Google Classroom.

    Helpful Links Used in the Lesson

    This project will consist of a number of lessons (not sure how many yet, I'm creating them as we go) over a number of days, and unlike previous assignments, you will not be required to hand in every step along the way. However, every step in required to complete the final game.

    Step 1 of Pong - complete by Thursday May 14
    1. Watch and code along with Pong Using JavaScript Lesson 1.
    2. The site does not need to look identical to mine, use creativity when writing your CSS.
    3. You assignment is to write the code to make the right paddle move up and down with the arrow keys.
    4. Validate your CSS and HTML.
    5. Test your page with the JavaScript console open in Chrome (Ctrl+Shift+J) and ensure there are no JS errors related to your page.
    Step 2 of Pong - complete by Tuesday May 19
    1. Watch and code along with Pong Using JavaScript Lesson 2.
    2. Your assignment is to add code so that the game keeps score. My solution required 6 lines of additional code.
    3. Validate your CSS and HTML.
    4. Test your page with the JavaScript console open in Chrome (Ctrl+Shift+J) and ensure there are no JS errors related to your page.
    Step 3 of Pong - complete by Friday May 22
    1. Read about Favicons.
    2. Create your own Pong favicon at Favicon.cc
    3. Add the favicon to your pong game.
    4. Watch Chrome DevTools for HTML and CSS to learn how to test styles out using Chrome DevTools and how to use it to directly edit your code!
    5. Read How to Choose Fonts and Colors for a Website
    6. Update the look of your pong site by choosing appropriate colours and an appropriate font.
    7. Watch Debugging JavaScript with Chrome DevTools. Consider using this for future JS Debugging.
    8. Watch and code along with Pong Lesson: Add Sound.
    9. Find appropriate sound files that do not break copyright from FreeSoud.org (or a similar site).
    10. Add at least two sound files to your game: one when the ball bounces off the paddle, and one when the ball is lost and a point is gained.
    Step 4 of Pong - complete by Friday May 29
    1. Watch and code along with Pong with Controls.
    2. Add the controls from the video to your version of Pong
    3. Improve Pong. Use your imagination and get creative. Watch Ms. Wear's Improved Pong and realize you can make it **so** much better. Look at other games to seek inspiration. In Monday's Zoom session (see Google Classroom for link), I will give you a brief look at some improvements I made.
    4. Test it really really well.
    5. Validate the CSS and HTML.
    6. Make sure you have no JS errors.
    7. This is the final version of Pong, and it will be handed in on Google Classroom.
    How to hand in: After all lessons have been completed, you will hand in the following to Google Classroom: screenshots of CSS and HTML validators, a link to your Pong game on Github, and list your improvements as a private comment.

    This project will consist of a number of lessons over the next 3 weeks. You will be required to hand your progress for each part.

    Step 1 Create Images, Create the Game Board, and Load a Level - complete by Thursday June 4
    1. Watch Intro to Albert and Simon's Adventure.
    2. Watch Creating Images for Albert and Simon's Adventure.
    3. Create 23 images for the first version of your game. Each should be 120x120 pixels, png, with transparent backgrounds. These images can be simple because you will probably want to create different, higher quality images for your final version of the game. For example, you might just use an arrow to represent the horse, and an arrow with a dot to represent a horse with a rider. Save yourself some time by taking an image, like horseup, and rotate it to create horseleft, horsedown and horseright. This is a screenshot of the images I use. You will need a replacement image for each one except sentry.png, which I don't use in the first version of the game. grid pics
    4. Take a screenshot of all your images like the one shown above.
    5. Watch and code along with Create the Gameboard for Albert and Simon's Adventure.
    6. Complete the game board, and as shown in the video, test that all of your images will load correctly.
    7. Watch and code along with Define and Load a Level for Albert and Simon's Adventure.
    8. Validate your CSS and HTML.
    9. Test your page with the JavaScript console open in Chrome (Ctrl+Shift+J) and ensure there are no JS errors related to your page.
    10. Put the html, css, js, and images folder on Github.
    11. Hand in to Google Classroom:
      1. Screenshot of your HTML validator,
      2. Screenshot of your CSS validator,
      3. Screenshot of your all your images together,
      4. and a link to the site on Github with the first level loaded as shown on the video. It must include one of every non-passable obstacle, two jumps, a horse, a rider, a flag, and an animated enemy.
    Step 2 Moving Around the Board and Jumping Animation - complete by Wednesday June 10
    1. Watch and code along with Move Around the Board for Albert and Simon's Adventure.
    2. Test that your player moves with the arrow keys, cannot go through impassable objects, and cannot leave the edges of the board. Also test that you can pick up the rider and go through a fence once you have a rider.
    3. Watch and code along with Jumping Animation for Albert and Simon's Adventure.
    4. Test that your player can jump the fences with a rider, and that it animates correctly. Test that your player can correctly move through all of the defined levels.
    5. Hand in to Google Classroom:
      1. Screenshot of your HTML validator,
      2. Screenshot of your CSS validator,
      3. and a link to the site on Github with the jumping animation working, the horse moving around the board correctly, and all the defined levels working, as shown on the videos.
    Step 3 Finish the Game - complete by Tuesday June 16
    1. Fix all bugs or problems with the current version of the game. You will need to use the skills you learned in the Java Unit to thoroughly test the program and discover all the issues with it. Here are some of the bugs:
      1. the game does not end after the last level is finished and throws a js error
      2. If the player runs into the enemy, is prints a message to the console, but it should show the game lost light box
      3. if the enemy runs into the player the game should end, but it does not
      4. if the player jumps a fence from the side, it should block the player, but does not
      5. when jumping, the player can land on an impassible object.
    2. Finish the game. Add the following elements:
      1. a start screen with the title, a description of the game, instructions, and a "start" button. This could be done with a seperate html page, or with a lightbox.
      2. an end screen to the game. When you finish, the game currently throws a javascript error. Instead, load an end screen that wraps up the game and allows you to start over. This could be done with a seperate html page, or with a lightbox.
    3. Make this game your own. Write an engaging storyline that encourages participation. Improve the graphics so that when combined with the CSS, make a great design. Add creative features that motivate the player.
    4. Use your creativity and programming skills learned throughout the course to enhance the game with additional features. It may include things such as controls (like we did in Pong), power ups, scoring, lives, etc.
    5. Test it really really well.
    6. Validate the CSS and HTML.
    7. Make sure you have no JS errors.
    8. Hand in to Google Classroom:
      1. Screenshot of your HTML validator,
      2. Screenshot of your CSS validator,
      3. list your enhancements as a private comment,
      4. and a link to the site on Github.