#Journalism + Code + Design ####slides at gurmanbh.github.io/lunchandlearn/ Created by [Gurman Bhatia](http://gurmanbhatia.com) / [@gurmanbhatia](http://twitter.com/gurmanbhatia)

Part 1: Code

HTML

Basic structure. The bare bones.

CSS

Making the bare bones pretty. Think of design. The Appearance.

JavaScript

Any functionality. What happens when I click this? Can I trigger an action?

Everyday stories from Poynter and how I did them
Lesson 1. Your browser is your best friend. Here is how you make the most out of it.
##[Objecting to story takedown, Gawker Media’s top editor quits](http://www.poynter.org/news/mediawire/359071/objecting-to-story-takedown-gawker-medias-top-editor-quits/) [![alt text](img/gawker.png "Gawker Memo")](https://docs.google.com/document/d/1_sS_8ubUXkG9VEY0YhjRwIvF32xKi2kOP_YCF69fTtA/preview?sle=true)

Lesson 2. When writing articles about interactives or products or process, use gifs to show them!

Why is it important?
Because social.

GIFs from video

Tutorial here

More lessons on GIFs here via the amazing Lena Groeger
Lesson 3. But... Don't get carried away. Don't force interactivity where it is not required. Story over medium. Think of User Experience.
Lesson 4. When thinking of design, minimalism is the way to go. Concept over features.
When it comes to graphics, iterate and edit. Just like any other story.
Lesson 5. You know this...
Collaborate
##Tools/Forms * **Maps** - Google Maps, Fusion Tables, CartoDB. * **Charts** - Datawrapper, Chartbuilder, Charted.io. Feeling adventurous? Try Highcharts.js, Google charts. * **GIFS!** - Be excited. We will spend a good 10 minutes on gifs. (Photoshopppppp) * **Timelines** - Timeline.js (Horizontal), Tik-tok (Vertical). * **Annotation** - Annonator.js, Hypothesis. * **Interactions** - Juxtapose. * **Design** - GIMP for Mac. Vectors from The Noun Project. Fancy people can use Photoshop and Illustratpr.