1 of 12

Tutorial 13: Final Project Proposal

Tour of Tools

2 of 12

Agenda

  1. Brief discussion / Q&A session on how to think about scoping your project.
  2. 30 minutes: Tour of the tools you might use.
    • Templates
    • Photo Gallery Widget
    • Interactive Map (if time)
  3. 10 minutes for you to sit down, fill out the worksheet, and brainstorm:
    • What you want to make and,
    • How you want to approach your project
  4. 10-15 minutes: Group share-outs

3 of 12

How to scope: Ask yourself…

  1. What am I interested in?
    1. Will this project keep my interest? What could motivate me?
  2. How might this project benefit…
    • My learning?
    • My future (e.g., showcasing your work for potential employers)?
    • My community (e.g., making a website for a friend)?
  3. How am I going to reasonably approach this problem within 8-10 hours of work?
    • What tutorials / resources will I draw from?
    • How can I break up the work into smaller pieces?

4 of 12

Tour of Tools

How do you download web widgets from the �Internet and use them?

4

5 of 12

Pros and Cons of using other people’s code

Pros:

  • Principle of encapsulation: Most of the time, you don’t need to know how something is working, so long as it works!
  • As long as you know how to incorporate code samples, the entire internet is at your disposal!

Cons:

  • Lots of reading and tinkering to figure out how the library works
  • The documentation isn’t always particularly easy to understand
  • Can be difficult to customize the widget (since you didn’t build it yourself)

5

6 of 12

Process of Incorporating Widgets & Templates

  1. Read the documentation
  2. Figure out how to include the necessary CSS and JavaScript files, usually from a “content delivery network” (CDN)
  3. Mess with the examples until you get the effect you want
  4. A few common patterns you’ll see:
    1. Use of languages that compile to HTML (e.g. “pug”), CSS (e.g. “SCSS” or “SASS”), or JavaScript (e.g. “TypeScript,” “CoffeeScript”).

6

7 of 12

Let’s Practice!

7

8 of 12

Example 1: Using a Template / Theme

Browse and select a template that you like…

8

9 of 12

Example 2: Carousel demo

Let’s practice integrating third party code...

​

  • Google “JavaScript Carousel”)
  • Let’ look at this one:
    • “GALLERY VIEWER CAROUSEL / TILES”
  • Pro Tip: this website is great for creating “dummy” images:
    • https://picsum.photos/

9

10 of 12

Example 3: Interactive Map

Let’s practice again using an interactive map (using Leaflet):

​

  1. Take a look at the homepage: https://leafletjs.com/
  2. Then navigate to the QuickStart Guide: https://leafletjs.com/examples/quick-start/
  3. Then follow along and give it a shot!

10

11 of 12

Example 3: Find a Code Sample You Like

Browse these examples...

​

https://freefrontend.com/

11

12 of 12

Time to fill out the worksheet…

We’ll share out in groups