Frameworks and Architectures for the Web spring 2020
This class is for MA students with no prior experience with programming, welcoming creative practitioners, people from the humanities and any other kind of academic disciplies with the aim of capturing their interest in the world of web development.
Learning objective: In this class, students will learn about designing and building a web application. We will cover the basics of designing for the web: responsive design, accesability, web perfomance. Students are expected to engage in a critical discussion about the topic.
Learning outcome: Students will become knowledgeable about various ways of designing prototyping and implementing their ideas by building their own web application.
| Week | Lesson | Deliverable |
|---|---|---|
| 5 | Introduction, HTML syntax, structure and Semantics | Web Project - Design, Wireframes and Interactive Prototype |
| 6 | Interface, Principles, Design Patterns and Aesthetics | Web Project - Design, Wireframes and Interactive Prototype |
| 7 | HTML and CSS Preliminaries, Forms and Data Validation | Web Project - Design, Wireframes and Interactive Prototype |
| 8 | CSS Layout and Positioning, Responsive Design | Web Project - Design, Wireframes and Interactive Prototype |
| 9 | Introduction to JavaScript | Web Project - Implementation |
| 10 | Document Object Model and Events in JavaScript | Web Project - Implementation |
| 11 | Web Accesibility | Web Project - Implementation |
| 12 | APIs, JSON, Advanced JavaScript | Web Project - Implementation |
| 13 | React Part I | Creative Implementation of a Web App |
| 14 | React Part II | Creative Implementation of a Web App |
| 15 | No Class Easter Break | |
| 16 | React III | Creative Implementation of a Web App |
| 17 | Web APIs | Creative Implementation of a Web App |
| 18 | Web Performance | Creative Implementation of a Web App |
| 19 | TBA |
Throughout the semester, students are asked to produce three major deliverables that will form the basis of their oral examination. The deliverables are:
- Web Project - Design, Wireframes and Interactive Prototype
- Web Project - Implementation
- Creative Implementation of a Web App
The Web project requires the student to design and implement a working website using WordPress. Participants can either create their own portfolio website or re-design an existing site. The site needs to be responsive for both desktop and mobile devices. For the first part of the Web project, students will use design, layout and prototyping tools to define the information architecture of their site, produce visual designs of each page and produce an interactive prototype using Web-based prototyping tools. The final deliverable for this item of project work is a clickable interactive prototype of the website which covers both desktop and mobile designs. The prototype will consist of screen mockups and visual designs — no code will be written for this project deliverable.
For the second part of the Web project, students will implement designs as a working, fully functional, WordPress-driven site. It is required to use HTML and CSS to layout the site, and implement these layouts as a custom WordPress theme so that the site’s content can be deployed and updated. The layouts also need to be responsive so that they are optimised for viewing on both mobile and desktop devices.
In this deliverable, students are given the opportunity to develop a Web application. The application can be anything you want it to be, and creative, interesting and innovative submissions are encouraged as long as it fulfils the following technical requirements: that it is built primarily using HTML, CSS and JavaScript; and that it either uses an API to retrieve and process data and/or is built using React. As part of this deliverable, students are also required to submit a 500 word report.
Nynne Just Christoffersen is a Copenhagen based software developer with a background in art and design history. She currently works as a fullstack developer, specializing in web perfromance. Over the last couple of years, she has been an active member in sevaral communities in Copenhagen, particularly those that aim at mentoring and encouraging newcomers to the field. She is a director of the board at Hack Your Future, is the founding organiser of Rails Girls Copenhagen, organise Google's Women Techmakers program in Copenhagen and is a regular contributor to the tech collective Cybernauterne. She also host discussions on tech and society in CPH Tech Books & Film.
This course is a revised adaptation from the curicculum that was previously used for this classs by Tim Wray. It takes inspiration from courses the instructor has helped teach and develop at Hack Your Future Copenhagen, which has been made in close collaboration with Hack Your Future Amsterdam. A large section of the links section has been adapted from Andreas Mehlsen's comprehensive and well-updated web skills guide. This course has also benefitted from inspiration from Rune Madsen's course Programming Design Systems and wouldn't have been possible without support from members of the Copenhagen web developer community. Many thanks!