• Final Q & A
• Next Steps
  • IFSC 3300 (Sample Syllabus)
  • Mobile Web Development (Spring 2017)
  • BA in Web Design and Development
    • Advisor Thomas Wallace
• Course Evaluations

Additional Learning Resources

• Advanced HTML & CSS
• Web Typography Handbook
• HTML/CSS Micro project Challenges
• More HTML/CSS Exercises
• Best Practices and Tutorials
• Learn Flexbox (New CSS Layout Spec)
  • Flexbox Froggy
• CSS Grids
  • CSS Grid Garden

Assignment

Submit your final project. The project is due to me no later than December 12, 2017 at 10:00am.

• Final Project Guidelines
• Q & A
• Additional JavaScript Topics to Explore
  • FancyBox
  • AJAX using jQuery
  • Google Maps API
    • Video Tutorial

Assignment

Continue working on your final project. The project is due to me no later than December 12, 2017 at 10:00am.

• Walkthrough with Source Files

Assignment

Upload your working version to you web space and send me the url. Make sure to do some customization so you get the opportunity to play with editing the calls to jQuery. Please send me the working URL before class on Tuesday. Please send to tswallace@ualr.edu

• jQuery Tabs Case Study
• jQuery Cycle Demo
• What is a CDN?
• Why use a CDN?
  • Google CDN, CDNJS

Assignment

Make sure you have all outstanding work to me for grading. I’ll review grades with the class on Tuesday.

• How jQuery Works
• Exploring the functionality of jQuery
• What is a CDN?
• Why use a CDN?
  • Google CDN, CDNJS
• jQuery Tabs Case Study
• jQuery Cycle Demo

Additional Reading and Study – Javascript 101

Assignment

Read the following Article on Progressive Enhancement. Send me an email (tswallace@ualr.edu) explaining progressive enhancement in your own words. Please discuss why it is important to use progressive enhancement and include a link to another article you found and read relating to the topic. Due before class Tuesday.

• Introduction
• Uses of JavaScript
• Examples
  • Placement
  • Statements
  • Comments

Assignment

Complete Getting Started with programming at Codecademy. Send me a a screenshot of the completion page. I recommend creating an account so you can save your progress and complete other modules in the future.

• Hosted Solution
• Using Server-Side Technology
• Planning, Storyboarding and Collecting Resources for your Web Site
• Final Project Guidelines

Assignment

• Submit your Web project no later than Thursday
• Complete the planning document and sitemap and submit to me via email before class next Tuesday.

Continue working on your individual web project. This is due next Thursday so make sure you are using your time wisely.

• Integrating Image Slices into Your Site Template | Techniques: Kellum
• Finalizing your page template
• Duplicating pages for your site

Individual Web Project

Choose one of the two micro-site projects and submit url to me by November 9, 2017.

Starter HTML

SpaceX Dragon

• Micro-site Project

Segway Centaur

• Micro-site Project

Assignment

Begin work on the Micro-site. You should have a good start on your main page template prior to class on Tuesday.

• Using Shapes, Text, and Photos to Create Imagery for your site
• Optimizing and Exporting Images
• Working with SVG

Assignment

Create Banner image for your sample page in Gravit. The image should be as wide as your container div and between 80px and 200px tall and shoot for less than 40kb in size. Emailed tswallace@ualr.edu before class on Thursday. Have fun with this. You can make an image for anything. It could be a company, an event, a hobby etc. I’d like to see the following elements present in your design. Typographical Element, some sort of photographic element or vector artwork, and a consistent color scheme (Try Kuler).

Next class I’ll show you how to integrate this image into your template page properly. Please bring the file to class.

• Working with type in Gravit
  • Attaching to a path
• Removing the Background from an Image
  • Sample file 
  • Tutorial
• Exporting Files
• More Tips and Tricks

Assignment

Email me the image you extracted and placed on in another environment.

• Gravit Designer – Web App | Install: Windows | Mac | Chromebook
• Workspace Overview
• Introductory Tutorials

Assignment

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

• Create an Icon in Gravit

You should email this icon to me before class next Thursday. Late submissions will not be accepted. 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!

• Review Positioning Exercises

Image Editing

• Fireworks Workspace
• Creating Shapes
• Working with Typography
• Cropping and Resizing

Cloud-Based Alternative App – Gravit Designer

• Positioning Overview
• CSS Positioning
• CSS Positioning Lab

Assignment

Complete today’s lab assignment and upload to cloud9 in a directory called positioning. Send me the url’s for each exercise no later than Thursday before class.

• Today’s Codecast
• Understanding Color | Kuler
• CSS Box Model – Description | Demonstration
• Styling Page Navigation
• Positioning Overview
• CSS Positioning

Assignment

Read The following Article on CSS Positioning.

• Today’s Codecast
• Understanding Color | Kuler
• CSS Box Model – Description | Demonstration
• Styling Page Navigation
• Positioning Overview
• CSS Positioning

Assignment

Read: Getting to Know CSS |  Getting to know the  Box Model – This is quiz material.

• Today’s Codecast
• Understanding Color | Kuler
• CSS Box Model – Description | Demonstration
• Styling Page Navigation
• Positioning Overview
• CSS Positioning

Assignment

Read: Getting to Know CSS |  Getting to know the  Box Model – This is quiz material.

• Publishing files to cloud9
• Today’s Codecast
• Creating and Attaching a Style Sheet
  • CSS Reference
• Understanding Color | Kuler
• CSS Box Model – Description | Demonstration
• Styling Page Navigation
• Positioning Overview
• CSS Positioning

Assignment

Read: Getting to Know CSS |  Getting to know the  Box Model – This is quiz material.

• Create Cloud 9 Account from the email invitation you were sent.
• Exploring the functionality of Cloud9
• Publishing Files

Assignments

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. Make sure to publish your files to your Cloud 9 Workspace for grading.

• Quiz
• What is Validation?
• Naming Conventions, Meta Naming, Directory Structure
• Creating Your UALR Web Space
• Using an FTP Client – Filezilla – Tutorial
  • Host:web.ualr.edu
  • Username: students\username
  • Password: students domain password
  • Port:21 (It should default to this)
• Working with Web IDEs
  • Brackets
  • CodeAnywhere

• Today’s Codecast
• Sectioning your HTML Document
• HTML5 Structural Elements
• Naming Conventions, Meta Naming, Directory Structure

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.
• Upload to the server and send me the url. Send to tswallace@ualr.edu and before 9.21.17 (Will cover this on Thursday)

• Today’s Codecast
• Working with Forms
• Sectioning your HTML Document
• What is Validation?
• Naming Conventions, Meta Naming, Directory Structure

Assignment

Read (Quiz Material) Introduction to HTML

HTML Reference – Code Guide | Introduction to HTML

• Today’s Codecast
• Marking Up Content – Download the Starter Document
• Additional html tags for textual content
• Special Character Encoding: Details | Reference
• Block vs. Inline Elements
• Hyperlinks
• Additional html tags for textual content
• Inserting Images
• Block vs. Inline Elements
• Working with Tables
• Working with Forms
• Sectioning your HTML Document

Assignment

Read (Quiz Material) Introduction to HTML

HTML Reference – Code Guide | Introduction to HTML

• Today’s Codecast
• Marking Up Content – Download the Starter Document
• Additional html tags for textual content
• Special Character Encoding: Details | Reference
• Block vs. Inline Elements
• Hyperlinks

Assignment

Read (Quiz Material) Introduction to HTML

HTML Reference – Code Guide | Introduction to HTML

• Classroom Tools
  • Brackets – Code editor
  • Filezilla – FTP Client
• How the Internet Works
• Understanding how a web page works
• Setting up our work environment using Codepen | Today’s Codecast
• Other Code Editors
• What is HTML5?
• Doctypes & DTD’s – Document Type Definition
• Declaring a Language Type
• Exploring the <head>
  • Title Attribute
  • Meta Tags

Assignment

Create a Codepen Account and experiment with it’s features.

Read (Quiz Material) Introduction to HTML

• Browser Overview
• Structure, Content, Design, & Behavior
• 300 Million Dollar Button
• How the Internet Works
• Understanding how a web page works

Assignment

Evaluate your favorite web site based on our discussion of Structure, Content, Design, and Behavior. This is a written assignment that should be emailed to me (tswallace@ualr.edu) no later than 8-29-17. 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.

Discussion

• Understanding Web Related Terminology
• Browser Overview
• How the Internet Works
• Understanding how a web page works

Assignment

Setup and Account at Codepen.io. the free account is acceptable for the work we will do in class.

Additional Reading – 300 Million Dollar Button

Course Syllabus

• View Syllabus

Introduction to the Classroom Technology

• Verify VMWare Access (Tutorials and Support)

Discussion

• Understanding Web Related Terminology
• Browser Overview

Assignment

Read:  The history of the Internet and the web, and the evolution of web standards