week1.md

Workshop

• Introduction

  The aim of the workshop is to give students experience and understanding in using Github to build static web pages, as well as using CSS and .js files as separate resources for a static form.

  Students will gain some experience using CSS to alter the appearance of elements on the page. In addition, they will replicate jQuery functions with vanilla javascript which will help them to understand how both javascript and jQuery manipulate DOM elements.

• Today you will...

• Use github as a team

• Go through the basic app design process as a team

• Build a web form using .html, .css and .js files

• Objectives

• Create a team repo on Github

• Separating CSS and javascript from an html file

• Use CSS to alter the appearance of DOM elements

• Use javascript to log form data to the console

• Use javascript to add form data to the DOM

• Road Map

• Introduction

• Before lunch: Quick exercise to get groups started on Github

• After lunch: Design and build your first app

• Prerequisites

• FAC prerequisites

• Resources

• HTML Blocks

• HTML Forms

• HTML DOM Div Object

• Google: Principles of Mobile design

• Github: Natalia's Github basics

• Github: Writing good commit messages

• Github: resolving merge conflicts

• JSLint: The ultimate in Linting

• JSFiddle: Mess around with code and HTML

• Further Reading

• HTML Form events

• Alternatives to FOR loops in javascript

• Javascript design patterns

Plan

• Introduction (5 minutes) (1200)

  Outline for the day, presenting road-map, introducing first task.

  The workshop is designed to achieve 3 things:

  • Start groups off with an easy task to get them working using Github from Day 1
  • Introduce groups to good Github organisation and team-working practices
  • Introduce groups to manipulating the DOM

• Exercise 1 (45 minutes)

  Students will separate out hard-coded CSS and JS from a static page. Groups will split into pairs with one pair tackling the html and CSS, and the other the javascript. Each pair will submit a pull request to the repo and the other pair will approve the merge. We do not want to introduce merge conflicts at this stage, so teams should ensure they are not working on the same piece of code at the same time.

  Task list:

  • Set up Github for your group (giving everyone the right permissions)
  • Split into pairs for HTML/CSS and JS
  • Initialise a repo for the workshop
  • Fork the repo and clone onto your local machines
  • Separate out CSS and javascript from document

• Review (10 minutes)

  Each group will share a challenge they faced and their solution with the group.

  Instructor will ask groups for brief examples of good/bad practice, and offer up tips.

• Lunch (1 hour)

• Workshop (1400)

  • The first part of today's activity will be a design session, so that groups get some experience of creating collaborative designs. The second part will be dedicated to doing coding that arises from the design session.
  • Some of this might seem quite basic, but the emphasis here is getting experience designing web pages collaboratively, and coding as a team of four.
  • The ultimate aim is to take a very simple design concept from the drawing board to a web page as a team!

• Design Session (45 Minutes)

  Come up with an app that requires form input from a user.

  This very basic idea has some constraints:

  • Your user will be accessing your web page via a mobile device - it should be simple enough to use on a mobile
  • Don't make it too complicated - we're focusing on HTML forms, think about the kind of data that you might want to capture with one of these.
  • This is day 1 so the user's inputs won't be stored in a database or anything like that - just focus on collecting the data and displaying it to the user, just like the pre-lunch exercise

  We're looking for answers to the following questions:

  • What would your overall app do?
  • Who is your user?
  • Why do they need to input data?
  • Where are they going to be inputting data?
  • When are they going to be inputting data?
  • How are they going to input data? (Mobile device)
  • How will you enhance the user experience?
  • How will you make it pretty?

  Try drawing out wireframes of your app, and form. It's okay to design parts of a page that won't function (e.g. menu buttons) as well as think about elements that might enhance your user's experience. Stay focused on the form, though! Try to think about how it might break or annoy a user, as well as thinking about all the different types of data that you might want to capture. Feel free to use the internet and riff off other ideas!

• Planning and setup (1450) (30 mins)

  Write a README for your app - WHY / WHAT / HOW. Finish with a bullet-point project plan, and mark your more ambitious features as "stretch goals".

  Groups should split into pairs again, making sure they are constantly communicating with each other. Divide the tasks between the pairs, and decide how you will work together to avoid conflicts in the code. Two spaces or four...?

• Coffee break (10 minutes)

• Do the codes (1530) (90 mins)

  The goal isn't to break new ground, it is to get students working together (and hopefully enjoying it!). So you can start by just logging your user input to the console as in the pre-lunch exercise, and when you're happy with how that works, aim to transfer it from the console to the page itself.

  Think about all the worst practices you dealt with in the first exercise and avoid them.

  Keep updating your README as you proceed - it will form the basis for your presentation at the end of the day

• Presentations (45 minutes)

  As a team, present your very first FAC app (of many). Start with your README, then demo your app, then show us your code. Tell us all about the sacrifices you had to make to functionality as the deadline approached. What would you do differently next time? What lessons did you learn about working together as a team? What coding quirks did you encounter - what warnings do you have for the rest of the cohort. Etc.

  If you're good, we may applaud. But only if you're good.