index.html

<!doctype html>
<html lang="en">

	<head>
		<meta charset="utf-8">

		<title>Teach Yourself to Code | Becca Aaronson</title>

		<meta name="description" content="A reporter's guide on teaching yourself how to code, made special for NICAR 2015">
		<meta name="author" content="Becca Aaronson">

		<meta name="apple-mobile-web-app-capable" content="yes" />
		<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />

		<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, minimal-ui">

		<link rel="stylesheet" href="css/reveal.css">
		<link rel="stylesheet" href="css/theme/solarized.css" id="theme">

		<!-- Code syntax highlighting -->
		<link rel="stylesheet" href="lib/css/zenburn.css">

		<!-- Printing and PDF exports -->
		<script>
			var link = document.createElement( 'link' );
			link.rel = 'stylesheet';
			link.type = 'text/css';
			link.href = window.location.search.match( /print-pdf/gi ) ? 'css/print/pdf.css' : 'css/print/paper.css';
			document.getElementsByTagName( 'head' )[0].appendChild( link );
		</script>

		<!--[if lt IE 9]>
		<script src="lib/js/html5shiv.js"></script>
		<![endif]-->
	</head>

	<body>

		<div class="reveal">

			<!-- Any section element inside of this container is displayed as a slide -->
			<div class="slides">
				<section>
					<header>
						<h1>Teach Yourself to Code</h1>
					</header>
					<p><a href="http://brickaa.github.io">Becca Aaronson</a></p>
					<ul>
						<li><a href="http://mailto:baaronson@texastribune.org">baaronson@texastribune.org</a></li>
						<li><a href="https://twitter.com/becca_aa">@becca_aa</a></li>
						<li>Github: <a href="https://github.com/brickaa">brickaa</a></li>
					</ul>
				</section>

				<section>
					<h2>Goal: To give you enough tools in <em>one hour</em> to teach yourself how to code.</h2>
					<p>
						It will actually take months, even years, to get good at these things. Start small, stay patient and keep pushing yourself to learn new things.
					</p>
				</section>

				<!-- Example of nested vertical slides -->
				<section>
					<header>
						<h2>Where to start</h2>
					</header>
					<p>It doesn't <em>really</em> matter what language you learn first. What's important is learning how to <em>think</em> like a developer.</p>

<!-- 					<p>Learning code is equivalent to learning a language. If you don't practice speaking a new language, like Spanish, and seek out novel conversations to express ideas outside of a classroom, you won't really learn it.</p> -->
				</section>

				<section data-markdown>
					##Easy as pie

					Coding is a like writing a recipe. Good developers write code in stages, with each step leading to the final product. They understand why each part is necessary, and exactly what order they must occur in to get the job done right.
				</section>
				<section data-markdown>
					##Where to start

					+ Do online tutorials. Do them again.
					+ Test your new skills with a really small project.
					+ Sign up for GitHub and start browsing others' code. 
					+ Start maneuvering around your computer on the command line, opening/making files.
					+ Figure out how to setup a Github repository. 
					+ Start keeping track of your projects, however small, as you build them by committing your changes to Github.</p>
				</section>
				<section>
					<header>
						<h2>Helpful links</h2>
					</header>
					<ul>
						<li>Learn how to use Github in <a href="https://try.github.io/levels/1/challenges/1">15 minutes</a></li>
						<li><a href="http://cli.learncodethehardway.org/book/">The Command Line Crash Course</a></li>
						<li><a href="http://teachyourselftocode.com/">Links to all the best tutorials</a></li>
						<li><a href="http://lifehacker.com/top-10-ways-to-teach-yourself-to-code-1684250889">Top 10 Ways to Teach Yourself to Code</a></li>
						<li><a href="http://lifehacker.com/which-programming-language-should-i-learn-first-1477153665">Which programming language should I learn first?</a></li>
					</ul>
				</section>

				<section data-markdown>
					##Always be GOOGLING

					+ [Stack Overflow](http://stackoverflow.com/): Best place to find answers on why your code isn't working. Note the rating system on users' answers/responses. Don't be afraid to post a question.
					+ [CSS-Tricks](https://css-tricks.com/): Every tutorial you could possibly want on CSS/Sass. Great [examples](https://css-tricks.com/snippets/html/) of how to properly format HTML, CSS &amp; Javascript.
					+ [Codepen](http://codepen.io/): Share and edit open sourced CSS/Sass. Lots of animation examples.
				</section>

				<section>
					<h2>Set up your computer</h2>
					<p>
						Assuming you're on a Mac, which is all I'm qualified to teach you on, you'll need a text editor. Recommended: <a href="http://www.sublimetext.com/3">Sublime Text 3</a> or <a href="https://atom.io/">Atom</a>. Eventually, you will also tell you to download XCode, and once you start using the Terminal, install Homebrew to make it easier to install other things.
					</p>
				</section>

				<section data-markdown>
					###The Basics of a Website
					+ **HTML:** The structure of your website
					+ **CSS:** The visual styles (CSS ="Cascading style sheet")
					+ **Javascript:** The interactive functionality
				</section>

				<section data-markdown>
					###Web Frameworks
					For large websites, web frameworks do the heavy lifting &mdash; like send/receive user requests to a database.

					+ Python / [Django](https://www.djangoproject.com/)
					+ Ruby / [Ruby on Rails](http://rubyonrails.org/)

					FYI: Python and Ruby aren't "web" languages &mdash; you can write all kinds of code with these languages. BUT other people have used these languages to build web frameworks that make building dynamic websites much easier.
				</section>

				<section data-markdown>
					###Front-end Frameworks
					Front-end frameworks are also a great place to find example code, because they're built to be reusable and adaptable. 

					+ [Bootstrap](http://getbootstrap.com/)
					+ [Foundation](http://foundation.zurb.com/)
					+ [Bourbon](http://bourbon.io/)

				</section>

				<section>
					<p>If you haven't already, <a href="https://github.com/brickaa/teach-yourself-code/archive/master.zip">download the ZIP</a> for this project on Github. Open <a href="/examples/basic-web-structure.html" target="_blank">basic-web-structure.html</a> in a text editor. This is the basic structure for every website. If you open <a href="/examples/basic-web-structure-comments.html" target="_blank">basic-web-structure-comments.html</a> you'll see an explanation for each of the sections.</p>
<pre><code>
<!DOCTYPE html>
<html>
  <head>
    <title>Name of your website</title>

    <!-- Load stylesheet -->
    <link rel="stylesheet" type="text/css" href="/path-to-your-stylesheet/main.css">
  </head>

  <body>
    <h1>Hello world!</h1>

    <!-- Load script -->
    <script type="text/javascript" src="/path-to-your-script-code/main.js"></script>

  </body>
</html>
 </code></pre>

				</section>

				<section data-markdown>
					##Let's inspect the DOM

					**The DOM:** The HTML parsed by a browser and turned into a website. Here's a [longer explanation](https://css-tricks.com/dom/).
				</section>

				<section data-markdown>
					In a Chrome browser, open <a href="/examples/basic-web-structure-comments.html" target="_blank">basic-web-structure-comments.html</a>. Highlight "Hello World!", right-click and choose "Inspect element" to open your browser development tools.
					
					You can also go to "View > Developer > Developer Tools" or use the keyboard shortcut "alt+command+i" (⌥⌘I)	

					Click on the tab "Elements," if it isn't already selected. Look, it's your HTML! Except, it's a bit different, because this is the DOM. This is how the browser READ your HTML. 
				</section>
				<section data-markdown>
					##Interact with the DOM

					You can interact with ANY website through the DOM. For example, let's change the color of "Hello World!" &mdash; Click on the h1 element. To the right, you'll see the styles the brower has already applied. Under element.style {} add the text "color: blue;" and check out your page, now "Hello World!" is blue.	

					OK, now go to your favorite website, or [this](http://www.theatlantic.com/photo/2015/03/a-visit-to-aoshima-a-cat-island-in-japan/386647/) website, open the browser development tools and look around.

					(Here's a [video tutorial](https://www.youtube.com/watch?v=FQKvro1Wz-E) if you're reading this online.)
				</section>

				<section data-markdown>
					Do this:

					+ Change the color of any element. 
					+ Find a color block within the styles of an element. Click the square, and look, an eyedropper! Use that eyedropper to select a color on the page and get the hex code.
					+ Find an element that changes on hover (like a button). Right-click that element in the dev inspector window, and click "Force Element State" > : hover. Look what happens to the styles.
					+ Delete all the elements in the DOM. All of them. JK, delete one or two.
					+ Now move things around. Whoa.
				</section>

				<section data-markdown>
					###Device testing

					Chrome and Firefox both have tools to test what your website will look like on various devices. In Chrome, click the button in the top left of the "Development Tools" window that looks like a tablet. Select the type of device you want to test, and reload.
				</section>

				<section data-markdown>
					**The Console:** A place to test the interactive parts of your website by interacting directly with the DOM. [Longer explanation](https://developer.chrome.com/devtools/docs/console).
				</section>

				<section data-markdown>
					Click on the tab "Console" in your open Developer Tools window. ("View > Developer > JavaScript Console"). Type the following, then hit enter:

				  	<pre><code>console.log("Hello World");</code></pre>

					See how the words are printed out? 
				</section>
				<section data-markdown>
					##console.log();

					A debugging tool that let's you see what your code is doing. Here's a [good explanation](http://stackoverflow.com/questions/4539253/what-is-console-log) of console.log(). It also explains how to access the console in a variety of browsers and web platforms, not just Chrome.
				</section>

				<section data-markdown>
					###You should use console.log() **ALL THE TIME**. 

					Especially when you first start coding, you should use console.log() on nearly every line to double-check that your code is functioning as you expect. 

					An annoying lil secret: console.log() often breaks Internet Explorer, so delete any console.log() lines before you deploy.
				</section>

				<section data-markdown>
					##Google Charts

					Google charts has many wonderful [code examples](https://developers.google.com/chart/interactive/docs/gallery/barchart), and step-by-step instructions on how to change up the code to make it work for you.
				</section>

				<section data-markdown>
					##Let's code something together

					Open [examples/index.html](examples/index.html). We're going to use Google Charts to build a pie chart. 

					Go [here](https://developers.google.com/chart/interactive/docs/basic_load_libs) and copy/paste that first block of code into index.html
				</section>

				<section data-markdown>
					###Don't be afraid of the Terminal!

					If you're scared of the big black box, make it pretty. Go to Terminal > Preferences > Profiles and change the color scheme. You can import new color schemes, like [this](http://ethanschoonover.com/solarized).			
				</section>
				<section data-markdown>
					###Proof the terminal isn't scary

					Type the following into your terminal. (If you haven't downloaded XCode, it won't work.)
					<pre><code>
						python
					</code></pre>

					Congrats, you've connected the python library.
				</section>
				<section data-markdown>
					 Now type (>>> is already there, you don't type that part):
					<pre><code>
						>>> print "Hello world!"
					</code></pre>
				</section>

				<section>
					Ok, so what if you pull down an example from GitHub, open the page in your browser and it doesn't work? The project probably needs a server to compile the styles, scripts, and other components. 

					In your console, type:
					<pre><code>python -m SimpleHTTPServer 8000</code></pre>

					Now, open your browser to localhost:8000. You'll see your webpage, hosted from a server on your local computer. 
				</section>
			</div>

		</div>

		<script src="lib/js/head.min.js"></script>
		<script src="js/reveal.js"></script>

		<script>

			// Full list of configuration options available at:
			// https://github.com/hakimel/reveal.js#configuration
			Reveal.initialize({
				controls: true,
				progress: true,
				history: true,
				center: true,

				transition: 'slide', // none/fade/slide/convex/concave/zoom

				// Optional reveal.js plugins
				dependencies: [
					{ src: 'lib/js/classList.js', condition: function() { return !document.body.classList; } },
					{ src: 'plugin/markdown/marked.js', condition: function() { return !!document.querySelector( '[data-markdown]' ); } },
					{ src: 'plugin/markdown/markdown.js', condition: function() { return !!document.querySelector( '[data-markdown]' ); } },
					{ src: 'plugin/highlight/highlight.js', async: true, condition: function() { return !!document.querySelector( 'pre code' ); }, callback: function() { hljs.initHighlightingOnLoad(); } },
					{ src: 'plugin/zoom-js/zoom.js', async: true },
					{ src: 'plugin/notes/notes.js', async: true }
				]
			});

		</script>

	</body>
</html>