#DOSOMETHING.ORG CODE DAY! Hi! Today, we'll have two tracks:
- Building your own portfolio page, which'll cover the basics of web development: Github, the markdown languages HTML and CSS, setting up a web page, and perhaps some more advanced CSS and JavaScript animations.
- A deep dive into programming with JavaScript. This track will be more heavily dedicated to the nuts and bolts of programming and computer science, as opposed to web development.
##1 - BUILD YOUR OWN PORTFOLIO PAGE
####BARRY'S BEAUTEOUS BLOG GENERATOR - JEKYLL-NOW Barry's written an excellent tutorial on how to easily set up your own blog or portfolio site. Before you begin the tutorial, however, make sure to create a Github account.
Note that the tutorial itself gives a lot of background context meant for programmers--don't be daunted! When you begin the tutorial after creating a Github account, skip down to bullet point "1. Fork a Starting Point.
####WRITING A BLOG POST WITH JEKYLL The Jekyll blogging system allows you to write posts with Markdown, a way to easily write formatted text. To learn how to use Markdown, check out this Markdown cheatsheet and this in-browser Markdown text editor, which allows you to instantly see how what you've typed translates into Markdown.
####PUTTING YOUR BLOG ON A CUSTOM DOMAIN So you want to buy your own domain name, eh? We recommend the following domain name registrar: NameCheap.com. It provides the most number of services cheaply, is easy to use, and doesn't pay for sexist Super Bowl ads.
After you've thrown up your blog on your own Gitub pages account using Barry's generator, buy a domain name on NameCheap and direct it to your blog--here's a super helpful tutorial on setting it all up.
####ADDING COMMENTS AND GOOGLE ANALYTICS
For comments, create a free Disqus account and follow the instructions on Barry's tutorial to include your Disqus shortname in your _config.yml file.
To add Google Analytics (track the traffic to your site!), create a Google Analytics account here, and additionally add the shortcode to your _config.yml file.
####CSS & HTML If you've never encountered CSS and HTML before, begin with this great tutorial. Make sure to download Sublime Text 2 first!
Then, you can begin customizing your site. Try adding another photo to your site, or incorporating some CSS animations!
If you wanna get fancy with it, try incorporating some big background videos onto your blog.
####CHROME DEVTOOLS To get even *more * fancy with it, check out this tutorial to the Chrome Dev Tools. It'll give you even more power in evauating what's going on on a web page, and allow you to see what happens if you modify an element's style instantaneously.
##2 - LEARNING JAVASCRIPT
For those of you with no experience with programming, we recommend working through the CodeAcademy JavaScript course. Signup for an account, and work your way through the lessons.
For those of you who have programmed before, or have seen or touched JavaScript before (even minimally!), we recommend working through the following workshop: Test-First JavaScript.
First, download Sublime Text 2, the text editor we prefer to write code with. Then, navigate to the Test-First Javascript page and follow the installation instructions.