Rob Meyers Instructional Design Matrix_Web Design Image Project
Goal: To train students in the Oklahoma City Community College Web Page Design 1 class on several ways to add images with a focus on proper HTML and CSS programming.
Objectives Information/Examples Practice with Feedback Assessment
Students will first become familiar with basic computer language logic with a focus on HTML (HyperText Markup Language) syntax. The class required readings of HTML Dog will be the base of my instructional material, and in class questions and discussions. The website will be the source of the class labs in the introduction phase. There are several different courses at Codecademy that slowly introduce the learner to HTML code. Codecademy is a dynamic website with instant feedback if the entered code is incorrect. Tests over the readings and a viewable personal Codecademy profile for every student ensuring progress to the next objective.
Computer folder hierarchy retrieval as it relates to embedding of images to the html document. Various Youtube videos and many in class examples. Including documentation and prototype .html files developed by the instructor available from the Moodle LMS. Specially designed in class and at home assignments with a focus on local hard-drive (client side) website development, Photoshop software, HTML editing software and elaboration on advanced HTML nesting. Large culmitive test, uploads of student's mock websites created at home and in class for instructor grading with specific feedback for each assignment in the Moodle LMS.
Cascading Style Sheets (CSS) introduction, as it relates to layout and utilizing background images. The introduction to this new computer language will be similar to the process of educating the students with HTML leveraging HTML Dog readings, modules, and in class lectures. Again the Codecademy modules with be the main focus of practice, along with in class projects and homework. Graded homework feedback will be given within a week from the instructor in the Moodle LMS. Similar to the assessments above with a new focus on grading and encouraging students to utilize their new programming skills in different artistic ways.
Students will show a thorough understanding of images as they relate to web design. Case studies of many different websites and how they use computer language for a pleasing artistic aesthetic. Review of all prior concepts with labs and introduction to robust websites and graphical user interface (GUI) development. A large scale final project of a fully functioning website and an intensive in class website creation test. This will be the combination of all prior training in HTML/CSS. Finalizing best practices in web-design the instructor will analyze every line of code and give feedback where necessary to prepare students for a career in the field.


List of Content items:

  • Beginning Episodes:
    • Motivation begins on the first day of class with many examples of grade A websites completed by prior students
    • The introduction and first chapter of HTML dog is assigned as the first weeks readings along with informing the students that testing on the chapters follows in two weeks. This is critical in expectations since basic readings skills are the only prerequisite of the class and HTML dog gives solid insight to the world of web design.
    • Finding the student's interest in creating web site of their own for the Internet is also an excellent motivator.
  • Middle:
    • With each new concept the instructor will demonstrate in class with his computer, on the projected screen, how it applies to web-design.
    • The following labs will be as fun as the subject matter allows. Such as using interesting or funny pictures for engagement purposes.
    • Encouraging immersion from students by displaying incorrect code with group discussion on the best ways of remedying it.
  • End:
    • Viewing of each student's website by fellow classmates.
    • Different roles web-designers can have in industry and how having a graphic design background is beneficial to the industry.
    • New resources for students to develop their web-design abilities if they choose.

List of Supporting media:

Of course the aforementioned interactive eLearning site has a large part in the supporting media. The required reading of HTML dog also has a companion website with step by step instructions on website development. Also, there will be various Youtube videos such as this critical piece on folder structure. In the future there will also be specific learning modules created by the instructor with Adobe Captivate utilizing screen capture technology.

Guidance for the Student:

The students will have all the benefits of a blended college class. Every Monday night begins the 3 hour course with questions from the prior week's readings, assignments, and new concepts. Followed by an introduction to new web design abilities complimented by an in class lab. Typically intros to new web design concepts are examples the instructor uses frequently in the field. The homework assignment and supporting media will all be available in a new learning module within the Moodle LMS after class. Each new module is timed with Moodle internal settings so certain students do not jump ahead or start homework during the in class lecture.

Guidance for the Teacher/Trainer:

Considering Web Page Design 1 is an introduction course, the teacher must ensure all computer skill knowledge gaps are filled. This includes at least one class lecture/lab on the Moodle LMS. Great care must be taken in each new HTML element introduction with a student showing strong understanding before moving forward to the next concept. Similar to Algebra course structure, new concepts must utilize prior web design abilities to build and have a successful final project.

Formative Evaluation:

There is ample room for revisions within the course project. For the students that understand image embedding and need more challenging material, codecademy and various assignments I have created have interactive options in learning the Java Script computer language. If the majority of the class struggles with any new concept I alloted a few extra class days for review and lab time.