http://jvilk.

com/cmpsci-326/syllabus#week-03-introduction-to-bootstrap
Course Contents
 
Unit-1 Introduction to Internet: What is Internet? : A Network of Networks, Gateway;
History of the Internet: Connecting to the Internet, Internet Service Providers, DNS
Servers, Connection Types, Modems, Connecting to the Internet using Dialup
Networking; Web Browsers; Using Web Browser; How does the Internet Work?; Routers;
What you can do with the Internet; Origins and Development of the Internet; How
Internet Standards are Developed;      Moving Data across the Internet: Internet Addresses
 
Unit - 2 - The World Wide Web: Introduction to world wide Web, Web Pages and
Contents, Web Clients, Web Servers, Web Applications, Websites – Home Pages: Web
Site Development ; How to Builds Web Sites? , Web Content Authoring, Web Graphics
Design, Web Programming, Webserver Administration, Protocols, Search Engines &
Search Engines, Plug-ins, FTP Applications
 
Unit-3 Internet Services & Internet Security: Electronic Mail, FTP, Newsgroups, Other
Internet Services, Security and the Internet, Security Tools, E-commerce Security Issues,
TCP/IP, Domain Names and IP addressing, Host Names, Domain Names, Addressing -
Reserved IP addresses.
 
Unit-4 HTML – URI, LIST, Hyperlinks: History of HTML, Introduction to URI:
Fragment Identifier & Relative Uniform Resource indicator, Standard Generalized
Markup Language, Structure of HTML document, Switching between your Editor and
Browser, Structuring Web Page, Paragraph and Line Break Tags, Adding Comments,
Formatting your Text; Creating Lists: Ordered List Tags, Unordered List Tag & Nesting
Lists: Controlling How Ordered Lists are displayed,   Creating a Multilevel Outline,
Using Start and Value Attributes in an Ordered List, Controlling the Display of
Unordered List, Creating Definition List; Creating Hyper Text Links,       Linking to a
File or Data Object, Linking to NON-WWW Files, Linking to a Place in the Same HTML
File, Linking to a Place in Another HTML File, Creating Link Lists, Creating a Simple
Link List;
 
Unit-5 HTML – Images, Links, Rules, Address Tag and Text: Inserting Images: Using the
Align Attribute in Inline Graphics, Setting the Height and Width of an Inline Image;
Creating Image Links; Horizontal Rules: Changing the Height of a Horizontal Rule,
Changing between Shaded and Un-shaded Horizontal Rule, Changing the Width of a
Horizontal Rule, Setting the Alignment of a Horizontal Rule; Address Tag; Working with
Text: Text Alignment, Changing Font Sizes and Colors: Setting Font Sizes, Setting the
Base Font, Using the Small and Big tags, Changing the Font Color; Using a Background
Image; Marquee Tag
 
Unit-6 Web Page Authoring using HTML: Tables: Creating Columns and Rows, Adding a
Border, Adding Column Headings, Adding Spacing and Padding, Adding a Caption,
Setting the Table Width and Height, Aligning Cell Contents, Setting Column Width,
Centering a Table, Inserting an Image, Spanning Columns & Spanning Rows, Setting
Font Size and Colors, Assigning Background Colors; Frames:Percentage dimensions,
Relative dimensions, Creating two rows Frames, Creating two columns frames, Creating
two rows and the second row containing two columns; Forms: What is Form?, Form Tag,
Method, Action, Input Tag, Type Attribute: Check box, Hidden, Image, Radio, Reset,
Submit, Text;   Other <INPUT> attributes: Value, SRC, Checked, Size, Max length,
Align, Select tag, Text Area, CGI, Get, Post
 
Unit-7 Cascading Style Sheets (CSS): Properties Table:Using the style Attribute,
Creating Classes and IDs, Generating External Style Sheets, Typography, Consistency,
Types of styles, Specifying class within HTML document, Style placement: Inline style,
Span & div tags, header styles, Text and font attributes: Font Vs CSS, changing fonts,
text attributes, Advance CSS properties: Backgrounds, Box properties and Positioning
 
Unit-8 DHTML: DHTML Overview & Definitions, Dynamic Images, Image Rollovers,
Slide Shows, Dueling DOMs, The Document Object Model, The Navigator 4.x DOM, The
Internet Explorer DOM, Dealing with DOM Differences, Creating the Core DHTML
Library, The Custom Object Technique, Adding Methods to a Custom Object, Adding
Secondary Methods and Properties & Active Element Object, Moving Elements on the
Page, Moving in Geometric Shapes
 
Unit-9 PHP – Part-1: Introduction to PHP, History of web programming; how PHP fits
into the web environment, PHP Installation and configuration, Hello World"; syntax,
Variables, operators, flow control structures, More language basics; using GET and POST
input, working with HTML forms; built-in and user-defined functions; variable scope;
using the PHP manual, getting help, Input validation, string manipulation and regular
expression functions; date and time functions
 
Unit-10 PHP – Part-2: Code re-use, require(), include(), and the include_path; file system
functions and file input and output; file uploads; error handling and logging; sending
mail, HTTP headers and output control functions; HTTP cookies; maintaining state with
HTTP sessions; writing simple web clients, Introducing MySQL; database design
concepts; the Structured Query, Language (SQL); communicating with a MySQL backend
via the PHP, MySQL API, More MySQL database access; graphic manipulation with the
GD library, Introduction to Objection Oriented Programming; Using PEAR packages,
More PEAR packages; more OOP; the Smarty template engine, Parsing XML; PHP 5-
specific features
 
Unit-11 JavaScript Programming – I: Introduction to JavaScript: Utility of JavaScript,
Evolution of the JavaScript Language, JavaScript Versions and Browser Support,
Differences Between Client-Side vs. Server-Side JavaScript, Statements and Operators,
Variable Declarations, Assignment Operators and Statements, Arithmetic Operators,  
Logical Operators, Comparison Operators, String Operators, Conditional Operators,
Operator Precedence; Implementing Control Constructs: Conditional and Looping
Constructs, if else Statements, do while Statements, for in Statement, switch Statement;
Implementing Functions: Defining Functions, Calling Functions, Passing Arguments,
Local vs. Global Variables, Using the Return Statement, Nested Functions; JavaScript
Objects: The JavaScript Object Model and Hierarchy, JavaScript Object Properties,
Object Methods, New Keyword, This Keyword, Creating New Object Instances Using
Constructor Functions, String, Date and Array Objects, Construction of Custom Objects
with Individual Properties and Methods
 
Unit-12 JavaScript Programming – II: Fundamental JavaScript Directives: In-Line
JavaScript, Linking Web Pages to External JavaScript Files, JavaScript Using <script>
Tags and Attributes, Utilizing the <head> Tags <noscript> Tags;   Implementing Arrays:
Why array need in Scripting, Creating Arrays, Reading and Writing to an Array, Array
Methods and Properties; The delete Keyword: Introduction to Server-Side JavaScript,
Purpose of Server-Side JavaScript, ASP and Microsoft Server Architecture, Netscape's
Livewire Run-Time Engine, Server-Side Objects; Cookies: Introduction to Cookie, Uses
of Cookie, Components of a Cookie, Cookie Controversy, Using Cookies on a Web Page,
Cookie Examples; Common Applications: Form Validation and Testing, Specific Form
Methods and Event Handlers, User Interaction, Local Form Processing, Creating New
Windows, Writing to the Window Object, Browser Awareness Using the Navigator
Object, Affecting the Browser Itself, Interactive Graphics; Event Handling: Event-Driven
Programming Model, How JavaScript Handles Events, Handling Link Events, Handling
Window Events, Handling Image Events, Handling Form Events, Setting Event Handlers
In-Line or Referencing
 
Unit-13: XHTML – I: Understanding the World Wide Web: The relationship between
browser and server, The roles of HTML, HTML, CSS, and other technologies used in
Web development; XHTML page framework tags: <html> and </html>, The role of the
<head>...</head> region, The role of the <body>...</body> region, Adding a title, meta
keywords, and meta description tags; Text formatting and layout with HTML: Headings
and subheadings, Paragraph text (including how to bold, italicize, and underline text),
Bulleted and numbered lists, Using attributes to align text, Setting up text regions with
<div>...</div> and <span>...</span> tags, Padding vs margin, Floats; Working with
images : Understanding the GIF, JPEG, and PNG image formats (and when to use them),
Positioning images on the page, Flowing text around images, Using a <div> or <span>
region to position an image
 
Unit-14: XHTML – II: Using tables to display grids of data: Positioning tables on the
page, Turning grid lines on and off, Customizing the table's appearance, Creating table
heading and table data cells, Configuring cells to span multiple rows or columns; Linking
it all together: Creating links to other pages on your site, Creating links to pages on other
sites, mail to: links (for sending email), Techniques for automatically filling in the
subject, cc:, and bcc: fields, Creating links to specific positions within the same page and
other pages, Handling link management challenges; Fill-in Forms: The role of forms and
how they interact with server-side programs, Techniques for effective form design,
Creating text fields, text areas, password fields, and hidden fields, Designing radio button
and checkbox sets, Adding lists and menus to your forms, Finishing the form with submit,
reset, or image buttons, Discussion of how JavaScript can improve forms (by validating
user input, performing calculations on entered numbers, controlling cursor tabbing order,
etc.).
 
Unit-1 HTML Basics: HTML Introduction, HTML Elements, Attributes, HTML
Headings, Paragraphs, HTML Formatting, Fonts, Styles, HTML Links, Images, Tables,
HTML Lists, Forms, Frames, HTML Colours, Colornames, Colorvalues, HTML Quick
List.
 
Unit-2 XML Programming – I: Introduction, The Need for XML, Structured Data and
Formatting, Advantages of XML, SGML, XML, and HTML, World Wide Web
Consortium (W3C) Specifications and Grammars, XML Applications and Tools, Creating
and Viewing XML Documents, Transforming XML Documents, XML Document Syntax,
Validating XML Documents with DTDs, XML Namespaces.
 
Unit-3 XML Programming – II: Introduction, Transforming XML Documents with XSLT
and XPath, Formatting XML Documents with XSL-FO, Purpose of XSL Formatting
Objects (XSL-FO), XSL-FO Documents and XSL-FO Processors, XSL-FO Namespace,
Page Format Specifiers, Page Content Specifiers,
 
Unit-4 XML Programming – III: Validating XML Documents with Schemas, Introduction
to Simple Object Access Protocol (SOAP), SOAP's Use of XML and Schemas, Elements
of a SOAP Message, Sending and Receiving SOAP Messages (SOAP Clients and
Receivers),  Handling SOAP Faults, Current SOAP Implementations, Introduction to Web
Services: Architecture and Advantages of Web Services,   Purpose of Web Services
Description Language (WSDL), WSDL Elements, Creating and Examining WSDL Files,
Overview of Universal Description, Discovery, and Integration (UDDI), UDDI Registries
(Public and Private), Core UDDI Elements, Deploying and Consuming Web Services,
ebXML Specifications ebXML Registry and Repository, Introduction to the XML
Document Object Model (XMLDOM)
 
Unit-5 XML applications: B2B Scenarios, e-business system involved: delivery, sales,
cross company communication: replacement for EDI, the document as the application,
XML and relational databases, XML and dynamic Web publishing, benefits of XML
schemas to applications, XML processors enforcing structure, application access to
document structure, fixed values, channels,
 
Unit-6  Ajax - Asynchronous JavaScript and XML – overview: Web Applications - Pre
and Post Ajax, Ajax in the Real World, Alternatives to Ajax, XML In A Nutshell, Syntax,
Rules, JavaScript In A Nutshell, Primitive Data Types and Reference Types, Variables
Loops, Function Definition and Function Call, Objects, Expressions, Operators and
Escape Sequences, Document Object Model (DOM), Window Object, HTML & XML
DOM, Node, Element, Accessing Element Nodes, Inner HTML, Properties of Element
and Text Nodes, Node Attributes Node Name & Node Value, Event Handling, Key Word
– this, Whitespace, Interpretation - Browser Differences, Removing Nodes, Creating New
Nodes, Node Methods
 
Unit-7 Ajax - XML Http Request Object: XML Http Request Instantiation, XML Http
Request open() Method, Asynchronous Vs Synchronous Requests, Callback Function,
ready State, CSS In A Nutshell, Syntax, Units, Selectors, Positioning properties, float
Property, Types of Positioning 3D, XML and Ajax, Creating a DOM Document with
JavaScript, load XML, Receiving XML Responses from the Server, Passing XML to the
Server 90, Different Server Side Technologies - an overview, Frameworks and Toolkits -
an overview, Some Popular Frame Works - in brief
 
Unit-8 AJAX - Object-Oriented JavaScript: Multiple Simultaneous Asynchronous
Requests, Prototype, Extending Built-in Objects, Object-Oriented XML Http Request,
Refactoring the Creation and Handling of XHR Http Request, Model-View-Control
(MVC), Design Patterns, MVC Examples, Ajax Web Application, JavaScript Object
Notation (JSON), JavaScript Object and Array Creation Using Literals, JavaScript
Objects in Arrays & Arrays in Objects, JSON Syntax, JSON Parsers, JSON Data Transfer
Between Client and Server Autosuggest example
 
Unit-9 AJAX - XSLT: XSLT, Overview, XSLT in the Browsers, Sarissa, Advantages and
Disadvantages, XPath – Overview, Drag and Drop, Overview, Scriptaculous, Draggable
Options, Droppables, Drag and Drop, Ajax and Scriptaculous, Apendix, Download /
Install Software –Wamp, Regular, xpressions, Some characteristics of regular expressions
Metacharacters, Non-assertions and Quantifiers, Assertions and Quantifiers, XML Basics,
XML Benefits, XML Parsers, Content Management, Web Services, A Document Type
Declaration, Elements Attributes, CDATA, Special Characters
 
Unit-10 J2ME: Java Environments Comparison, J2ME (Java 2 Micro Edition), J2SE (Java
2 Standard Edition) & J2EE (Java 2 Enterprise Edition) J2ME specifics, ME components:
KVM, J2ME, CLDC, MIDP - Comparison of different ME platforms, Profiles - Overview
of profile system, Architecture - How the J2ME works, Differences between J2ME
environments - Comparisons between J2ME and Personal Java, MIDP, Mobile
information device profile, Creating MIDP applications, Midlet suites and deployment,
MIDP GUI, Graphical User Interfaces with MIDP, Displays, Commands, Pointers,
Screens, Animations and drawing,  Data structures: Storing data in Java, Hash table and
Hash Map, Vector and List, Comparison between different types,   Inner classes, Using
inner classes, Types of inner classes, Anonymous, Inner, Member, Static, Exceptions, IO
and Networking, Error handling, Streamed IO, Socket IO (TCP/IP), J2ME,   IO,
Connector architecture, Networking with HTTP, Threading, Creating threads in Java,
Synchronization
 
Unit-11 Introduction to HTML5: HTML5 - New standard for HTML, XHTML, and the
HTML DOM, How Did HTML5 Get Started? Rules for HTML5, New Features, Some of
the most interesting new features in HTML5, Browser Support, New Elements in
HTML5, New Markup Elements, New Media Elements, The Canvas Element, New Form
Elements, New Input Type Attribute Values, Video on the Web, Video Formats, How It
Works, All <video> Attributes
 
Unit-12 HTML5 – Audio and Canvas: Audio on the Web, Audio Formats, How It Works,
All <audio> Attributes, HTML5 Canvas, What is Canvas? Create a Canvas Element,
Draw With JavaScript, Understanding Coordinates, More Canvas Examples, HTML5
Web Storage, Storing Data on the Client, The localStorage Object, The sessionStorage
Object, HTML5 Input Types, HTML5 New Input Types, Browser Support, Input Type –
email, Input Type – url, Input Type – number, Input Type – range, Input Type - Date
Pickers, Input Type – search, Input Type – color,
 
Unit-13 HTML5 Form Elements and Attribute: HTML5 New Form Elements, Browser
Support, datalist Element, keygen Element, output Element, HTML5 Form Attributes,
HTML5 New Form Attributes, Browser Support, autocomplete Attribute, autofocus
Attribute, form Attribute, Form Override Attributes, height and width Attributes, st
Attribute, min, max and step Attributes, multiple Attribute, novalidate Attribute, pattern
Attribute, placeholder Attribute, required Attribute: HTML5 Tag Reference, HTML5
Global Attributes, HTML5 Event Attributes, Global Event Attributes, Window Event
Attributes, Form Events, Keyboard Events, Mouse Events, Media Events
 
Unit-14 WAP Simulator for Mobile Phones: Introduction, WAP toolkit software includes:
WML and WML Script encoders, phone simulators, WML Deck and Card, WML
Document Structure, Character data, WML Entities, Prolog, XML Declaration and
Character Encoding, Comments in WML, Line Breaking in WML, Paragraphs and Line
Breaks, Text Formatting, WML Tables, Wireless Bitmap (WBMP), Links, <anchor> tag,
<a> tag.
Description
The World Wide Web was proposed originally as a collection of static documents inter-
connected by hyperlinks. Today, the web has grown into a rich platform, built on a variety of
protocols, standards, and programming languages, that aims to replace many of the services
traditionally provided by a desktop operating system. Topics will include: producing dynamic
content using a server-based language, content serving databases and XML documents, session
state management, multi-tier web-based architectures, web security, and core technologies
including HTTP, HTML5, CSS, JavaScript, and SQL will be emphasized. This course will also
study concepts and technologies including AJAX, social networking, mashups, JavaScript
libraries (e.g., jQuery), and web security. This course is hands-on and project-based; students
will construct a substantial dynamic web application based on the concepts, technologies, and
techniques presented during lecture. This course satisfies the IE Requirement. You must be a
junior or senior to take this course. 3 credits.

Textbooks and Material

This course does not require any books. Because of the ever changing nature of the web we will
instead rely upon currently material that is freely available on the web including software
documentation, blog posts, tutorials, etc. Links to the reading will be providing on a weekly
basis.

Course Objectives
 To learn the nature of the web.
 To understand the structure of the Internet and the Web.
 To study the general notion of protocols.
 To understand the TCP/IP protocol and understand its use in the web.
 To understand and apply the HyperText Transfer Protocol (HTTP).
 To study and apply the HyperText Markup Language (HTML).
 To explore the Document Object Model (DOM).
 To understand and apply asynchronous and event-based programming style.
 To study and apply the basics of Cascading Style Sheets (CSS).
 To learn and apply CSS frameworks such as Twitter Bootstrap.
 To learn and understand the fundamentals of the JavaScript programming language.
 To learn the client/server model.
 To understand stateless versus stateful protocols.
 To understand connectionless versus connection-oriented protocols.
 To explore server-side JavaScript programming.
 To explore client-side JavaScript programming.
 To understand and apply the Model-View-Controller (MVC) pattern.
 To understand server-side routes.
 To understand and apply session state.
 To investigate and apply document-oriented databases.
 To learn and apply data interchange languages (JSON/XML).
 To understand and apply RESTful APIs.
 To understand Single Page Apps (SPA).

When you leave this course you should be fully capable of implementing your own web
application from scratch.

Course Assessment
Student knowledge of the course material will be assessed by the following categories:

 Semester Team Project (45%)

 Workshop Assignments (35%)
 Participation (20%)

The semester team project will begin early in the semester and will be submitted in total at the
end of the semester. At various points during the semester your team will be required to submit
aspects of your project to be reviewed. These checkpoint team project assignments will help
guide you and your team towards a successful project. Individual contributions to your team
project will be reviewed through commits to the version control system that your team will be
required to use. These assignments will be submitted through a version control system that you
will be required to use.

The workshop assignments will be reading/tutorial-based assignments that will help you as an
individual understand the material being covered so you will be a capable contributor towards
your team project. These assignments will be submitted through a version control system that
you will be required to use.

Participation will be measured through the Readiness Assurance Process (RAP) and possibly I-
clicker based questions during class. The RAP will follow a standard format
(https://goo.gl/GoYElb) that helps you prepare for a class. In addition, it will give you and your
team an opportunity to discuss questions and answers that will encourage you to explore the
material and prepare you for workshops. We will drop two RAP and I-clicker scores at the end of
the semester.

There is no opportunity for extra credit in this course. Unless otherwise specified, so do not
ask! The rough breakdown of percentages and final grades for this course are A (93-100), A-
(90-92), B+ (87-89), B (83-86), B- (80-82), C+ (77-79), C (73-76), C- (70-72), D+ (67-69), D
(60-66), F (0-59). We do not scale grades.

Course Policies and Other Requirements

The work for this course will consist of:
 Attending and actively participating in class meetings.
 Submitting any in class exercises or I-clicker questions/polls.
 Several team project assignments.
 Many workshop assignments.
 Final submission of the team project.
 Presenting the team project at the end of the semester.

Course Structure
This course consists of approximately 24 class meetings. As this class gathers in a team-based
learning (TBL) classroom it will not follow the standard lecture format. Rather, our time will be
spent between presenting material and working on so called “workshops”. Each workshop is
carefully designed to guide you through the material in the course. In addition, you will be
expected to participate in class discussions and answer I-clicker polls and questions. You will be
required to do assigned reading in preparation of the workshop in class and complete the
workshop for submission outside of class. Much of the assigned reading is the actual workshop
itself and is vital for your successful completion of the course. My primary role as the instructor
will be to meet with groups during the workshops to assess your understanding of the workshop
and to help guide you to successful completion.

Late Policy
Assignments that are submitted late will receive a 10% penalty for each 24-hour period after the
due date of an assignment up to 72 hours (3 days). Assignments will not be accepted after the 72
hours. If there are extreme circumstances (medical) that prevent you from submitting an
assignment on time a scanned note (e.g., doctor’s note) should be sent to the instructor of the
course before or on the due date of an assignment. Late assignments because of other activities
such as interviews, conferences, or other personal endeavors will not be accepted. It is your
responsibility to manage your own time.

Communication
We will be using Piazza as the primary mode of communication in this course. You should direct
all your questions about the course and its material to Piazza. The course staff will have assigned
times during the week, Monday to Friday, to respond to your posts. Do not expect your posts to
be answered over the weekend. Although we will try to answer as many questions as possible, it
will often be the case that we can’t answer all of them. You are encouraged to answer questions
posted by other students as well as posting useful information that you think other students
would benefit from. We will look at your participation (number of instructor endorsed questions
and answers) on Piazza at the end of the semester to determine tie-breaking grades (i.e., C- to a
C, B+ to an A-).

Piazza provides support for “folders” for categorizing posts. There will be several folders of
interest to you. We will provide folders that correspond to each workshop and startup
assignment. In addition, we will include each of the following folders that you should use to post
privately to instructors in the course:

 grade_disputes - used if you believe your grade on an assignment should be reviewed.

 team_trouble - used if there is an issue with a member(s) on your team.
 medical - used if you have a medical emergency and need to communicate to an
instructor.
 incomplete – used if you are unable to complete the course during the scheduled
semester.

If you post to any of these folders, please attach any relevant documentation or assignment
submission information so that the course staff can provide an effective response to your request.

For all other requests or inquiries regarding the course not covered by the above Piazza folders
you should email the instructor at [email protected].

Manners and Classroom Productivity

All students in this class are to be respected and discriminatory behavior of any kind, both in
class and online, will not be tolerated. It is important to respect the instructor and their time in
preparing material for the course as well as their time in responding to emails and Piazza posts.
We expect everyone to participate in class. This means you should come prepared to participate
and be actively engaged during the class meeting time. Please refrain from the use of cellphones
and laptops during the class time unless explicitly told otherwise. If you are having trouble doing
so it is the responsibility of the instructor to ask you to leave to maintain a productive learning
environment.

Attendance
You should attend every lecture. If you miss a class, talk to a friend who was present, and check
the course website for course announcements and schedule. You are responsible for everything
we tell you in class, regardless of whether we post it to the course website. Your participation in
class is an important contribution to the success of this course. You are responsible for asking
questions, offering comments, helping other students, and completing any in-class exercises or I-
clicker questions/polls.

Team Policies
The largest component of this course is the semester team project. The team formation will occur
during the first couple of weeks of class. You should discuss topics such as prior experience,
course background, goals for this course, workload, and schedule for the semester. Your team
will be required to find blocks of time during the week to work on the team project to a
successful completion. We expect all team members to contribute their fair share and we expect
to assign the same grade to all members of the team. Members who contribute less may receive a
lower grade on the team assignment; non-contributing members will receive a 0. In case of
disputes the teaching staff may interview team members on the project design and
implementation. We will also use the commit log in your team project version control system
repository to evaluate activity. All team members will be required as part of the assessment of a
team project assignment to actively commit to the team repository.

Managing team dynamics and using each team member’s time and talents effectively can be as
difficult as solving the project. We are happy to offer advice on how to handle these issues. Be
open and candid with your team about any potential problems early on so that your team can
plan around such problems and not fall behind. A sure way to make your team upset at you is not
finishing your part of the work at an agreed-upon deadline and not informing them about the
problems early enough for them to help.

Academic Honesty
It is very important in all courses that you are honest in all the work that you complete. You can
collaborate on your team project; however, workshop assignments must be completed by you
alone. If you do not work alone on workshop assignments you are doing a disservice to yourself,
the instructors for the course, the College of Information and Computer Sciences, the University
of Massachusetts, and your future. We design our courses to provide you the necessary
understanding and skill that will make you an excellent computer scientist. Assignments are
designed to test your knowledge and understanding of the material. Plagiarism and academic
honesty of any sort may seem like an easy way to solve an immediate problem (which it is not),
however, it can have a substantial negative impact on your career as a computer science student.
There are many computing jobs out there and many more people working hard to get those
positions. If you do not know your stuff you will have a very difficult time finding a job. Please
take this seriously.

We will carefully review your submissions automatically and manually to verify that “cheating”
has not taken place. If you are suspected of plagiarism, we will follow an informal path to
determine if academic dishonesty has taken place. If you are found guilty you will receive an F
for the course and it will go on your permanent record at UMass. This will disrupt your schedule
for completing courses and may lead to you not completing your degree in a timely fashion. You
should carefully review the Academic Honesty Policy, Avoiding Plagiarism, and the Academic
Honesty Flowchart to understand what academic honesty is, how you can avoid it, and the
procedure we will follow if you are under suspicion.

Every assignment implicitly includes a “contract” that you sign virtually by submitting your
assignment. By “signing” this contract you indicate that you have read all the documents on this
website and any links to academic honesty associated with the university. Your signature
indicates that you completely understand the policies in place and that you have not plagiarized.

Incompletes
An incomplete in this course will only be granted during the third to last week of the course
(4/10/2017 – 4/14/2017) with a maximum of two assignments not completed. Incomplete
requests will not be accepted before or after that time period. If you fail to contact the instructor
during that time your request will not be granted. The incomplete period will be announced in
class during this time.

Schedule
Below is the starting schedule for the course. There may be circumstances when the schedule
must be changes or updated to ensure the best delivery of the material in this course. You will be
responsible for referring to this schedule throughout the semester, updating your own calendar of
important events and assignments, and referring to Moodle to ensure that you have the most up-
to-date information and schedule. It is ultimately your responsibility to keep up with the course
to guarantee your success.

Overview
The way web software is built has been rapidly changing. As use of the world wide web has
shifted from information presentation to information gathering to direct customer sales (e-
commerce) to enterprise applications, the amount and complexity of software has steadily been
increasing. Many new technologies and frameworks have emerged everyday. Have you ever
wondered what technologies, frameworks, or architectural styles you should use? What
programming languages you should be familiar with? After you graduate, what languages will be
popular or will be in great demand? How will you keep up with web development technologies?
According to the UVA CS Industrial Advisory Board meeting, companies prioritize the foundation
of web development over any specific technologies or frameworks.

This course will help you see how fundamental concepts of web development can be applied to
develop reliable and usable web software regardless of the technologies, languages, or
frameworks. Although we put our emphasis on the concepts, you will demonstrate your
competence in web development by developing dynamic web software with several commonly
used programming languages and technologies.

You will work on user interface design, the front end development, back end development, and
web-based information retrieval and processing. Over the semester, you will work on each
programming assignment with a partner. Each assignment will be a step in creating a web
application. You will be able to choose what to build, with the assignment constraining the
features that must be used. By the end of the semester, you will have built a dynamic web
application. With a large portion of the process that involves team work, interpersonal skills and
conflict management, and time management, this course will help you practice and prepare for
your professional development.

After completing this course, you will understand and be able to design usable graphical user
interfaces and implement them on the web, build software that accepts information from users
across the web and returns data to the user in user-appropriate presentation, and construct
software that interacts with database engines and several forms of persistent data.
Learning objectives
 Demonstrate an understanding of the client-server, message-passing computing
models, and the quantitative engineering principles for how to build web-based software
user interface by developing usable, reliable, and effective web applications
 Realize that usability is more important than efficiency for almost all modern software
projects, and often the primary factor that leads to product success
 Apply usability concepts to real-life scenarios and suggest potential improvement from
an engineer’s perspective
 Evaluate your project for compliance with client requirements and the usability
evaluation criteria
 Collaborate with your project partner professionally and contribute fairly
 Develop web software using specific technologies including HTML, CSS, bootstrap,
JavaScript, Ajax, Angular, PHP, XML, JSON, and MySQL

Prerequisite
You must have passed CS 2150 (Program and Data Representation) with a grade of C- or
better. Programming skills are required and you are expected to know HTML or learn on your
own. You are expected to have ability to pace yourself on a semester-long project and be able
to attend class regularly.

While you are required to have programming experience and knowledge of data representation,
I am aware that you come in with varied experiences in web development. You will be guided
through the fundamental concepts of web development and web programming. You will also
have the opportunity to explore modern approaches and technologies in web software
development.

Reading
You do not have to purchase any textbook for this course, unless you want to (the book
information will be provided on the handout). Where appropriate, additional references that can
be relevant for further reading will be provided on the Schedule page.

You are expected to read the relevant material before class meeting. The schedule for the
readings is given on the Schedule page. The lectures may not cover everything in the readings
and will often include material not found in the readings (based on class discussion).
Learning activities
To facilitate your learning process, the course structure consists of five main activities: in-class
exercises, hands-on activities, homework assignments, quizzes, and final exam.

1. In-class exercises
Three main purposes of this activity are to help you to (i) understand the underlying concepts
and apply them to develop a web application, (ii) introduce specific languages or technologies,
and (iii) get ready to work on homework assignments.

You are encouraged to work in small groups, allowing peer learning and imitating industrial
software development and quality assurance scenarios. Each exercise is designed to get you to
think about some specific aspect of the material we are learning that day. All exercises are
hands-on and practical and most will require programming.

Throughout the course, you will have multiple opportunities to explore the usability of existing
web software and share your opinion through discussion and writing. You will also experience a
variety of web development concepts.

At the end of some classes, we will have a "five-minute paper." You will be asked to respond in
written form to a simple question related to the day's discussion. This is to help you to assess
your understanding and allow me to clarify any doubts you might have.

We will have in-class exercises during most Thursdays and some Tuesdays. Most will be done
in small groups and a few may be individual exercises. They will be graded on a "done / not
done" basis. Credit can only be received if done in class. If you miss class, you should do the
posted exercise on your own to learn the material. No make-up or late in-class exercises will
be given. You are allowed to miss up to two (out of twelve) in-class exercises. The 10 in-class
exercises will be used to calculate the final grade. Please refer to the in-class drop policy.

2. Hands-on activities
Hands-on activities serve the same purposes as in-class exercises. The difference is that they
are not graded; you are not required to submit any activities. We will do hands-on activities
almost every class meeting.

3. Homework assignments
Homework assignments are the main mechanism to help you learn web software development
and apply the concepts to build a portfolio-worthy web application piece-by-piece. Some
homework assignments will be written and some will require programming. Most will allow
collaboration with one partner.
The UVA Honor Code is in effect: please refer to the collaboration and Professionalism sections
of the course policies.

Assignments will be posted on the class website before class and discussed in class. You will
submit your homework assignments electronically to UVa Collab. Most assignments require
demonstration to TAs for grading purpose – allowing you to practice your presentation and to
"sell" your project. More details on submission guidelines will be provided on the assignment
pages.

Because each homework is a step toward your course project and your professional
development, it is important that you manage your time wisely. All homework assignments
must be submitted before class on the day they are due. Any submission received after this
time will be considered to be late. Changing an assignment after the due date without prior
permission will be treated as a late submission.

At the end of the semester, we will have a station-like project presentation. You will demonstrate
how your system works, and explain your design decisions and features that improve the
usability of your system. You are encouraged to visit your classmates' stations and discuss their
design and implementation. You may find something interesting from their systems. This is a
great opportunity to share ideas and opinions; you may learn something useful for your future
projects. The fun part is, we will vote for "the best usable project" and "the coolest project."

You are expected to have a backup disk (or storage somewhere) for every assignment you turn
in. In this way, if there is any problem with the copy that is handed in the backup can be used for
grading purposes.

4. Quizzes
We will have weekly quizzes and no midterm exam. The goals of the quizzes are to reinforce
the concepts in recent classes and assess your understanding of recent topics/skills. This also
gives me an opportunity to work with you on any particular topics/skills that can be improved.

Quizzes will generally cover material from previous classes. They will be given during the first
10-15 minutes of class on most Tuesdays and some Thursdays. No make-up or late quizzes
will be given. You are allowed to miss up to two (out of twelve) quizzes. The 10 quizzes with
the highest scores will be used to calculate the final grade. Please refer to the quiz drop policy.

5. Final Exam
Final exam is comprehensive, closed book/notes/web, in class. The only exception is a single
sheet of 8 1/2 x 11 paper (single/double sided, single/double spaces, your choice) with hand-
written notes by the person taking the exam. Appropriate documentation (as determined by
instructor) and requisite permissions (approved by the Dean's Office, in particular) are required
for make-up exam requests. Picture IDs are required to take all exams.

If you know in advance that you are unable to make an exam for a valid and unavoidable reason
(such as a scheduled surgery, etc), you must notify me at least one week before the scheduled
exam date to make arrangements for a make-up, and bring documentation with you when you
take the make-up. If you miss an exam due to a university-accepted excused absence (such as
an illness or car accident the day and time of the exam), you must notify me within 24 hours of
your absence to make arrangements for a make-up, and bring approved documentation with
you when you take the make-up exam. Failure to follow either of these policies will result in a
zero grade on the exam.

Assignments

There will be 11 homework assignments worth 40 points each. Your assignment

answers will be due on Mondays.

Quizzes

There will be 4 quizzes worth 100 points each. Your quiz answers will be due on
Tuesdays, except for the final quiz which will be due on the last day of the class.

Project

There will be one project worth 105 points. Your project will be due the day before the
last day of class. The project will consist of the design and creation of some Web page
of your choice. Here you get to solve a problem of interest to you and to use your
imagination. The project does not have to be anything fancy, just whatever you can do
with about 13 hours of work.  It can be anything you like.  Be creative and have fun. 

Late Work
OBJECTIVES:

 To understand different Internet Technologies.

 To learn java-specific web services architecture

UNIT I WEBSITE BASICS, HTML 5, CSS 3, WEB 2.0    9

Web Essentials: Clients, Servers and Communication – The Internet – Basic Internet protocols – World

wide web – HTTP Request Message – HTTP Response Message – Web Clients – Web Servers – HTML5

– Tables – Lists – Image – HTML5 control elements – Semantic elements – Drag and Drop – Audio –

Video controls – CSS3 – Inline, embedded and external style sheets – Rule cascading – Inheritance –
Backgrounds – Border Images – Colors – Shadows – Text – Transformations – Transitions –

Animations.

UNIT II CLIENT SIDE PROGRAMMING                          9

Java Script: An introduction to JavaScript–JavaScript DOM Model-Date and Objects,-Regular

Expressions- Exception Handling-Validation-Built-in objects-Event Handling- DHTML with JavaScript-

JSON introduction – Syntax – Function Files – Http Request – SQL.

UNIT III SERVER SIDE PROGRAMMING                        9

Servlets: Java Servlet Architecture- Servlet Life Cycle- Form GET and POST actions- Session Handling-

Understanding Cookies- Installing and Configuring Apache Tomcat Web Server- DATABASE

CONNECTIVITY: JDBC perspectives, JDBC program example – JSP: Understanding Java Server Pages-

JSP Standard Tag Library (JSTL)-Creating HTML forms by embedding JSP code.

UNIT IV PHP and XML                                                     9

An introduction to PHP: PHP- Using PHP- Variables- Program control- Built-in functions- Form

Validation- Regular Expressions – File handling – Cookies – Connecting to Database. XML: Basic XML-

Document Type Definition- XML Schema DOM and Presenting XML, XML Parsers and Validation, XSL

and XSLT Transformation, News Feed (RSS and ATOM).

UNIT V INTRODUCTION TO AJAX and WEB SERVICES                                                               

AJAX: Ajax Client Server Architecture-XML Http Request Object-Call Back Methods; Web Services:

Introduction- Java web services Basics – Creating, Publishing, Testing and Describing a Web services

(WSDL)-Consuming a web service, Database Driven web service from an application –SOAP.

                                                                                                       TOTAL 45 PERIODS
OUTCOMES:

At the end of the course, the students should be able to:

 Construct a basic website using HTML and Cascading Style Sheets.

 Build dynamic web page with validation using Java Script objects and
by applying different event handling mechanisms.
 Develop server side programs using Servlets and JSP.
 Construct simple web pages in PHP and to represent data in XML
format.
 Use AJAX and web services to develop interactive web applications

TEXT BOOK:

1. Deitel and Deitel and Nieto, ―Internet and World Wide Web – How to
Program‖, Prentice Hall, 5th Edition, 2011.

REFERENCES:

1. Stephen Wynkoop and John Burke ―Running a Perfect Website‖, QUE,

2nd Edition,1999.
2. Chris Bates, Web Programming – Building Intranet Applications, 3rd
Edition, Wiley Publications, 2009.
3. Jeffrey C and Jackson, ―Web Technologies A Computer Science
Perspective‖, Pearson Education, 2011.
4. Gopalan N.P. and Akilandeswari J., ―Web Technology‖, Prentice Hall of
India, 2011.
5. UttamK.Roy, ―Web Technologies‖, Oxford University Press, 2011.
Responsive Design 1
Syllabus Sections

 COURSE REQUIREMENTS
 READINGS
 COURSE SUBJECTS
 STUDENT LEARNING OUTCOMES/LEARNING OBJECTIVES

Publish Date

03/14/2019 15:30:42

Responsive Design 1

UXUI-1373

Credit Summer 2019

05/28/2019 - 08/12/2019

Course Information

Section 001
Laboratory
HYC NRG
Josiah Spence

Section 001
Lecture
Th 13:05 - 17:00
NRG4 4206
Josiah Spence

Office Hours

 T
11am - 1pm
NRG 4208
 T
5pm - 6pm
 Th
11am - 1pm

COURSE REQUIREMENTS
 

week 1- Competency One: Use HTML for the structure and content of a web page
2



Be introduced to
HTML Syntax




Learn when to use
Absolute & Relative URLs




Add images to a web
page




Be Introduced to
Cascading Style Sheets (CSS)




Upload files to a Live
Website using FTP
week 3 Competency Two: Write CSS3 styles to format the elements of a web page




Identify CSS Class
Selectors




Use the Div Tag for
Basic Page Formatting




Use Browser
Developer Tools




Identify HTML5
Semantic Elements

week 4 Competency Three: Create CSS3 to format fluid page layouts



 
Implement fluid
Layout & Max-Width




Test run a Real-World
Layout




Work with the Box
Model




Use Floats & Images

week 5- Competency Four: Structure, style and embed specialized content on a web page
6



Code Links with
Images & Page Jumps



Style Links




Style the Navigation




Share CSS & Center
Content




Set the Viewport Meta
Tag




Set CSS Background
Images
 


Have Fun with Fonts

week 7 Competency Five:  Use advanced layout techniques, high res graphics, CSS specials




Fine-Tune a layout
with Box Model




Use CSS Buttons &
Floats




Implement Hi-Res
Images

week 8- Competency Six:  Code an interactive image-rich webpage

9



Review HTML and
CSS



Demonstrate how
HTML is used to mark up or describe the content




Use CSS to styles the
content based on markup




Use native CSS
capabilities of modern browsers




Code images and
videos that resize in accordance with browser size




Implement web-font
 typography and CSS animated transitions




Use media queries to
adapt content

week Competency Seven:  Demonstrate the capabilities of Responsive Web Design (Final Project)
10-11



Work with a base
template to create a website




Organize the
framework files package




Make it look beautiful,
make it useful, and don't break it

 
READINGS
Textbooks
Web Development Level 1: Building Websites with HTML5 & CSS3
nobledesktop.com/books/web-development-level-1

Responsive CSS3 Scrolling Effects

nobledesktop.com/books/responsive-css3-scrolling-effects

COURSE SUBJECTS
COURSE RATIONALE/OBJECTIVES
Instruction in best practices for building responsive websites that adapt to different devices and user behaviors.
Responsive design topics to be covered include: HTML5; CSS3; semantic html; code frameworks; designing with fluid
grids; creating layouts which incorporate typography and fluid media; using CSS media queries; responsive web
typography; color; templates; hosting; web apps; web services. Students are then prepared to 1) evaluate whether or
not responsive web design is a viable career option for them, and 2) pursue more advanced study in web, interaction,
and UX design if they choose to do so.

 
COURSE SNAPSHOT
In this class you’ll learn how to code HTML and CSS, the coding languages used to create web pages. I focus on best
practices for structuring the content of your webpages with HTML and then styling the content with CSS.

Once you have the basics under your belt, you'll move on to real-world page layout. You’ll learn text and link styles,
centered page layout, background images, CSS-based navigation, forms, uploading files via FTP, and much more. I
will provide you with content and prepared images for use in these projects but this training will give you hands-on
practice coding websites from scratch all the way through uploading them to make them live.
 

STUDENT LEARNING OUTCOMES/LEARNING

OBJECTIVES
What you’ll learn to do by the end of this course:




Coding Basics: HTML Syntax




Creating Links: Text, Images, Email, & Named Anchors




Adding Images




Cascading Style Sheets (CSS)




Div Tag & Basic Page Formatting




Using Browser Developer Tools




HTML5 Semantic Elements



Fluid Layout & Max-Width




Real World Layouts




The Box Model




Floats & Images




Styling Links




Styling the Navigation




HTML & CSS Wireframe




CSS Background Images




Google Fonts




CSS Buttons & Floats




Hi-Res Images
 


Uploading to a Live Website via FTP




Form Basics

Topics to be covered

1. Module_1: Introduction, Knowledge Discovery Process

Here, we have looked at data mining, its motivations followed by the drawbacks of traditional data analysis,
further, a discussion on data and data functionalities has been done along with the study of the process of
knowledge discovery and the issues in data mining. Finally, the typical architecture of Data Mining has been
covered in detail.

 Why is Data Mining important?

 What is Data Mining, what are the drawbacks of Traditional Data Analysis?
 Data mining is done on what kinds of data, and what are the functionalities of data mining?
 What is the process of Knowledge Discovery in Databases (KDD)?
 What are the major issues in Data Mining and what is the typical architecture of Data
Mining?
2. Module_2: Data Preprocessing - I

Here, we have looked at the data and different types of attributes, its properties including the different types of
data sets.

 What is Data?
 What are the different types of attributes?
 What are the properties of attribute values?
 What are Discrete and Continuous Attributes and what are the various types of data sets?
 What are the different types of Data?
3. Module_3: Data Preprocessing - II

The main objective of this lecture is to understand the issues that are considered before performing the
preprocessing along with some of the preprocessing techniques.

 What are the various data quality problems?

 What are the different kinds of preprocessing algorithms (part 1)?
 What are the different kinds of preprocessing algorithms (part 2)?
 What are the different kinds of preprocessing algorithms (part 3)?
4. Module_4: Association Rules

The focus of this lecture is on understanding the association rule mining and the different steps of discovering
association rules.

 What is Association Rule Mining?

 What is the different set of steps in discovering Association rules (part 1)?
 What is the different set of steps in discovering Association rules (part 2)?
5. Module_5: Data Frames

Here, we have looked at the Frequent itemset generation which is computationally expensive, then we have
covered Apriori principle and its algorithm.

 What is the concept of Frequent Itemset Generation?

 What is Apriori Principle and its Algorithm?
6. Module_6: Rule Generation

Here, we have continued to look at the Apriori algorithm and also covered Rule generation for Apriori
algorithm along with pattern evaluation followed by seeing these evaluations in term of the interestingness.

 What is the Apriori Algorithm (continued)?

 How to efficiently generate rules from frequent itemsets and for Apriori Algorithm?
 How to evaluate patterns and compute interestingness measure?
7. Module_7: Classification

Here, we have covered the classification means and classification task along with the classification techniques.

 What is the Classification (part 1)?

 What is the Classification (part 2)?
8. Module_8: Decision Tree - I

The focus of this lecture is to understand Decision trees along with the study of the representation of rules in
Decision trees.

 What is Decision Tree and Classification Task?

 What is a Decision Tree Algorithm?
 How to implement a Decision Tree?
9. Module_9: Decision Tree - II

Here, we have looked at obtaining a decision tree for classification problem including an example of the same.

 How to create a Decision Tree (part 1)?

 How to create a Decision Tree (part 2)?
 How to create a Decision Tree (part 3)?
10. Module_10: Decision Tree - III

Here, we have continued looking at obtaining a decision tree and also covered the Top-down construction rule
for obtaining a decision tree for classification problem.

 How to create a Decision Tree (part 4)?

 How to use Top-Down Construction rule in Decision Tree Creation?
 What is the best attribute to split and what is the principle of Decision Tree Construction?
 What is Entropy?
11. Module_11: Decision Tree - IV

We have continued looking at obtaining a decision tree and also covered the problem with obtaining decision
tree along with few extensions of the basic tree algorithm and some of the advantages of the decision.

 What is the concept of Decision Tree Pruning and Decision Tree Extensions?
12. Module_12: Bayes Classifier I

We have covered probability distribution through an example and looked at some of the important concepts,
which is known as Class Conditional Probabilities.

 Class Conditional Probabilities example (part 1)

 Class Conditional Probabilities example (part 2)
 Class Conditional Probabilities example (part 3)
13. Module_13: Bayes Classifier II

Here, we have looked at the Posteriori Distribution on the previous example and we have covered the MAP
representation of Bayes classifier and MAP multiple classifiers along with Multivariate Bayes classifier.

 What is Posteriori Probability?

 How is MAP representation of Bayes Classifier and Multiclass classifier done?
 What is Multivariate Bayes Classifier?
14. Module_14: Bayes Classifier III

Here, we have continued to look at the Multivariate Bayes classifier and its special case.

 What is Multivariate Bayes Classifier (part 1)?

 What is Multivariate Bayes Classifier (part 2)?
 What is Multivariate Bayes Classifier (part 3)?
15. Module_15: Bayes Classifier IV

Here, we have looked at the types of distances measurement between two distribution, and an example of a
Bayes classifier along with the Naive Bayes classifier.

 What is the different type of distances between two distributions?

 Example of Bayes Classifier
 What are the Naive Bayes Classifier and its example?
16. Module_16: Bayes Classifier V

We have continued to look at the Naive Bayes classifier and its example, we have also looked at the
conditional independence and an exercise on it along with the comprehensive look at the Directed acyclic
graph (DAG).

 Example of a Naive Bayes Classifier (part 1)

 Example of a Naive Bayes Classifier (part 2)
 What is Conditional Independence?
 Exercise on Conditional Independence
17. Module_17: K Nearest Neighbor I

Here, we have covered the Classification algorithm called the K nearest neighbor classifier.

 Recap of Bayes Classifiers

 K Nearest Neighbour Classifiers
18. Module_18: K Nearest Neighbor II

The focus of this lecture is to understand the basics of K Nearest Neighbor and also understand the Voronoi
diagram of the Nearest Neighbor. Also, we have looked at the distance-weighted K-NN followed by different
issues of nearest-neighbor classifiers.

 What is the definition of nearest neighbors and Voronoi Diagram?

 What is Distance Weighted K Nearest Neighbour Rule and how to predict continuous values?
 What are the issues in Nearest Neighbour Classifiers?
19. Module_19: K Nearest Neighbor III

Here, we have looked at K-nearest neighbor classification technique (KNN) and the computational complexity
of KNN followed by reduction of computational complexity.

 Example of K Nearest Neighbour (KNN) Classifier (part 1)

 Example of K Nearest Neighbour (KNN) Classifier (part 2)
 What is the computational complexity in KNN Classifiers?
 What is Condensing and Condensed Nearest Neighbour?
20. Module_20: K Nearest Neighbor IV

Here, we have covered the reduction of computational complexity using High dimensional search and also
looked at the K dimensional tree structure along with some alternate terminologies in KNN.

 What is the concept of High Dimension Search?

 What is a KD-tree and how it is used for range search?
 What are the alternate terminologies in KNN?
21. Module_21: K Nearest Neighbor V

Here, we have looked at the classification algorithms to know which one is better and which one should be
chosen.

 How to evaluate a classifier?

 What are the metrics for performance evaluation?
 What are the methods for performance evaluation and model comparison?
22. Module_22: Support Vector Machine - I

The main objective of this lecture is to understand the discriminant analysis and the case of Linear
discriminants, which means that we have 2 features and 2 classes as well, we want to draw a line which will
separate this.
 What is a Discriminant Analysis?
 What is Linear Discriminant Analysis and Design (part 1)?
 What is Linear Discriminant Analysis and Design (part 2)?
 What is Linear Discriminant Analysis and Design (part 3)?
23. Module_23: Support Vector Machine - II

Here, we have continued to look at the linear discriminate (Linear separators).

 What are Linear Separators (part 1)?

 What are Linear Separators (part 2)?
 What are Linear Separators (part 3)?
 What are Linear Separators (part 4)?
24. Module_24: Support Vector Machine - III

Here, we have again looked at linear discriminate(Linear separators), bad and good decision boundaries and
then we have covered the way of getting the line with the highest margin which will give the equation of the
line.

 What are Linear Separators (part 5)?

 What are a good decision and a bad decision boundary?
 How to choose the optimal linear separator (part 1)?
 How to choose the optimal linear separator (part 2)?
25. Module_25: Support Vector Machine - IV

Here, we have covered the Primal and Dual optimization problem followed by understanding the solution of
the dual optimization problem. We have also covered the concept of quadratic programming (QP).

 What is Primal Optimization Problem and dual problem?

 What is Dual Optimization Problem (part 1)?
 What is Dual Optimization Problem (part 2)?
26. Module_26: Support Vector Machine - V

Here, we have covered the Quadratic programming (QP) problem and looked at Karush–Kuhn–Tucker (KKT)
theorem that can be used for solving QP problem.

 What is the Quadratic Programming (QP) problem?

 What is Karush–Kuhn–Tucker (KKT) theorem (part 1)?
 What is Karush–Kuhn–Tucker (KKT) theorem (part 2)?
 What is Karush–Kuhn–Tucker (KKT) theorem (part 3)?
27. Module_27: Kernel Machines

Here, we have introduced the concept of slack variable, soft and hard margin in separable cases followed by
the optimizations problems. We have also looked at the kernel machine for solving the non-linearly separable
class problem.

 What is the concept of Slack Variable?

 What is the hard and soft margin in an inseparable class and what is optimization problem for
non-separable classes?
 What is the Dual optimization problem for Soft Margin Hyperplane?
 What is the problem of Non linearly separable class and how it is solved using Kernel
machine?
28. Module_28: Artificial Neural Networks I

The main objective of this lecture is to study the Neural networks and its connectionism and Biological neuron.
We have also covered the Artificial neural network and its simplest model which is Perceptron.

 What are Neural Networks, what is Connectionism and Biological Neuron?

 When Artificial Neural Networks (ANNs) are to be considered and what is the Perceptron?
 What is Perceptron (Continued)
 How Does Perceptron work as a Linear Discriminant?
29. Module_29: Artificial Neural Networks II

Here, we have looked at the mechanism of finding the correct set of weights to solve a prediction problem.

 What are the training rules to be followed for determining weights in ANNs?
 What is the Perceptron training rule?
 What is the Delta rule and Gradient Descent?
 What is the Gradient Descent Technique and Algorithm?
30. Module_30: Artificial Neural Networks III

Here, we have explained the difference between Perceptron and Gradient Descent algorithm and also explained
about the logic gates that can be realized with the perceptron model, and also explained Multilayer Perceptron.

 Comparison between Perceptron and Gradient Descent algorithm

 How to realize logic gates using Perceptron?
 What are Multi-Layered Perceptrons (MLP)?
 What are MLPs (continued)?
31. Module_31: Artificial Neural Networks IV
 Here, we have covered Sigmoid unit, and weight update rule for the multilayer perceptron along with the
issues with ANNs and extension of ANNs.

 How to use a Sigmoid function in Multi-Layered Perceptron and its training rules?
 What is Forward and Back Propagation?
 What is the error gradient for a sigmoid unit?
 What is the procedure of backpropagation?
32. Module_32: Clustering I

Here, we have looked at the basics of Clustering and Scatter coefficient for observing the goodness of
clustering including an understanding of Hierarchical & Partitional clustering.

 What is Clustering?
 How to find groups of similar objects?
 What is the distance measure?
 What is partitional clustering?
 What is Hierarchical clustering?
33. Module_33: Clustering II

Here, we have covered the desirable properties of the clustering algorithm, Hierarchical Agglomerative &
Hierarchical Divisive clustering. We have also looked at the three ways of measuring distance b/w two
clusters.

 What are the desirable properties of Clustering algorithm and what is the Hierarchical
Agglomerative Clustering?
 What is the Hierarchical Divisive Clustering and how to measure closeness between two
clusters?
 What is Single Linkage Clustering, its advantages and disadvantages?
34. Module_34: Clustering III

Here, we have looked at the K-means clustering algorithm and its Example

 What K - Means Clustering Algorithm (part 1)?

 What K - Means Clustering Algorithm (part 2)?
 Example of K - Means Clustering Algorithm
35. Module_35: Clustering IV

The main objective of this lecture is to learn about Idea of Density-based clustering, and density-based
algorithm that is DBSCAN (Density-based special clustering acronym)
 What is Density-based Clustering algorithm?
 How to measure the density of a point?
 Some definitions related to Density-Based Clustering
 What is the DBSCAN Algorithm?
36. Module_36: Clustering V

Here, we have covered the Hybrid clustering algorithm that is CLARA followed by evaluating clustering
algorithms.

 What is Hybrid Clustering Algorithm?

 What is Cluster Validity, what are the different aspects of Cluster Validation and what are the
measures of Cluster Validity?
 What is Scatter Coefficient and what are internal and external measures of Cluster Validity?
37. Module_37: Regression I

The focus of this lecture is to understand the concept of Regression problem, univariate and multivariate
regression of regression model along with the most common technique of regression called as Linear
Regression.

 What is Regression?
 What is Univariate and Multivariate Regression?
 What is a Regression Model?
 What is Linear Regression?
38. Module_38: Regression II

Here, we have looked at the Linear Regression model.

 What is Linear Regression Model (part 1)?

 What is Linear Regression Model (part 2)?
 What is Linear Regression Model (part 3)?
 What is Linear Regression Model (part 4)?
39. Module_39: Regression III

Here, we have continued to look at the Linear Regression model and some of the limitations of Linear
regression followed by the Non-Linear regression.

 What is the Error in Linear Regression Model?

 How to solve Error in Linear Regression Model?
 What are the limitations of Linear Regression model what is Non-Linear Regression?
40. Module_40: Regression IV

Here, we have covered the problem of Over-fitting, Ochams razor principle and the Time series prediction
problem along with its solution.

 What is the problem of Overfitting?

 How Complexity and Goodness of Fit are compared and what is Ochams Razor Principle?
 What are Complexity and Generalization?
 What is Training, Validation and Test Data and what is time series prediction problem?
41. Module_41: Dimensionality Reduction I
 What is the purpose of Dimensionality Reduction?
 What are the Dimensionality Reduction Techniques?
 What is the Evaluation Index, Kullback-Leiber Divergence?
 What are the search algorithms to find the best subset and what are the techniques of feature
subset selection?
42. Module_42: Dimensionality Reduction II
 What is a Feature Selection?
 What is Feature Extraction Problem?
43. Module_43: Tutorial
 Basics of R programming (part 1)
 Basics of R programming (part 2)
 How to use Apriori Algorithm for accessing Association Rules from a dataset?
 How to Generate the Decision Trees?
 How to apply the R program to use K-Means Clustering?
 How to classify the data based on Naive Bayesian classification?
HTML/CSS MINI EXAM (IN CLASS)
Points
20

Assigned
March 04, 2020

Due
March 04, 2020

This mini exam will act as our “midterm”. It will encompass all of the basic technical
principles behind HTML and CSS.

We will continue to have class in addition to the midterm.

PURPOSE OF EXAM

The purpose of the exam is to evaluate you on some very basic principles of HTML,
CSS and responsive web designed learned in the first 7 weeks of class. If you know
these basic principles, you’ll have demonstrated that you understand how the web
works and are ready to begin developing your own basic web sites.

FORMAT OF EXAM

 Written, with fill-in-the-blank, short answer and multiple choice

 While you may be asked for small code examples, you won’t have to produce
any working code.
STUDY GUIDE

This is a list of the topics to study. If you don’t see a topic specifically listed, you
don’t have to focus on that topic for the exam.

 Purpose of HTML
 Purpose of CSS
 CSS Box Model (border, margin, padding)
 Basic Text Tags (Paragraphs, Lists, etc.)
  Link Tags
 Image tags and image accessibility
 Image formats (what the images are saved as)
 Block vs. inline elements
 Styling an element with CSS
 Basic styling with CSS (color, font family, bold, italic, underline)
 CSS inheritance rules
 Basic size units used on the web
 HTML 5 elements and their purpose
 Media queries and their purpose
 Single CSS rule that will make images flexible for responsive design (not
break out of their containing box)
 Breakpoints and how to choose them
 What is flexbox (display: flex) and why it is useful (no code)
 What are floats and what are the pros and cons

CSS ADVANCED LAYOUT (MULTI

WEEK ASSIGNMENT)
Points
5

Assigned
March 16, 2020

Due
April 15, 2020

INTRODUCTION

Barroco Arepa Bar is a Columbian-style restaurant in Lakewood, Ohio.

Their chief complaint is that the website isn’t responsive! Many people use the
website from their phones to look at the restaurant’s menu and look up location
information.

They’d like you to take elements from their current “desktop-only” website and make
it a responsive one, making changes to the design as needed.

View Current Site View Screenshot

WHAT TO DO

In CodePen, you’re going to translate the existing desktop-only home page into a
responsive one. You can either use the existing assets and content available on the
website or create your own new design (this is a more advanced, but creative,
approach). You could also use a hybrid of old site and integrate some of your own
ideas.

Note: while you can inspect the code from their current site, the code is machine-
generated from Wix and is nearly unreadable. I don’t recommend using any of the
existing code.

1. If you want, fork this starter pen, which has starter content and HTML
structure in place. If this seems confusing, build from scratch and pull
elements as you go. Feel free to change this content however you need:
https://codepen.io/droll_ksu/pen/NJXEMO?editors=1000 -REMEMBER
TO FORK. DO NOT WORK FROM THIS PEN.
2. Use the assets and content below to begin styling your components (you
might start from the header and work down). You will have to add additional
HTML and classes in order to effectively style your components.
3. Build your site mobile-first, choosing how items stack and in what order. Then,
add in your media queries to create grid, float or flex layouts as needed.
4. When building the navigation, we haven’t yet learned how to do a collapsible
menu. Find a creative way to display your navigation on small screens without
resorting to the “hamburger” menu quite yet. (The intermediate layout
example could be a good guideline.)
5. Including the live video is not required, just use the live video still from below.

Assets for Use

Colors:

 Light Brown: rgb(214,152,105)

  Grey: rgb(232,232,232)
 Orange: rgb(222,80,33)
 Red: rgb(139, 1, 0)

Fonts:

 Navigation and Body Copy: Nunito

 Headlines: Playfair Display
 Location list in top section: Anton / Pacifico (This is a substitute open-source
script)

Icons & Logos:

Facebook Icon

Instagram Icon

Barroco Logo

Barroco Logo in Orange - in case you want to use it

Images:

Main Hero Image

Barroco Larchmere Image

Barroco Crocker Park Image

Barroco Birdtown Image

Happy Hour Holiday Photo

Happy Hour Cheers Photo

Fancy Drink

Fancy Drink 2

Fancy Drink 3

Fancy Drink 4
Dancing Women in Orange Shirt

Live Music Video Still Image

HOW YOU’LL BE GRADED

This is an open-ended assignment, meaning I have no specific expectations for the

final design/look and feel, except:

1. Your assignment is marked up in proper HTML, using the correct elements as

needed.
2. Your CSS is formatted properly with media queries starting at a small screen
and then changing to a large screen.
3. You’ve used at a minimum one flexbox, float or grid property to position items
side-by-side in appropriate places. You can mix and match flex and grid as
appropriate.
4. The design effectively replicates the content of the original website design,
with design changes as appropriate to create the responsive site. Don’t want
to include something? You can leave it out.

Submitting the Assignment

1. Once you’re satisfied, copy the Editor Mode URL from CodePen
2. Log in to Blackboard Learn to submit your assignment. Go to Assignments >
Assignment Name. Under Write Submission, Paste the URL of the Pen
(Editor Mode). Click Submit.
RUBRIC

Use the following rubric to ensure you receive the highest possible grade for the
assignment:

Use the following rubric to ensure you receive the highest possible grade for the
assignment:

 5 - 6: HTML CSS and accompanying media queries is written appropriately.

All steps were followed and correct styles are applied. The design mostly
 mirrors the original, with proper steps taken for responsive format. You used
either flexbox or grid to position elements.
 3 - 4: CSS is mostly structured correctly, but there are some syntax and/or
media query issues (for example, you forgot to close a rule with a semicolon).
Some of the steps were missed. The design doesn’t work well at some
responsive breakpoints.
 0 - 2: CSS does not use appropriate style attributes. Media queries are not set
correctly. Syntax is incorrect and many of the steps were missed. The layout
isn’t appropriate for a responsive website.

CSS INTERMEDIATE LAYOUT

Points
5

Assigned
March 04, 2020

Due
March 11, 2020

This assignment begins a brand new webpage that will help you learn how to lay out
and style boxes.

This is an individual assignment, and it will be turned in via Blackboard Learn.

Do not copy and paste another student’s code. If I catch you doing so, you’ll
receive a 0 for the assignment.

WHAT TO DO

Starter Content and HTML

It’s best to start with the content and structure first, and then move on to CSS. I’ve
provided some HTML and content to get you started.

Visit https://codepen.io/droll_ksu/pen/zbZRqN and fork my starter pen using the

Fork button.
Rename the pen by clicking on the Pencil icon and renaming it to this structure: Your
Name - Boxes and Layout

Final Product
Here’s what we’ll be making. Don’t try to do it all at once, we’ll take each section at a
time. This is a responsive website, so there will be multiple changes in layout at
different breakpoints.
Small Screen
Large Screen
Step 1: Header
Let’s start with the header (<header>). Rather than telling you what rules to use, I’m
going to provide you with an image of how the header should look. It’s up to you to
style it, but it doesn’t have to be exact.

1. Use colors Blue: hsl(206,100,14), Yellow: hsl(43,100,90) (Yellow) and White.

2. Set the header in font-family: ‘Suez One’, serif;
3. In order to get the word “Boxes” on its own line, you’ll need to use the
“display: block” property and target the “span” around the word “boxes”.
4. Create a line above the word “boxes” using border-top.
Step 2: Main Content Area
1. Make the main content area (main) stop getting any larger than 900px wide
(use the max-width CSS property).
2. Center this MAIN box in the middle of the page (this will only be apparent
when the viewport is larger than 900px).

Note: The header and footer reside outside of the MAIN box and this therefore won’t
apply to them.

Step 3: Navigation
The navigation (nav) starts as a stacked list, and then turns into a horizontal list.

1. Use background color hsl(32,100,50).

2. Remove the default bulleted style on the unordered list within the <nav> box,
as well as its margin and padding. You can do this either using “nav ul” or by
adding a class to the <ul> element.
3. Set the list items to be centered (see picture).
4. Set the list items to be colored white.
5. Set each list item (li) to have padding around it.
6. Aadd a CSS media query. When the screen gets large enough (you choose
the size), use flexbox on the list to position items side-by-side. You can do
this either by targeting “nav ul” or by adding a class to the <ul> element and
setting it to display: flex.
7. Flexbox also has a property to tell each list item to take up equal space. Hint:
see the section in CSS Tricks called “Justify Content”.
Step 4: Boxes
Now lets style all of the divs to give them equal spacing. There are 9 individual
boxes (marked up as DIVs) in between the footer and navigation.

1. Each of the boxes have already been given identical class name of
class=”box”.
2. Set a style for each .box in your CSS of padding: 2em and margin: .25em.

Step 5: First Row

Now it’s time to style the first row of boxes. This one is simple. We’ll start out with
each box stacked and then, at a breakpoint, change to a 50/50 layout.

Your first row has already been given the class “first-row”.

1. Make each individual box in the first row have a white background. To do this,
you’ll have to use a class in your CSS: .first-row .box {background-color:
white;}.
2. At your favorite breakpoint, change the boxes in the first row to become side-
by-side using display: flex. Remember that display:flex goes on the parent
 box (.first-row) and not on each individual box. Upon applying flex, the boxes
will by default line up side-by-side.

Step 6: Second Row

The next row is a bit more challenging. We’re going to add background images to
each of the boxes, and also style the paragraphs inside to be boxes themselves,
perfectly centered inside.
1. Use this image to declare a background image for both of the boxes in the
second row and use the background-image property:
2. Use the “background-size: cover” property to tell the image to always use the
available background space.
3. Two of the boxes that are inside the second row already have a class name of
“inner-box”. Style the boxes inside the second-row boxes to have a
background-color (hsla(197,82,38,.9) and white text.
4. At your favorite breakpoint, use flexbox to position the two second-row boxes
side-by-side (be sure to target the .second-row class with the display: flex
property). However, instead of making them an even 50%, make the first box
25% and the second one 75%. Hint - the only way to do this is to set a width
on each of the boxes using the preexisting class names .box-left and .box-
right.
5. If you’ve done everything right, you’ll notice that the content in the right box is
not vertically centered at larger screen sizes. You can fix this by adding
display: flex; and align-items: center; to the “.right-box” styles. This will
perfectly center the content vertically.
Step 7: Footer
Nothing special here. Just make the footer background hsl(197,82,38), give it some
padding and margin, and center the text inside.
Submitting the Assignment
Your final product should look something close to mine, understanding that your
fonts and screen widths will vary.

Small Screen Version Large Screen Version

1. Once you’re satisfied, copy the Editor Mode URL from CodePen
2. Log in to Blackboard Learn to submit your assignment. Go to Assignments >
Assignment Name. Under Write Submission, Paste the URL of the Pen
(Editor Mode). Click Submit.
RUBRIC

Use the following rubric to ensure you receive the highest possible grade for the
assignment:

 5 - 6: CSS and accompanying media queries is written appropriately and with

proper indentation. All steps were followed and correct styles are applied to
match screenshots as closely as possible. Styles are added efficiently.
 3 - 4: CSS is mostly structured correctly, but there are some syntax and/or
media query issues (for example, you forgot to close a rule with a semicolon).
Some of the steps were missed. Similar styles are not grouped together.
 0 - 2: CSS does not use appropriate style attributes. Media queries are not set
correctly. Syntax is incorrect and many of the steps were missed. The pen
was not set up or submitted according to instructions.
About This Course
Responsive web design isn’t just a technical solution for web design - it’s an entire
process that brings multiple disciplines together to form one product that works
across multiple devices. The responsive design process includes user experience,
content strategy, information architecture, visual design, development, usability
testing and technical testing. Students who will succeed in this field will need to be
familiar with not just one, but all of these processes, while working in a team-based
environment.

In this course you will learn the fundamental principles for developing standards-
based web sites from a mobile-first and content-first perspective. We will explore
each aspect of an agile-inspired process, during which you’ll learn each step of what
it takes to build a website and ensure its functionality for its users in terms of both
usability and performance.

Topics

Just a few of the topics planned to be covered in the Responsive Web Design
course include:

 Pattern Libraries and Style Guides

 Sketching
 User Research Techniques
 Rapid Prototyping
 HTML/CSS/JavaScript
 Modern Web Design Workflows
 Mobile Content Strategy
 Paired and Team Coding
 Mobile-First Design
 Style Tiles and Web Design Techniques
 Modern Web Layout Tools
 FTP / File Structure
Prerequisites
Sophomore standing. This course has no other prerequisites, however you must be
proficient in basic web and computer applications. You will be expected to write
HTML, CSS and light JavaScript code (familiarity with these will be helpful, but is not
necessary). You will also be working in vector-based editing tools to help prototype
visual designs. Success in this course will depend on your willingness to try learn
new skills and collaborate with others from different backgrounds to solve complex
problems.
Subject to Change Statement
The syllabus and course schedule may be subject to change. Changes will be
communicated via email. It is the responsibility of students to check email messages
and course announcements to stay current in the course.

Course Goals
In this course, students will:

 Apply a modern workflow to a responsive web design, including competitive

research techniques, content development, information architecture, design
and development.
 Gather and architect content for the web, with a focus on prioritizing content
for use on multiple devices.
 Rapidly prototype web design modules, developing style tiles and reusable
patterns for colors, typography, layout and user interface elements.
 Create interactive prototypes and wireframes in HTML/CSS, using standards-
compliant HTML and CSS, media queries and responsive layouts.
 Test prototypes for common performance, usability and web browser issues.
 Use version control to create a staging server on which websites will be
hosted and updated.
 Work in a team environment, collaborating with students from a variety of
disciplines.
 Solve common web design problems both independently and as a group,
through the use of online resources, books, videos and fellow students.
Learning outcomes
Most importantly, by the end of this course, students will be able to:

 Identify and write the most common HTML/CSS properties, with proper
indentation and comments, and understand how to use these properties
efficiently.
 Organize and prioritize website content to fit information architecture best
practices, including a mobile-first methodology.
 Use media queries to create a responsive HTML/CSS/JavaScript prototype
that accommodates multiple screen sizes and device types.
  Speak intelligently about responsive web design and describe why it’s
important to future clients, colleagues or employers.
 Analyze predefined requirements and constraints that a client or employer
may ask of a web designer, and creatively apply these to the solution.
 Critique and speak intelligently about web design in terms of content, colors,
typography, user interface elements and layout.
 Coordinate a web design project and work with other team members to build
deliverables along the way.
 Understand the various roles that are essential to the web design process and
appreciate the skills required for each discipline.
 See themselves as capable and confident when working in code, even if they
are not primarily developers. Be willing to cross organizational lines and take
chances.
 Be motivated to expand their knowledge of web design by following influential
web designers and businesses that are currently implementing responsive
design.
 Understand how the student and their current area of study fits into a web
design role (and their role as a communicator) and expand on their current
background to be able to take on future roles in interactive media.
 Understand how HTML/CSS prototypes integrate into large, dynamic content
management systems and complex organizations.
 Develop test plans and iterate on future design and content systems after
identifying usability or technical issues.
 Identify solutions to complex design/development problems and use online
resources to expand knowledge of HTML/CSS processes.
Course Textbook and Materials
There are 2 required textbooks for the course. One provides detailed examples and
instructions for HTML/CSS, and the other provides more practical knowledge on
web design topics:

 HTML and CSS: Design and Build Websites by Jon Duckett, November
2011, Wiley. (~$19 on Amazon)
 Responsive Web Design by Ethan Marcotte, Second Edition, December
2014, A Book Apart. ($11.00/Ebook or $21.00/Paperback + Shipping)

This course will also make use of video tutorials from Lynda.com (available at no
charge to students taking this course), as well as free online readings and videos.
Class Structure
This class will be held once a week and will have both a lecture/discussion and
studio/lab component. Students will be assigned readings from a variety disciplines,
authors and topics, which will be discussed during the first half of class. All students
will have the opportunity to pair with a student from a different background to work
on hands-on examples in class each week, as well as a long-term project that will
span the semester. Short homework assignments will be given throughout the
semester in order to master key topics.

Preparing for Class

Students are expected to come to class prepared. This means:

 Familiarization with the required readings or videos.

 Readiness to participate in class discussions and activities.
 Participating in class discussions and hands-on activities.
 Completing assignments on time and submitting them properly to GitHub
each week.
Course Schedule
This course will be divided into two parts. Readings, lecture notes and information
on preparing for class will be posted to the class website.

Please see the Detailed Course Schedule for specific dates, times and
assignments.

Part 1: Principles of Responsive Web Design

Students explore the concept of responsive web design, learn why it matters and will
begin implementing simple HTML, CSS and JavaScript in the browser. Students will
read Responsive Web Design by Ethan Marcotte as part of this section and will refer
to the HTML + CSS textbook frequently.

Part 2: Responsive Design in Practice

Students will apply competitive research findings to a content prototype, collecting,

organizing and prioritizing the most important information. Students will begin an
iterative design process using CSS, where they’ll begin by mocking up design
components in digital style tiles and then turning those components into reusable
HTML/CSS pattern libraries. Students will learn the importance of designing a visual
language for their websites using web typography, colors, user interface elements
and layouts. Finally, the content and design will begin to come together in the form
of prototypes. Students will learn how prototypes are tested with usability, technical
and accessibility testing. Part 2 will end with the presentation and class critique of a
website prototype and pattern library.

Assignments
Student learning will be assessed through three types of work: in-class participation,
in-class quizzes, short assignments and a multi-stage small group/individual project.

Graduate Students
Graduate student assignments may include a more challenging component
than undergraduate assignments to support advanced mastery of the subject.
When working in collaboration with an undergraduate student, only the
graduate student is required to complete this component of the assignment.

There are 100 total possible points for the semester.

CSS BASIC LAYOUT

Points
4

Assigned
February 19, 2020

Due
February 26, 2020

This assignment is practice using float/flexbox to create basic CSS grids structures.

This is an individual assignment, and it will be turned in via Blackboard Learn.

Do not copy and paste another student’s code. If I catch you doing so, you’ll
receive a 0 for the assignment.
WHAT TO DO

Build each of these grid structures using widths, min-heights, background colors and
padding/margin as needed. Build them all in one Pen with space in-between and
designated with HTML comments.

Background colors: (Optional use)

 Light Blue: #82d3eb

 Orange: #f68c23
 Army Green: #9ab55f
 Light Grey: #9d9fa2
 Charcoal: #404041
 Dark Blue: #23408f
 Green: #25b784
 Mustard: #dfd373
Structures
You can use this pdf for reference, or the instructions below: CSS-Basic-Layout.pdf

Final Outcome
Your final pen should look something like this: Basic Grids
Getting started

Create a Pen in codepen. Start with a 1200px wrapping container that is centered
using margins. Each of these grid "islands" will sit inside this container with space in-
between.

Grid Structure 1

Recreate the grid structure you see above. Use min-height, background-color
(background colors are open but you can use the list at the top of the assignment)
and floats or flexbox to build this basic structural skeleton.
Grid Structure 2

Make sure to add margin between the first grid structure and this one.

Recreate the grid structure you see above. Use min-height, background-color
(background colors are open) and floats or flexbox to build this basic structural
skeleton.
Grid Structure 3

Make sure to add margin between the previous grid structure and this one.

Recreate the grid structure you see above. Use min-height, background-color
(background colors are open) and floats or flexbox to build this basic structural
skeleton.

Add the sample "content" into the header section. Position with padding or flexbox
controls or floats.
Grid Structure 4

Make sure to add margin between the previous grid structure and this one.

Recreate the grid structure you see above. Use min-height, background-color
(background colors are open) and floats or flexbox to build this basic structural
skeleton.

Submitting the Assignment

Your final product should look close to the example, understanding that background
color and screen widths may vary.

1. Once you’re satisfied, copy the Editor Mode URL from CodePen
2. Log in to Blackboard Learn to submit your assignment. Go to Assignments >
Assignment Name. Under Write Submission, Paste the URL of the Pen
(Editor Mode). Click Submit.
RUBRIC

Use the following rubric to ensure you receive the highest possible grade for the
assignment:

 4: CSS and styles are written appropriately and with proper indentation. All
steps were followed, "content" is include and grids are correct. Code is
organized and utilizes comments.
 2 - 3: CSS/HTML is mostly structured correctly, but there are some syntax
and/or style issue (for example, you forgot to close a rule with a semicolon).
Some of the steps were missed or elements are not included. Code is messy
or comments are missing.

FONTS AND MEDIA QUERIES

Points
4

Assigned
 February 26, 2020

Due
March 04, 2020

We’re returning back to our Welcome Weekend website! We have a good HTML
structure in place as well as our basic CSS Styles, but now it’s time to make sure the
website uses our brand fonts as well as adjusts itself as the screen gets larger.

This is an individual assignment, and it will be turned in via Blackboard Learn.

Do not copy and paste another student’s code. If I catch you doing so, you’ll
receive a 0 for the assignment.

WHAT TO DO

Open your CSS Basics 2 assignment. Instead of editing the original pen, click the
“Fork” option at the top. Click Settings and rename the forked pen using this
structure: “Your Last Name - Layout/Media Queries”.

You’re going to be using fonts and media queries to add on to your website, making
it work well at all screen sizes.

It should resemble the screenshots from these examples (remember that I may have
chosen different fonts than you).

Small Screen Version Large Screen Version

Remember these guidelines:

1. Order your media queries from smallest to largest

2. Organize your CSS by element (for example, header and footer)
3. Your first media query is no media at all. These are your default styles.

NOTE: If the Welcome Weekend logo image is broken, use this new source:
https://rwdkent.com/assets/img/uploads/DKS-15.png
Step 1: Choose New Fonts
You’re going to replace the sans-serif and serif typefaces in the document with a
Google Web Font of your choice.

1. Go to https://www.google.com/fonts and choose one serif and one sans-

serif typeface (whatever you think fits) by clicking the “+” icon.
2. At the bottom of the screen you’ll see “2 Families Selected”. Click on this box.
3. Copy the code beginning with < link href > under Standard.
 4. Paste this code into the HTML of your CodePen (preferably below your
content). This will import the fonts for use on your web page.
5. Finally, replace the font-family values in your CodePen with the values for the
fonts you selected. See the “Specify in CSS” section on Google Fonts for the
correct way to define your fonts in your CodePen CSS. For example if you
chose the Oswald font, instead of “font-family: Helvetica, sans-serif” you
would do “font-family: ‘Oswald’, sans-serif;”.

Step 2: Paragraph Size Adjustments

It’s time to implement your first media query. For this part, we’re going to be making
the paragraph text get larger as the screen gets bigger.

Remember, the first media query is no media query at all. This is your default
(mobile) state. Only add a media query when you need to tweak a style as the
screen gets larger.

1. Set all paragraph font sizes to get slightly larger starting at a minimum width
of 600px.
 2. Set all paragraph font sizes to get even larger at a minimum width of 1000px.
3. Increase all paragraph line-heights at a minimum width of 1000px.

Step 3: Heading Size Adjustments

1. Increase all H2 font sizes at a breakpoint of your choice as the screen gets
larger.
Step 4: Main Content Area Size

1. At a breakpoint width of your choice, change the main area to have more
space inside of it (padding).
2. Change the main area’s maximum width to be fixed at 1200px (this will stop it
from getting any larger).

Step 5: Figure Image + Caption

Now we’re going to set the welcome weekend image to float to the right of the text at
larger screen sizes.
 1. At a starting breakpoint width of your choice, float your “figure” element (which
should contain an image and caption) to the right. You’ll need to look up how
to use the “float” property.
2. Change the width of your figure element to 50% at this same breakpoint.
3. Add space on the top, left and bottom around your figure element at this same
breakpoint.

If you’ve done everything correctly, you should see your image float within the text
starting at your breakpoint.
Step 6: Set the Logo To Get Bigger

1. Once there is enough room, set the Destination Kent State logo ONLY to get
slightly larger (increase the width).
2. Do this by giving the logo a CLASS name in the HTML and using that class in
the CSS. While this could be accomplished in other ways, I want you to
practice using a class here.

Submitting the Assignment

Your final product should look something close to mine, understanding that your
fonts and screen widths will vary.

Small Screen Version Large Screen Version

1. Once you’re satisfied, copy the Editor Mode URL from CodePen
2. Log in to Blackboard Learn to submit your assignment. Go to Assignments >
Assignment Name. Under Write Submission, Paste the URL of the Pen
(Editor Mode). Click Submit.
RUBRIC

Use the following rubric to ensure you receive the highest possible grade for the
assignment:

 4: CSS and accompanying media queries is written appropriately and with

proper indentation. All steps were followed and correct styles are applied.
Styles are added efficiently, for example, multiple H1 styles are grouped
together, as opposed to separate styles for everything.
 2 - 3: CSS is mostly structured correctly, but there are some syntax and/or
media query issues (for example, you forgot to close a rule with a semicolon).
Some of the steps were missed. Similar styles are not grouped together.
 0 - 1: CSS does not use appropriate style attributes. Media queries are not set
correctly. Syntax is incorrect and many of the steps were missed. The pen
was not set up or submitted according to instructions.

CSS BASICS 2
Points
4

Assigned
February 12, 2020

Due
February 19, 2020

You’re happy with the content on your Welcome Weekend website (that you made in
HTML 2). It’s time to add some visual styles to the website using CSS.

CodePen makes adding CSS easy because it automatically links your stylesheet to
your HTML. When we begin coding outside of CodePen, you will have to set your
CSS using a tag.

View Sample Mockup

This is an individual assignment, and it will be turned in via Blackboard Learn.

Do not copy and paste another student’s code. If I catch you doing so, you’ll
receive a 0 for the assignment.

WHAT TO DO

Open your HTML Basics 2 assignment. Instead of editing the original pen, click the
“Fork” option at the top. Click Settings and rename the forked pen using this
structure: “Your Last Name - CSS Basics 2”.

Notice how we’ve broken the page up into parts. This is good practice and will help
you organize your HTML and CSS better.

Step 1: Add HTML5 Layout Boxes Around Sections

First, we need to add some HTML5 elements to surround our main sections of
content and create boxes in the HTML: the header, main content area and footer.

1. Surround both the header logo and H1 with a < header > tag.
2. Surround the main content with a < main > tag (starting with figure and ending
with the embedded video).
3. Surround the footer with a < footer > tag, starting with Student Success
Programs and ending with the contact information.

Step 2: Overall Styles (styles that affect everything)

1. Make everything on the page a sans-serif typeface of your choosing.
2. Add a blue background color to the entire page background (Apply this to the
body tag). Our brand color of blue is rgb(0,38,100).
Step 3: Headings (Typically H2)

1. Make the H2’s (your subheading styles) the same color blue as the
background.
2. Adjust the margins of your H2’s (your subheading styles) so that there is more
space above the heading than below the heading.

Step 4: Header (Welcome Weekend)

1. Make your H1 (Welcome Weekend) closely match the screenshot. You’ll have
to use font-size, color, letter-spacing, font-family (try Garamond or Georgia)
and a text-shadow.
2. Align everything in the header to be centered (hint - use text-align).
3. Change all of the text in the header to be colored white.
4. Make the size of the Destination Kent State logo smaller. We only want to
affect that image and not the other images on the page. We can specifically
 target an image within the Header using the “header img” selector in our CSS,
without affecting other images on the page.
5. Give the DKS logo image space on top. This helps separate it from the top of
the page.
Step 5: Main Content Area

1. Make the main content area only have a 95% transparent white background
color.
2. Adjust the spacing inside of the main content area so that there is some
whitespace. This might be accomplished with padding.
 3. Set the main content area to a 90% width. This will give some space around
it.
4. Center the main content area in the middle of the page (hint: use margin: 0
auto).
5. Tell the main content area to get no wider than 900px (hint use max-width)
6. Set a slight drop shadow on the main content area

Step 6: Paragraphs

1. Increase the line spacing (leading) on all paragraphs

Step 7: Images and iframes

1. Set all of the images and iframes on the page to be a maximum width of
100% (use max-width) so that they never overflow their container. This will
only be apparent when you resize the window smaller.
Step 8: Blockquote

1. Set all blockquote to closely match the screenshot. You will have to adjust the
blockquote’s width and center the quote using margin: 0 auto.
2. If your cite tag does not appear inside of the blockquote tag, you have to set
cite to display:block in order for it to have a margin and appear on its own line.
Step 9: Figure

1. Set the figure (which should contain both the image and caption) to take up
70% of the page as well and center it in the middle of the page.
2. Add padding to the top and bottom of the figure to space it out away from
surrounding elements.
3. Give the photo of welcome weekend (which is the image inside of a figure
tag) a 5px white border.
4. Give the photo of welcome weekend a box shadow.
5. Give the figure’s caption margin to space things out away from the image.
6. Make the caption font italic, aligned to the center and a smaller size.
Step 10: Table

1. Make the table have a smaller font size.

2. Give all table cells (TD) padding to space them out.
3. Make the table’s header (TH) stand out. Make the TH elements have a
background color of rgb(0,157,216), the text color white, padding to space
them out and align the text to the left.
Step 11: Footer

1. Now, make the heading in the footer (Student Success Programs) appear in
gold: #eaab00. You’ll need to do this by only targeting headings that appear in
the footer using “footer h2” in the CSS.
2. Style the DT elements to appear in gold as well, make them uppercase with a
smaller font size and bold.
3. Make the DD Elements have a left margin of 0, a smaller font size and an
increased line height.
4. You’ll notice that the email address is unreadable because links by default are
blue. To fix this, make all links (a tags) in the footer (using footer a) appear in
white.
5. Give the footer padding on the bottom so that there’s some breathing room at
the end of the window.
6. Set all of the text in the footer to be centered.

Step 12: Box Sizing

Finally, you’ll notice that some of the elements still continue to overflow on small
screens. That’s because of the extra padding and borders we’ve added cause their
widths to become greater than 100%.
 1. To fix this, add this global style to make all boxes take their borders into
account when calculating their size. Use * { box-sizing: border-box; }

Submitting the Assignment

Does everything render correctly? Your final product should look something close to
the sample mockup.

View Sample Mockup

1. Once you’re satisfied, copy the Editor Mode URL from CodePen
2. Log in to Blackboard Learn to submit your assignment. Go to Assignments >
Assignment Name. Under Write Submission, Paste the URL of the Pen
(Editor Mode). Click Submit.
RUBRIC

Use the following rubric to ensure you receive the highest possible grade for the
assignment:

 3-4: CSS is written appropriately and with proper indentation. All steps were
followed and correct styles are applied. Styles are added efficiently, for
example, multiple H1 styles are grouped together, as opposed to separate
styles for everything.
 2: CSS is mostly structured correctly, but there are some syntax issues (for
example, you forgot to close a rule with a semicolon. Some of the steps were
missed. Similar styles are not grouped together.
 0 - 1: CSS does not use appropriate style attributes. Syntax is incorrect and
many of the steps were missed. The pen was not set up or submitted
according to instructions.

HTML BASICS 2
Points
4

Assigned
January 29, 2020
Due
February 05, 2020

You’ve been tasked with creating a landing page for Kent State’s Destination Kent
State program. Using the content and instructions below, create this webpage on
CodePen using semantic markup. Do not worry about presentation for this
assignment.

This is an individual assignment, and it will be turned in via Blackboard Learn.

Do not copy and paste another student’s code. If I catch you doing so, you’ll
receive a 0 for the assignment.

WHAT TO DO

1. Create a new public pen and name it using this structure: “Your Last Name -
HTML Basics 2”.
2. Take the plain text content (provided below) and structure it into HTML in your
pen. Pay attention to the client notes - they’re important.

Submitting the Assignment

1. Remember that CodePen automatically inserts all of the required code for the
HEAD of the document.
2. Copy the public CodePen URL.
3. Log in to Blackboard Learn to submit your assignment. Go to Assignments >
Assignment Name. Under Write Submission, Paste the URL of the Pen
(Editor Mode). Click Submit.

Your assignment should look something like this.

THE CONTENT

Client Note - Add the Welcome Weekend logo at the top

https://rwdkent.com/assets/img/uploads/DKS-15.png

Welcome Weekend
Client Note: Add this image between the text and the header. Don’t forget alt
text for the image. Add a caption below it that says: “Students Attend Back to
School Blastoff on the Student Green.” When creating an image with a
caption, use the figure and figcaption tags.

Image URL: https://s3-us-west-

2.amazonaws.com/s.cdpn.io/259273/DKSPage_WWImage.jpg

What Is Welcome Weekend?

Welcome Weekend 2015 is a weekend packed full of fun activities and events
starting Thursday, August 27th through Sunday, August 30th. Students will move
into their residence halls and attend their first hall meeting. Throughout the
weekend, students will have the opportunity to meet fellow classmates in their FYE
class, and get to know their way around Kent’s campus. This year’s events include a
comedian, Convocation, FYE Common Reading, Discover Downtown Kent, and
Blastoff! Other events include: bingo, movies, broomball, ice skating, and karaoke.

Client Note: Quotations should be marked up in proper blockquote (the quote

text) and cite tags (the author’s name).

“Welcome Weekend is a great time to meet new friends and get acclimated with
Kent State’s magnificent campus.” - President Warren

Welcome Weekend Schedule

Client Note: Set this up in a 3 column table please. The markup for the header
row of the table is slightly different than everything else.

Table Headings: Time, Event, Location

8:00 A.M. - 7:00 P.M.

Event: RESIDENCE HALL MOVE IN. Follow your assigned move-in times from
Residence Services mailing.

Location: YOUR RESIDENCE HALL

9:00 A.M. - 10:00 A.M.

Event: Air Force ROTC New Cadet Orientation Program (NCOP) and Parent
reception. New Air Force ROTC cadets and their families are encouraged to attend
an exposition presenting scholarship opportunities, AFROTC requirements, cadet
life and possible future careers in the United States Air Force.
Location: TERRACE HALL

10:00 A.M. - 8:00 P.M.

Event: WELCOME WEEKEND CHECK-IN. Pick up your Welcome Weekend

schedule and work with Welcome Weekend staff to learn about all events for
Welcome Weekend 2015.

Location: KENT STUDENT CENTER BALLROOM

6:00 - 7:30 P.M.

Event: PARENTS & FAMILIES EVENING RECEPTION WITH THE ALUMNI

ASSOCIATION. Relax and network with other KSU parents at this informal
reception. Brief program at 6:30. Complimentary refreshments, soft drinks and cash
bar. (Beer and wine only)

Location: KENT MARKET II or KENT STUDENT CENTER

7:30 - 8:30 P.M.

Event: HILLEL’S KOSHER ICE CREAM SOCIAL. Unpacked and not sure what to do
next? Hillel at Kent State invites students to our house for delicious kosher ice
cream creations! Come mix-in toppings and mix with new friends at this laid back
social event that includes summer’s perfect dessert.

Location: COHN JEWISH STUDENT CENTER, 613 EAST SUMMIT STREET

9:00 - 10:00 P.M.

Event: RESIDENCE HALL MEETINGS. Residence Hall staff members will cover
important hall and safety information and introduce you to resources available to
assist you in enjoying a safe and fun living environment.

Location: VARIOUS LOCATIONS

9:00 - 11:00 P.M.

Event: KARAOKE. Show off your vocal skills or just cheer on your friends while
music from Taylor Swift, Rihanna, and Maroon 5 play! Sponsored by Kent Student
Center Programming.

Location: RATHSKELLER, KENT STUDENT CENTER

10:00 - 11:30 P.M.

Event: KENT STATE SHUFFLE. So you think you can dance? Show off your moves
or just stop by to meet other KSU students.

Location: STUDENT GREEN

Client Note: Before the YouTube video, add an HTML comment that has the
link to the YouTube video so that you can find it later if you need to. Use
proper HTML comment syntax. Remember that HTML comments are only
there for you, the developer, and do not display to the end-user.

Welcome Weekend Video

Client Note: YouTube videos should be embedded using the embed code
provided by YouTube (under Share > Embed - which will give you an iframe).

Embed this video so that it plays directly on the page

https://www.youtube.com/watch?v=tQmdT99jiYY

Student Success Programs

Use definition lists to mark up this content. Definition lists connect the labels
(for example, Phone) to the corresponding content (for example, Phone
Number).

Address: Center for Undergraduate Excellence - Suite 135; 975 Lefton Esplanade
Kent, OH 44242 Phone:330-672-9292 Email:[email protected] make this a
clickable email address

RUBRIC

Use the following rubric to ensure you receive the highest possible grade for the
assignment:

 3 - 4: HTML is structured appropriately and with proper indentation. Headings

show hierarchy, links are functional, paragraphs are tagged appropriately,
image and tables are marked up properly. The client’s notes were followed
along with the 11 steps and the appropriate links were posted to Learn.
 2: The HTML is mostly structured correctly, but there are some syntax errors
(tags are not closed or inappropriate tags are used). Images are not
appropriate size. Some of the client’s notes were missed.
 0 - 1: HTML does not use appropriate tags for the types of content. Few tags
are formatted appropriately, client notes were missed and the pen was not set
up or submitted according to instructions.
HTML BASICS 1
Points
4

Assigned
January 22, 2020

Due
January 29, 2020

You’ve received content for a conference website and would like to begin structuring
it in HTML. Using the markup skills you’ve learned so far (text, lists and links),
structure the plain text content into a webpage using CodePen. Don’t worry about
presentation for this assignment.

This is an individual assignment, and it will be turned in via Blackboard Learn.

Your completed assignment should look something like this.

Do not copy and paste another student’s code. If I catch you doing so, you’ll
receive a 0 for the assignment.

WHAT TO DO

1. Set up a CodePen account (in class).

2. Create a new public pen and name it using this structure: “Your Last Name -
HTML Basics 1”.
3. Take the plain text content (provided below) and structure it into HTML in your
pen. You must use semantic headings to indicate hierarchy. Links must be
functional. Lists should be formatted as unordered or ordered lists. Pay
attention to the client notes - they’re important.
4. CodePen automatically inserts all of the required code for the HEAD of the
document (the HTML, BODY and TITLE tags). Add in the Viewport meta tag
 to make the site behave responsively on mobile devices. (Settings > HTML >
Insert the most common viewport meta tag)
5. After you’ve completed your testing, log in to Blackboard Learn to submit your
assignment. Go to Assignments > Assignment Name. Under Write
Submission, Paste the URL of the Pen (Editor Mode). Click Submit.

THE CONTENT

Enduring Trauma?

Poynter KSU Media Ethics Workshop 2015

About the Conference

Covering trauma – a tragic accident, a horrendous attack, a sickening court case, a

catastrophic weather event – exposes journalists and victims to complicated
questions about ethics and responsibility. This year’s Poynter KSU Media Ethics
Workshop will delve into significant topics including privacy, re-victimization and the
trauma that journalists themselves often deny. Best practices for PR and other
media professionals also will be covered.

The Poynter KSU Media Ethics Workshop is a one-day training program for
professionals, educators and students that examines critical issues and perspectives
in media ethics. Moderated by distinguished ethics faculty from The Poynter
Institute, the Media Ethics Workshop provides a unique forum for professionals and
students alike to confront and discuss significant issues crucial to understanding
media ethics and its effect on our world. Previous Workshops have addressed online
ethics, sports media ethics, political media ethics, entertainment media ethics and
the ethics of data mining. Established in 2004, the Poynter KSU Media Ethics
Workshop continues its mission to strengthen media credibility and bolster citizens’
faith in media integrity.

Agenda

(Client Note: Can we maybe emphasize the times with bold or italics and
format this into bullets to make it more readable?)

8:30 - 9:00 Registration and Continental Breakfast

9:00 — 9:15 Welcome and Introductions

9:15 — 9:45 Introductory Session - Why this is important?

9:45 — 10:45 Telling Johanna’s Story

10:55 — 12:00 Breakout Sessions

12:00 — 1:15 Lunch: Keynote Dr. Frank Ochberg - “Coping with Cruelty”

1:15 — 1:30 Announcements

1:30 — 3:00 “Extreme Crisis Communications: Best Practices”

How to Register

(Client note - this is hard to read. Can we number these in steps? Also, make
the words registration website one of those interactive things that takes you
to a website when clicked.)

(1) Visit the Registration website https://mediaethics.jmc.kent.edu/#register (2)

Select Student or Media Professional/Educator based on your role. (3) Complete the
registration form and payment process. (4) You’ll receive a ticket via email. Bring
this with you to the conference.

Contact Us

(Client Note: put these in bullets. It would be really cool if an email would open
up when you click on our email addresses)

Jan Leach: [email protected], Jennifer Kramer: [email protected], Melinda

Stephan: [email protected]

RUBRIC

Use the following rubric to ensure you receive the highest possible grade for the
assignment:

 3-4: HTML is structured appropriately. Headings show hierarchy, links are

functional, paragraphs are tagged appropriately and lists are marked up
correctly. The client’s notes were followed and the appropriate links were
posted to Learn.
 2: The HTML is mostly structured correctly, but there are some syntax errors
(tags are not closed or inappropriate tags are used). Some of the client’s
notes were missed.
 0 - 1: HTML does not use appropriate tags for the types of content. Few tags
are formatted appropriately, client notes were missed and the pen was not set
up or submitted according to instructions.
FINAL REVIEW SESSION
Points
5

Assigned
April 01, 2020

Due
April 27, 2020

We're almost done! Now that you've developed template prototypes and a pattern
library, it's time to do a final review with your "client" and the class. There won't be
any slides or reports to turn in - you'll only be showing your completed project.

The review sessions will take place in class on finals week.

PROJECT HUB REVIEW

Here's what you'll review with the class/client during your review session. Each
review should take 5-10 minutes.

1. Bring up your Website from your live link. You will walk through your site and
identify the goals of the site and how you made decisions on the
design/functionality.
2. Show the page templates and discuss each of them. Demonstrate how the
design changes at different breakpoints. Discuss any decisions you had to
make.
3. Discuss any next steps. What would you have done with more time? What still
remains to be decided?
4. Ask for feedback and questions from the class/"client". I may ask some
questions during your review, just like a client might do.
HOW TO TURN IN THE ASSIGNMENT

There is nothing to submit for this assignment, but in order to get the points you
must:

1. Participate in the review class period.

2. Be present and participate in your project review during class.

Although there is nothing to submit, you may find it helpful to prepare some bullet
points/notes to help you and your partner stay on track during your discussion.

RUBRIC

Use the following rubric to ensure you receive the highest possible grade for the
assignment:

 5: You and your partner showed all of the required components. You were
able to intelligently answer questions and showed critical thinking in your
design decisions. Your decisions matched your initial goals. You discussed
what your next steps would be, were you to complete the website. Both
partners participated in the discussion and you also participated in the review
of other group projects.
 3-4: You and your partner presented, but some of the required items were
missing. You were unsure or unable to back up some of your design
decisions, and weren't as convincing as you could have been. One partner
may have dominated the discussion.
 0-2: Your review lacked coherence and it is clear that you didn't put a lot of
thought into your decisions or prepare for the discussion. Next steps weren't
discussed, and the client is left with a lot of questions. You may not have
participated at all in the class review by asking questions or giving feedback.

SEMESTER PROJECT (OVERVIEW)

Points
40

Assigned
 March 04, 2020

Due
May 06, 2020

THE SETUP

 You’re an employee at a small web design shop and have just gotten one of
your first clients - a small website project for their business.
 Your boss has assigned you (and maybe a coworker) to the project. You are
both equally responsible for development, design and content strategy.
 The client is launching their business in a few months, so they need most of
the design/development done and approved before then.
 They plan to put the site into a content management system - but they need a
working style guide and prototype in order to effectively implement it.
 They have an onsite employee who will be maintaining and improving the
website after the project is finished.

Note: In this scenario, I will play the client and the business, while based on some
actual businesses, will be fictional

PROJECT GOALS

Why this type of project? This allows you, the student, to apply what you’re learning
in class to a real-world scenario. By thinking critically and using these principles,
you’re developing long-lasting development and design skills that can be used to
land you a job or complement your existing areas of expertise.

PROJECT GROUPS

You can work in pairs or alone on this project. Each group or student will work on a
slightly different (but largely equivalent) web project. We have a number of "stock"
companies that you can select from that have existing assets you can use (some
branding, content, background info, etc.) You may also choose another small or
local business of your own, but you will be responsible for assembling content and
assets to use for the project. Both approaches are valid.

The "stock" clients are as follows:

 AROMA Coffee & Tea : AROMA Coffee & Tea, a family-owned coffee
company that specializes in locally-sourced coffee. They have two locations in
Columbus, OH.
 Hops House Microbrewery : It’s all about the hops man! At Hops House, we
craft the tastiest of brews every week that will keep you coming back for
more. Our brews can only be found at Hops House, and our modern, chill
environment is perfect for after-work drinks or a night out on the town.
 Off the Vine : Off the Vine: A local winery in Geneva, Ohio that operates a
small walk-in wine-bar.
 Pets First! Veterinary Clinic : At Pets First! Veterinary Clinic, Akron, Ohio’s
premier veterinary care provider, we know your pet is a valuable member of
your family. That’s why we treat your pets as one of our own, with affordance
vaccinations and wellness care that will keep your furry companion happy and
healthy.
 Wrench Automotive : Wrench Automotive, an automotive repair shop known
for their personalized and high-quality service.
 The Ohio Chop Shop Hair Salon : The Chop Shop is a high-end, unique
hair salon in Akron, Ohio. Our stylists bring their clients the freshest styles,
and our location is a high-end, but friendly and fun atmosphere that keeps
clients coming back again and again. Visit The Ohio Chop Shop today for all
of your hair, skin and nail needs!
 Buckeye Bed and Breakfast : Buckeye Bed & Breakfast: A bed & breakfast
in Ohio whose clientele includes newlyweds and couples looking to get away
from the hustle and bustle of daily life.
 Summit Street Family Restaurant : Summit Street Family Restaurant, an
american-style restaurant in Kent, OH known for their family-friendly
atmosphere and reasonable prices.
 William Thomas & Associates : William Thomas & Associates: A small, but
growing, accounting firm that has prided itself in serving its local clientele
across many generations.
 Barb’s Bridal Boutique : Barb’s Bridal Boutique, a small boutique in Ohio
that specializes in bridal wear.
 Creative Kidz Kinder Care : We’re a child care center in Kent, Ohio
specializing in creative learning experiences for your child, fostering
educational exploration and relationship building opportunities that will last a
lifetime
 Franklin County Family & Community Services : Franklin County Family &
Community Services is a not-for-profit agency staffed by professional staff
 members and volunteers who empower individuals and families in the areas
of support, advocacy, training and counseling.

(Companies are claimed by a first come, first served basis. Each group will need to
select a different company to work with.)

PROJECT SCHEDULE

You and your boss have worked together to develop a brief project schedule.

1: Research
 Meet with the client and determine project goals, design aesthetic, etc.
 Communicate why investing in a responsive website makes sense for their
business.
 Understand the types of content needed
 Communicate the project schedule
 Get a list of competitors in preparation for doing a brief competitive analysis.
 Put together a project index that will house all future project deliverables so
that they’re easy to access by the client.
View Research Project

2: Content, Architecture and Sketching

 Collect any existing content that the client has provided
 Reformat and rewrite that content using a mobile-first methodology
 Put together a sitemap
 Based on your content, you’ll develop a few, mobile-first sketches to show the
client
 The sketches will show some of the main templates that you’ll be developing.
You may choose to show them at different breakpoints.
 Using the sketches, you’ll identify the repeatable patterns present in your
design
View Content Project
3: Style Tiles, Prototype and Concepts
 Using the goals you discovered in your client meeting, you’ll develop 2 sets of
style tiles that show the colors, design aesthetic and personality of the
website.
 You’ll show these to the “client” in class, and the class will ask questions.
 From the style tile feedback, you’ll develop a few visual mockups representing
different screen sizes.
View Style Project
4: Basic Wireframes and HTML/CSS Final
Patterns/Prototype/Templates
This piece includes Basic Wireframes, Patterns 1 and 2 and Final Templates/Pattern
Library. You’ll submit project updates each week, but won’t actually submit this part
until the end.

 You’ll begin putting together the content you gathered into an HTML template
structure
 You’ll prioritize the most important content up top
 The content wireframes will demonstrate to the client how the site will respond
at different breakpoints.
 Using your content templates, you’ll begin to add CSS styling to your code,
creating working prototypes of representative templates in your website.
 You’ll determine how each repeatable element looks and functions together
 Based on your final prototypes, you’ll develop a pattern library that
demonstrates the typography, colors and primary atomic elements used in the
design
View Template Project
5: Project Hub, Review Session & Critiques
 You’ll present a hands-on walkthrough of the final prototype and style guide
 You’ll show a retrospective of what you did to get to this point via the Project
Hub
ASSIGNMENT POINTS

Final Review Session 5

ASSIGNMENT POINTS

HTML/CSS Templates/Patterns 15

Style Tiles and Mockups 5

Content and Sketching 5

Research and Competitive Analysis 5

Semester Project (Overview) 40

Assignment Points

Final Review Session 5

HTML/CSS Templates/Patterns 15

Style Tiles and Mockups 5

Content and Sketching 5

ASSIGNMENT POINTS

Research and Competitive Analysis 5

Semester Project (Overview) 40

 This class uses team-based learning for part or all of the semester. Students
must agree to follow the Group Rules & Expectations throughout the course
of the project.
Late Submissions
Projects and late assignments can only be made up with a documented excuse (as
described in the attendance policies above) for a University approved absence
about which I am made aware before class. This policy is nonnegotiable. If I do not
know in advance that you will not be in class, I automatically will assign you a “0” for
the exam, quiz, or assignment.

1. Create a simple page introducing yourself, how old you are, what you do, what you like
and dislike. Modify the introduction to include a bullet list of what you do and put list the 5
things you like most and dislike as numbered lists. Create another page about your
favourite hobby, and link it to (and from) your main page. Center something, and put a
quote on one of your pages.

2. Put an existing image on a web page. Create a table, use a heading and at least one use
of row span/col span. Colour a page and some text within the page. Link to another site.

3. Create a new file called index.html.

Put the normal HTML document structure tags in the file. Give it a title.
At the bottom of the page (i.e. the last thing between the body tags) put the following:
A horizontal rule.
A link to your email address (with your name between the tag); remember to put the link to
your email address within address tags.
A line break.
The date. (I have this same structure at the bottom of this page).
Above this block (which is called the footer), put a title in heading tags.
Add some text describing yourself (you can split this into multiple headings and paragraphs
if you wish.

4. Write a script to create an array of 10 elements and display its contents.

5. Write a function in Javascript that takes a string and looks at it character by character.

6. Create a simple calculator using form fields. Have two fields for number entry & one field
for the result. Allow the user to be able to use plus, minus, multiply & divide.

7. Create a document and add a link to it. When the user moves the mouse over the link, it
should load the linked document on it s own. (User is not required to click on the link).

8. Create a document, which opens a new window without a toolbar, address bar, or a
status bar that unloads itself after one minute.

9. Create a document that accepts the user's name in a text field form and displays the
same the next time when the user visits the site informing him that he has accessed the site
for the second time, and so on.

10. Create a Web form for an online library. This form must be able to accept the
Membership Id of the person borrowing a book, the name and ID of the book, and the name
of the book's author. On submitting the form, the user (the person borrowing the book)
must be thanked and informed of the date when the book is to be returned. You can
enhance the look of the page by using various ASP.NET controls.

11. Display an advertisement at the bottom of the Web form that you created in question
10.

12. Create an array containing the titles of five new movies. Use this array as a data source
for a drop down list control. The page must be capable of displaying the selected movie title
to the user when the user clicks on the submit button.

13. Create a virtual directory in IIS. Create a global.asax file and include the
"Session_Start" and "Session_End" and, "Application_BeginRequest" and
"Application_EndRequest" events. Write a simple ASP.NET page and execute it in the
browser. What is the output that you get?