Web Development Workshop

bit.ly/WEB14104

This unit introduces you to the concepts, methods and tools used to produce Web sites that are technically sound, aesthetically cohesive and appropriately structured.

This includes:

• technical overview of the WWW
• structuring content with MarkDown and HTML
• organising projects with Git
• styling pages with CSS
• making pages dynamic with PHP
• using WordPress to manage online content
• developing WordPress templates and themes
• buying a domain
• hosting a website
• transferring files with FTP
• project management basics: listing and prioritising tasks, tracking and evaluating progress, getting things done

Using individual practical projects, you will research, conceptualise and prototype a Web site re-design.

Brief

Pick one bad website and re-design it.

Your re-designed version must

• be online (not just on your computer)
• be dynamic (update-able via a CMS)
• be responsive (adapting to different screen sizes)
• be accessible (for people with disabilities and limited devices)
• be visually cohesive and coherent
• have appropriately structured information
• have a style informed by (but not necessarily following) contemporary trends

Plan

Session	Date	In class	Assignment
1	Mon Jan 5th	Unit intro How does the WWW work?	Draw the Web! Learning goals
2	Mon Jan 12th	MarkDown and Git	Present the bad website you will re-design
3	Mon Jan 19th	HTML: structuring Web content Project management	Action plan
4	Mon Jan 26th	CSS 1/3 (easy)	Moodboard
5	Mon Feb 2nd	CSS 2/3 (intermediate)	Wireframes
6	Mon Feb 16th	CSS 3/3 (responsive)
7	Mon Feb 23rd	FTP: putting stuff on servers
8	Mon Mar 2nd	Inspecting and debugging websites
9	Mon Mar 9th	Formative Assessment	Action plan (revised)
10	Thu Apr 16th	POP (principles of programming)
11	Thu Apr 23rd	PHP: programming on the server
12	Thu Apr 30th	WordPress 1/4
13	Thu May 7th	WordPress 2/4
14	Thu May 14th	WordPress 3/4 (templates)
15	Thu May 21st	WordPress 4/4 (themes)
16	Thu May 28th	How to buy a domain and host a website
17	Thu Jun 4th	Tutorials	Learning outcomes
18	Thu Jun 11th	Summative presentation and hand-in	Unit feedback form

Assessment criteria

Your final mark will be based on:

• 75% project
• 25% blog

Project

Components

1. Mood board

• Wireframes
• Static HTML & CSS prototype
• Interactive prototype (WordPress)

Grades

F

M.I.A. The student failed to deliver the assignment.

E

• TODO

D

• TODO

C

• TODO

B

• TODO

A

• TODO

Blog

Your blog should have at least 12 posts.

Topics from each week:

1. Draw the Web!

• What are your learning goals for this unit?
• More to come

Refer to the general Web Media blog assessment criteria for a detailed grading breakdown.

Learning goals

Upon completion of this unit you will (hopefully) be able to:

• Understand conceptually how the WWW works (browsers, servers, HTTP, DNS, IP etc).

• Use HTML and MarkDown to structure Web content appropriately and accessibly.

• Use CSS to style Web pages cohesively and coherently, being informed by contemporary trends.

• Upload your project files to a Web server using FTP.

• Be familiar with the process of buying a domain name and a hosting service.

• Make Web pages dynamic using PHP.

• Manage online content using WordPress.

• Modify and maintain WordPress templates and themes.

• Document your design and development process, from the exploration of ideas to their practical implementation. Including successes and failures.

• Communicate your ideas both technically and in an engaging way.

• Back-up your project files using the Git version-control system (through GitHub).