index.html

---
layout: default
title: Happy Coding
meta-title: Happy Coding
meta-description: You can code. HappyCoding.io is a collection of tutorials and examples that start at the absolute basics and take you through advanced coding topics.
---

<div class="jumbotron">

  <img src="/images/logo-vertical-large.png"
       style="image-rendering: pixelated;" />
  <hr>

	<h1>You can code.</h1>
	
	<p>Code is more than just ones and zeroes. Code is a <strong>creative process</strong> that lets you express yourself, reach other people, generate art, and make stuff in new ways every day.</p>
	
	<p>Happy Coding is a collection of <strong><a href="/tutorials">tutorials</a></strong> and <strong><a href="/examples">examples</a></strong>, starting with the fundamentals of creative coding and ending with advanced topics like server-side coding and Android development.</p>
	
	<p>It's also a <strong><a href="https://forum.happycoding.io">community</a></strong> of people learning how to code. So if you're stuck on something or have a question, come say "hello world" on the <strong><a href="https://forum.happycoding.io">forum</a></strong>!</p>
</div>
<hr>

<h2>Intro to Creative Coding</h2>

<div class="thumbnail-link-container" style="max-width:650px; margin:auto;">
  <div class="intro-tut">
    <p>Start with this meta-guide about learning with Happy Coding!</p>
    {% include url-thumbnail.html url="/tutorials/how-to/learn-coding" %}
  </div>

  <div class="intro-tut">
    <p>Are you new to coding? Start here! Dive into creative coding with p5.js.</p>
    {% include url-thumbnail.html url="/tutorials/p5js/" %}
  </div>
  
  <div class="intro-tut">
    <p>Have some Java experience? Start with Processing!</p>
    {% include url-thumbnail.html url="/tutorials/processing/" %}
  </div>
  
  <div class="intro-tut">
    <p>Not sure which is right for you? Read this first!</p><br>
    {% include url-thumbnail.html url="/tutorials/p5js/which-processing" %}
  </div>
</div>

<p><a href="/tutorials">Check out all of the tutorials here!</a></p>

<hr>

<h2>Who are you?</h2>
<img src="/images/pixel-kevin.png" alt="Kevin and Stanley"
    style="border: thin solid #323232;" />
<p>Hi! I'm <a href="https://kevinworkman.com">Kevin</a>!</p>

<p>By day I'm a software engineer at Google Maps, and I also volunteer with <a href="https://buildyourfuture.withgoogle.com/programs/softwareproductsprint">Software Product Sprint</a> in my "20%" time.</p>

<p>By night I maintain this site, where I post coding <a href="/tutorials">tutorials</a>, <a href="/examples">examples</a>, and <a href="/blog">other ramblings</a>. I do all of this for free, in my spare time, just for fun. I'm a person, not a company!</p>

<p>I support diversity in tech, and I believe I have a responsibility to open the door for new coders- especially those who feel unwelcome, or who might not know how fun it is. Happy Coding is my attempt to show new folks a path from the fundamentals of coding, to every concept I've learned about so far.</p>

<p>I love talking about all of this stuff, so please come say "hello world" on the <a href="https://forum.happycoding.io">forum</a>!</p>
<hr>

<h2>New Videos</h2>

<iframe width="600" height="350" style="width:100%" src="https://www.youtube.com/embed/videoseries?list=PLty5Qt07EFvCRZ79uzn7ofzwPdlKpLH4h" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

<hr>

<h2>New Tutorials</h2>
<div class="thumbnail-link-container">
{% include recent-posts.html posts=site.categories.tutorials count=6 %}
</div>
<hr>

<h2>New Examples</h2>
<div class="thumbnail-link-container">
{% include recent-posts.html posts=site.categories.examples count=6 %}
</div>
<hr>

<h2>Latest Blog Post</h2>
{% for post in site.categories.blog limit:1 %}
  <a href="{{ post.url }}" title="{{ post.title }}">
    <h2>{{ post.title }} - {{ post.date | date: "%B %-d, %Y" }}</h2>
    {% if post.meta-image %}
    <img class="blog-thumbnail" src="{{ post.meta-image }}"
        alt="{{ post.title }}" style="width: 600px;" />
    {% endif %}
  </a>
  <p>{{ post.meta-description }}</p>
  <p>(<a href="{{ post.url }}">Read the rest here.</a>)</p>
{% endfor %}

<hr>

<h2>Popular Blog Posts</h2>
<div class="thumbnail-link-container">
{% for post in site.categories.blog %}
  {% if post.tags contains "favorite" %}
    {% include url-thumbnail.html url=post.url showDate=true %}
  {% endif %}
{% endfor %}
</div>
<p><a href="/blog">Read more blog posts here!</a></p>

<hr>

<h2>Happy Arting</h2>
<p>You can also check out creative coding prints on the <a href="https://www.etsy.com/shop/HappyCoding">Happy Coding Etsy</a>!</p>
<div id="etsy-listings"></div>
<script src="/js/etsy-listings.js"></script>