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
  • Separate 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

Plan

Introduction (5 minutes) (1200)

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

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.You will have merge conflicts as this is all in one file, so we will go through how to correct them.
Task list:
  • Set up Github for your group (giving everyone the right permissions)
  • Split into pairs for HTML/CSS and JS
  • Go to this repo
  • 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.

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.

results matching ""

    No results matching ""