IT Indigo
Fall 2025 | ITEC 31006
Content Carousel Lab
Be sure to publish your work to GitHub and add a link to the demo we built to your course homepage.
Peer Feedback Session
Working in your groups please review each of your templates and provide feedback using the strategies presented in the course.
Due Tuesday (3/20) – Create a blog post on your web project. Include the site URL, a screenshot of the design, and discuss the feedback you received, Reflect on the development experience. What did you do well? Where can you improve? How you address the issues identified by your reviewer? There should also be a working version of a contact form implemented.
At this point, there should be the following work either on your blog or posted to GitHub:
- Styled HTML Cheatsheet Exercise – Linked From Homepage (Assigned 1/22)
- Links to the 4 required Positioning Lab Demos plus any you did for extra credit. (Assigned 2/3)
- Image Optimization Blog Post that Includes the Logo – Linked From Homepage – (Assigned 2/10)
- Individual Web Project that includes feedback you received and Contact Form – Due 3/19 – Linked From Homepage
- Progressive Enhancement Blog Post – Due 2/26
- Project Reflection Blog Post – Due 3/19
Project Template Lab
Today We will spend our classroom time finishing up our page template in preparation for the peer feedback exercise on Thursday
Individual Web Project Lab
- Project Q & A
- Review Topics and Ideas
Microsite Project
Individual Web Project
Create your own micro site and post the url to your GitHub me by March 4, 2025.
- Starter HTML (You do not have to use this, provided for reference)
Arkansas State Parks
Image Manipulation and Optimization
- Group Activity Debrief | Codecast
- Image Editing Tools
- Vector vs Raster Images | 1 | 2
- Tools Overview
- Adobe Creative Suite – Paid Subscription
- Adobe Illustrator – Vector Editor
- Adobe Photoshop – Raster Editor
- Pixlr Suite – Raster and Vector – Tutorials
- Photopea / Vectorpea
- Adobe Creative Suite – Paid Subscription
Positioning Lab Group Work
- CSS Grid Lab
- Complete as many lab exercises as possible working with your team. Be prepared to explain a solution to your classmates on Tuesday.
CSS Positioning and CSS Grid
- Positioning Overview
- CSS Grid Overview
- CSS Positioning | Demo | Demo
- Set up a directory structure for the positioning lab. | Starter HTML
- Positioning Lab | Demo
- Grid Lab
HTML Cheatsheet Activity
In groups of two or three. Complete the HTML Cheatsheet activity. Once you have a functioning version, id like you to customize the page using typography and color to make it your own. This should be linked off of your course homepage, (Example)
Using the following code snippets build the HTML Cheatsheet. Upon completion. Examine and tweak the CSS to your liking. Make it your own.
- Structure/Content
- Design
- Behavior
- Include the following script in the head of your document:
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/9000.0.1/prism.min.js"></script>
- Include the following script in the head of your document:
- Additional Information on Prism.js
Welcome back!
- Syllabus Review and Semester Overview
- Review the last semester’s content relating to HTML5 and CSS.
- Verify you still have access to Github and make sure your files are organized and ready for class on Thursday.
Introduction to CSS
- Codecast | Source | Header Image URL
- Color and Typography
- Styling Page Elements
- Page Body
- Google Fonts
- Background
- Header
- Navigation
- Content
- Articles
- Aside
- Footer
- Page Body
- CSS Box Model – Description | Demonstration
Introduction to CSS
- Codecast | Source | Header Image URL
- Color and Typography
- Styling Page Elements
- Page Body
- Google Fonts
- Background
- Header
- Navigation
- Content
- Articles
- Aside
- Footer
- Page Body
- CSS Box Model – Description | Demonstration
Collaborative Coding Wrap Up
In today’s session, I’d like you to reconvene with your coding partner from last week and finish up and publish your work. It should be accessible via the github url you submitted last week. Remember each of you should submit your own work. Once you have completed the exercise, take some time to reflect on the process? Did you work well with your partner? If so what strategies did you use to collaborate? Did you pick a good work flow? What would you do differently if you had to start over? We’ll discuss we we return to the classroom. Have a good weekend.
Prototype HTML Assignment
- 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 10/24/2025
Introduction to HTML
- Codecast
- Text Level Semantics
- Special Character Encoding: Details | Reference
- Block vs. Inline Elements
- Hyperlinks
- Inserting Images
- Tables
- Forms
Introduction to HTML5
- Codecast
- Text Level Semantics
- Special Character Encoding: Details | Reference
- Block vs. Inline Elements
- Hyperlinks
- Inserting Images
- Tables
- Forms
Introduction to HTML
- Make sure you have submitted your Github Pages URL here: https://forms.gle/RnyJRBM5wG6mYLYu8
- Codecast
- Understanding HTML Headings
- Marking Up Lists
- Text Level Semantics
- Special Character Encoding: Details | Reference
- Block vs. Inline Elements
- Hyperlinks
- Inserting Images
- Tables
- Forms
Structure, Content, Design, & Behavior
- Structure, Content, Design, & Behavior
- Create Github Account
- Introduction to Codepen
- Understanding how a web page works
Web Related Terminology
Today we will build a collaborative list of frequently used terms and Definitions from across the web. As you edit the collaborative list please be sure to adhere to example information structure provided. It might be helpful for you to work on your definitions and then migrate them into the document once complete
- Web Service Exploration Discussion
- Thomas Wallace Feedly Bookmarks | Instructions
- Collaborative List – Google Docs Collaboration Exercise
WordPress Wrap Up / Show and Tell
- WordPress Q & A
Today’s Activity will be to finish up putting the finishing touches to your WordPress Site. I’d like you to partner up with a classmate to review your work thus far and work to troubleshoot any additional issues. A few reminders for the weekend.
- Make sure I have your blog URL. Send to my email (tswallace@ualr.edu)
- Customize your blog
- Apply a new theme
- Customize the sidebar or another template part/region
- Using Custom Template parts – Display an rss feed from a site that you frequent.
- Try using a shortcode in a post or a page.
- Completed About Page
- Created a Custom Menu that points to your writing assignments.
Introduction to WordPress
- Blog Settings
- Applying a Theme
- RSS Feeds
- Shortcodes
- Individual Q&A
Introduction to WordPress
- Blog Settings
- Applying a Theme
- RSS Feeds
- Shortcodes
- Individual Q&A
Web Based Publishing Tools
- Introduction to WordPress
- WordPress.com
- What is a blog?
- Publishing Content
- Pages vs Posts
- More Resources
Welcome to IT Indigo!
- Review Syllabus & Expectations
- Faculty Introductions
- Thomas Wallace
- Sarah Clements
- Bruce Bauer
- Student Introductions
- Introduction to Classroom Technology
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
- GitHub (Student Pack) – Code Versioning Repository for submitting assignments
- Gravit.io – Cloud-based Vector Imaging editor
- Pixlr – Cloud Based Image Editing Tools
- Icebreaker Activity