Thomas Wallace

Lectures and Resources

Web Technologies

Fall 2024 | IFSC 1310 - 01

Building an Accessible Content Carousel

Class Exercise

Be sure to publish your work to GitHub and add a link to the demo we built to your course homepage.

Assignment

Assignment

Please add a working url of today’s lab outcome to your course homepage on Github.

SEMESTER WRAP UP AND FINAL INFORMATION

To successfully complete this semester the following assignments should be posted to your course homepage

  • Prototype HTML Assignment
  • CSS Demo
  • Positioning Exercises (These 4 are required but you could do extra for additional credit)
    • Float 1
    • Float 2
    • Absolute 1
    • Absolute 2
  • Flexbox Froggy
  • CSS Diner (Extra Credit)
  • Corel Vector Logo
  • Bear on Moon
  • SpaceX Dragon or equivalent project (1st Draft)
  • Cycle Lab (Image Slideshow)
  • SpaceX Dragon Revised (Second Draft)
  • Progressive Enhancement Writing Assignment (Written on Course homepage)
  • Dragon Project Revision and Reflection (Written on Course homepage)
  • Web Accessibility (Written on Course homepage)
Final Project Revision and Reflection

For this assignment, I ask that you collect feedback from a peer, family member, or a friend on your first attempt at the Dragon or Segway project. Using that feedback, I’d like you to attempt to address any issues or problems pointed out by your potential users. You should provide a link to the revised project (duplicate the project directory in codespaces and then add a link to the revised project). You should also provide several paragraphs reflecting on the learning experience working on this project and your experience during the semester. What were the things you did well? What would you do differently if you had to start over? Also report on the feedback you received and what you did to address those issues or why you chose not to make the recommended changes. This should be posted on your homepage under the progressive enhancement writing assignment.

EXAMPLE:

https://thomaswallace.github.io/ifsc-1310/

DUE DATE:

Sunday, December 8, 10am – This is a firm deadline. No work after this time will be accepted.

Exploring the functionality of jQuery

Assignment

Make sure to push your Dragon/Segway project to Github and provide a link from the course homepage.

Read the following Article on Progressive Enhancement. On your course homepage, create a section below the navigation element that contains the heading “Thoughts on Progressive Enhancement”. Please describe progressive enhancement in your own words and discuss why progressive enhancement is important in modern web development and include a link to another article you found and read relating to the topic.

Remember! We do have class on the Monday following Thanksgiving. Make sure you attend as we will have an in class lab activity for a grade.

JavaScript and the Document Object Model

SEMESTER WRAP UP AND FINAL INFORMATION

To successfully complete this semester the following assignments should be posted to your course homepage

  • Prototype HTML Assignment
  • CSS Demo
  • Positioning Exercises (These 4 are required but you could do extra for additional credit)
    • Float 1
    • Float 2
    • Absolute 1
    • Absolute 2
  • Flexbox Froggy
  • CSS Diner (Extra Credit)
  • Corel Vector Logo
  • Bear on Moon
  • SpaceX Dragon or equivalent project (1st Draft)
  • Cycle Lab (Image Slideshow)
  • SpaceX Dragon Revised (Second Draft)
  • Progressive Enhancement Writing Assignment (Written on Course homepage)
  • Dragon Project Revision and Reflection (Written on Course homepage)
  • Web Accessibility (Written on Course homepage)

Assignment

Read An Introduction to JavaScript at https://javascript.info/intro  and Introduction to the DOM (Document Object Model).  Be prepared to discuss on Monday.

Make sure to push your Dragon/Segway project to Github and provide a link from the course homepage.

Final Project Revision and Reflection

For this assignment, I ask that you collect feedback from a peer, family member, or a friend on your first attempt at the Dragon or Segway project. Using that feedback, I’d like you to attempt to address any issues or problems pointed out by your potential users. You should provide a link to the revised project (duplicate the project directory in codespaces and then add a link to the revised project). You should also provide several paragraphs reflecting on the learning experience working on this project and your experience during the semester. What were the things you did well? What would you do differently if you had to start over? Also report on the feedback you received and what you did to address those issues or why you chose not to make the recommended changes. This should be posted on your homepage under the progressive enhancement writing assignment.

EXAMPLE:

https://thomaswallace.github.io/ifsc-1310/

DUE DATE:

Sunday, December 8, 10am – This is a firm deadline. No work after this time will be accepted.

Web Forms and Interviewing Clients

Project Building Demo

Please watch the following Session where I build the entire project:

https://us-lti.bbcollab.com/recording/f6cc4605df82427dad633013ba401edf

Bleow are the supporting materials for the discussion. See you Wednesday!

Assignment

Make sure your page template for your first draft has been completed by Wednesday.

Image Manipulation

Assignment

Export a copy of the image you create in class today and provide a link to it from your course homepage. You’ll need to upload it to Github and link to the file. You should also provide a link to the Icon you create in the tutorial.

Image Manipulation and Optimization

Assignment

After working through today’s material spend you remaining time working on the Icon Assignment. Remember you only have 14 days to complete once using your free trial so make sure to not procrastinate.

Complete the following tutorial and submit the icon you create in the tutorial.

Create an Icon in Gravit

You should post the icon and link from your Github homepage before class on Monday  (11/11/24). I do not expect you to perfectly replicate the icon in the tutorial but I would like to see a solid effort from each of you. This is a challenging assignment so I encourage you to not wait until the night before it is due. Good Luck!

Positioning Lab Debrief

Assignment

Make sure your positioning labs are loaded and linked from your course homepage. At this point your course homepage should have the following assignments posted and linked:

  • Prototype HTML Assignment
  • CSS Demo
  • Positioning Exercises (These 4 are required but you could do extra for additional credit)
    • Float 1
    • Float 2
    • Absolute 1
    • Absolute 2
  • Flexbox Froggy
  • CSS Diner (Extra Credit)

Positioning Lab

Assignment

Complete the 4 lab exercises and post to your course homepage. We will debrief on Wednesday.

Introduction to CSS

Assignment

Complete the exercises at Flexbox Froggy. Link a screenshot of the completion page for exercise 24 on your Github homepage. You’ll need to take a screenshot, upload to your codespace and then add a link to file on your homepage.

Introduction to CSS

Assignment

Make sure that your your CSS-Demo Exercise is cught up with our classroom version.

Extra Credit: Complete CSS Diner Exercises and post a link to a screenshot of the final completed exercise.

Class Lab: Web Accessibility

Watch – Accessibility for the Modern Web by Derek Featherstone

Assignment

On your course homepage, Create a heading below the navigation element that reads “Thoughts on Web Accessibility”. In your own words, explain what web accessibility means to you & why it is important to build accessible web sites? Do some research on the topic. Use html markup to structure your thoughts.

Validation, Naming Conventions, and File Management

Publishing your Work to GitHub

HTML5 Assessment

  • Create and Validate a prototype HTML document that includes examples of all HTML elements covered thus far. For a list of requirements view this page.
  • Use today’s session to work on and complete this assignment. You are welcome to partner with a classmate to work on this but each of you must submit code that you have written. No Copy/Paste!
  • Create a link to this assignment from your course homepage. Name it “Prototype HTML5 Assignment”
  • When complete publish it to your Github account with the Commit Note “Prototype HTML5 Assignment Submission”.
  • Due 9/25/2024

Assignment

  • Be prepared for a short quiz/knowledge check on Monday.
  • Read (Quiz Material) Introduction to HTML

Structure, Content, Design, and Behavior

Assignment

Evaluate a web site you frequent based on our discussion of Structure, Content, Design, and Behavior. This is a written assignment that should submitted via this form no later than 9-2-24. Make sure you discuss the following elements: Site URL, An assessment of the Structure, Content, Design, and Behavior of the site, Things you like about the site, Things you would change. There is no length requirement for this assignment, but please give an organized and thorough response. Please upload the file as a pdf or docx or alternatively you can share the URL of the file. The submitted writing for this assignment should be the author’s own work. AI generated submissions will be flagged and receive No Credit.

https://forms.gle/HMKfbEQNXhm3vuB66

Course Introduction

Course Syllabus

Introduction to the Virtual Classroom

We will be using a broad array of tools to support this course this semester. If you would like to familiarize yourself with these feel free to do so. I will explain and do walkthroughs with the tools when we begin to use them.  You are welcome to go ahead and create your accounts (they are all free) but make sure to keep track of your credentials.

  • Codepen.io – Codecasting Service for Lectures and Reference
  • Gitpod – Cloud-based Integrated Development Environment (IDE)
  • GitHub (Student Pack) – Code Versioning Repository for submitting assignments
  • Gravit.io – Cloud-based Vector Imaging editor

Discussion