This is the curriculum for the 2018 Foxtrot Web Developer Bootcamp.

"All the brilliant minds working together on the same thing, at the same time, in the same space, and at the same computer" mobprogramming.org

Mob programming is a scaled up version of pair programming. There is still a driver at the keyboard, however, there may be two, alternating in typing the group's input. Everybody in the group contributes to the implementation, and people can bring laptops, books and other materials to help find solutions to problems, research API calls and provide understanding.

See also:

Wikipedia: Mob Programming

A day of Mob Programming

Review and Prep

What is the structure of a web page?

What are some of the differences between HTML and HTML5?

What is Semantic HTML?

What is floating in CSS?

Explain what a class selector is and how its used.

What is an ID selector and how is it used?

What are pseudo classes and what are they used for?

What is the CSS Box Model used for?

What is JavaScript?

What are the various datatypes in javascript?

How to create arrays in JavaScript?

Whats a way to append a value to an array?

What is a boolean?

What boolean operators does JavaScript support?

A wireframe of a web page or web site is simplification of the view to illustrate three things:

  • What and where information is shown
  • What UI elements or widgets will be used (for instance, buttons vs. links)
  • How to navigate the page or the site

Some wireframes look like they were drawn with a crayon by a three year old on the back of a napkin; these are called low-fidelity wireframes.
The point is to only create a visual guide and not get into to many details. As long as the idea you are trying to get across is clear and understandable, its a successful wireframe. You can use a whiteboard, paper, or whatever is convenient.

There are online tools to make wireframing as easy as possible, and shareable as well.

pig-latin

Wireframes can be higher-fidelity and attempt to create a truthful experience of how an application will work "in the wild". An Example: Balsamiq Mockups 3 Intro

See also:

Wikipedia: Website Wireframe

How to wireframe a website | CharliMarieTV

A Beginners Guide to Wireframing

Pig Latin

We're going to use Mob Programming to practice our wireframing and programming skills while we build a Pig Latin translator application. Not fluent in Pig Latin yet? No problem, you'll pick it up in no time. How to speak Pig Latin

Rules of Pig Latin

  • For words beginning with a vowel, add "way" to the end.
  • For words beginning with one or more consonants, move all of the first consecutive consonants to the end, and add "ay".
  • If the first consonants include "qu", move the "u" along with the "q". Don't forget about words like "squeal" where "qu" doesn't come first!
  • For words beginning with "y", treat "y" as a consonant.

Examples

There are many examples of Pig Latin translators out there on the Internet to give you inspiration. Here's one

Challenge

1) Brainstorm with your group how you would like your application to function.
2) Use a whiteboard or paper to sketch out some ideas about how the application will work.
3) Spend some time talking about how the code will need to work to make your app a reality.
4) Get coding as a group on one part of the application, and build it out from there.
5) Be sure and pause occasionally to discuss strategy and plan next steps.