Practice WOD: Surferpedia

The goal of this WOD is to continue to practice the development of simple multipage web applications and publish them via GitHub.

Before starting this WOD, please gather the following content:

• A picture and 1-3 paragraphs of biographical information about a male surfer.
• A picture and 1-3 paragraphs of biographical information about a female surfer.
• A picture and 1-3 paragraphs of biographical information about a young surfer (in surfing parlance, young surfers are known as “groms”)
• A picture useful as a header image (approximately 1000px by 300px).

You might find the following sites to be of use in your research: http://www.surfermag.com/hot-100/, and http://surfing.wikia.com/wiki/Category:Surfers.

Note: I highly recommend you do not pick the first surfer you find in each category, because you will later need to “swap” data with another classmate. The more obscure the surfers in your surferpedia, the easier it will be for you later. (Do you surf? Do you have a shot of you shredding at Sandy’s? Then make one of the entries about you! Have friends who surf? Add them as well!)

Instructions

For this WOD, you will publish your PlayResponsiveKamanu application as a GitHub repository.

1. Start your timer.
2. Create a GitHub repository called “surferpedia” that will host the source code for a Play web application providing biographical information about surfers.
3. Base it on your play-dropdown-carousel code, renaming the directory, the Eclipse project, and the Play application to “surferpedia”.
4. Enable checkstyle.
5. Put your header image at the top of the site, with a navbar underneath.
6. Implement a drop-down menubar with a “Males”, “Females”, and “Groms” drop-down menu items. They go to entries containing links to your male, female, and grom bio pages.
7. The home page contains a carousel containing pictures of all surfers in the web app and provides their name as the caption for each photo.
8. There are three interior pages: one for each surfer. The interior pages contain their photo and their biographical paragraph(s). You might want four columns for the photo and eight columns for the bio paragraph(s).
9. Commit your changes to GitHub.
10. Update the README.md file, and create a GitHub page for end-users.
11. Note that the GitHub repo containing your code should satisfy the requirements in GitHub Guidelines.

Here’s what the application home page might look like:

And here’s what an interior page in the application might look like:

Finally, here’s what the GitHub page for your repo might look like:

When finished, stop your timer, and record how many minutes it took you to complete the WOD.

Rx: <35 min Av: 35-50 min Sd: 50-70 min DNF: 70+ min

Demonstration

Once you’ve finished doing the WOD a single time, watch me do it:

Standard WOD Caveats

You’ll learn significantly less from watching me solve the WOD if you haven’t attempted the WOD yourself first.

While it’s an achievement to finish the WOD no matter how long it takes, you might experience “diminishing returns” if you work longer than the DNF time. Thus, it might be strategic to stop working at the DNF time and watch my solution.

After watching my solution, I recommend that you repeat the WOD if you have not achieved at least Av performance. If so, be sure to:

• Delete your old project so you cannot refer to it;
• Don’t look at my screencast while you WOD; and
• Reset your timer.

Feel free to keep trying until you make Rx if that’s of interest to you.