While there are a ton of tutorials out there on every topic I'll be introducing in this eBook, my angle will be to stick with the "give me the general concepts" and "let's just get this rolling" essentials and allow you figure out the details on your own (I'll point you to resources & other tutorials out there). I'll be tailoring the class to anyone who would call themselves reasonably "good with computers" but may have little to no programming experience. However, even if you are 80 years old with decades of programming experience, I'm hoping this eBook will still be helpful to spark an entrepreneurial spirit and/or bring you up to speed on HTML5, CSS3, Rails3, etc....

A web browser reads code (HTML/CSS/Javascript/etc.) and makes it look nice for humans

At the end of the day, a web browser (Chrome/Firefox/Safari/Internet Explorer/Opera/etc.) just reads a string of code, grabs other files (like images, CSS & JavaScript files, etc.) and makes it look pretty. This is the source code for Google.com. You should take a few moments this week and Right-Click in your browser on your favorite sites and "View Source" to get an idea of what's going on under the hood. By the end of this eBook, you'll have a pretty good understanding of exactly what all that code means and does (so you can write your own).

This chapter will be the only one (out of the 23) focused entirely on HTML (Hypertext Markup Language) and CSS (Cascading Style Sheets). Make sure to tinker around a lot at the end so you feel confortable with the general concept of page elements and how to style them before moving on.

HTML5, First Without Styling

With your Rails application server fired up (i.e. rails server command entered at your RAILS_ROOT folder location) and text editor of choice ready, erase your entire app/views/home/index.html.erb file and save it so it is blank. Next, create a file called app/views/layouts/application.html.erb and copy in the following (using the top-right copy feature or else you'll get line numbers), save it, and point your web browser to http://localhost:3000:

"HTML5" has now essentially turned into multi-faceted meme that started about 7 years ago by pioneers intending to unify diverging syntactical & front-end development streams of the Internet. While it is common to find articles that emphasize different parts of it, at its core HTML5 helps web developers keep markup, styling, and Javascript within their functionally appropriate spheres.

Programming is fun and JavaScript is fantastic. This throw-you-in-the-deep-end tutorial is for adventurous beginners of both. By the end you'll have some basic tools and principals needed to tackle any object-oriented programming language.

To start, one of the first things you should know is that, similar to a spoken language, a scripting language has rules and syntax. For this tutorial we're going to jump in and teach you core programming concepts (such as strings, integers, arrays, functions, objects, etc.) by using them to achieve a purpose (i.e. creating, editing, and displaying a "database" of users)

Think of Programming Objects Like Real-World Objects

This apple, for example, has lots of attributes. It is red, round-ish, has a stem, has some spots, etc... In JavaScript, if your apple.color = 'red'; then when you use apple.color in your code, it will contain the string 'red'. Programming objects are very much like real-world objects in that they store lots of information in a structured way, and all that information can be accessed off the "apple" object.

Most web pages you come across have common features such as a header, main content, asides (e.g. in one or more sidebars), footer, etc... In a sidebar there are often multiple aside elements (sometimes called 'widgets' - esp. if they do something or pull content from outside sources). In this tutorial, we will add a widget under our "Kinds of Apples" aside developed in tutorial #2 (or you can just add the code below to a blank .html file on your desktop) that will pull in real-time Facebook comments from people around the world mentioning "apples" and allow you to visit those authors' Facebook profile pages.