20 Website Examples built with Ruby on Rails

Ruby on Rails is a popular web development framework. It’s used for building websites and applications like Twitter, Groupon, Shopify and many more. Here at One Month we love Ruby on Rails — we’ve been teaching our famous One Month Rails course since 2013, and have graduated over 10,000 students.

This is our list of the top 20 Ruby on Rails website examples to help inspire you to learn, and build with Ruby on Rails:

1. Apartable

Apartable uses Ruby on Rails

2. Airbnb

Airbnb uses Ruby on Rails

3. Basecamp

Basecamp uses Ruby on Rails

4. CafePress

CafePress uses Ruby on Rails

5. CrunchBase

Crunchbase uses Ruby on Rails

6. Dribbble

Dribbble uses Ruby on Rails

7. Fab.com

Fab.com uses Ruby on Rails

8. Funny or Die

Funny or Die uses Ruby on Rails

9. Github

Github uses Ruby on Rails

10. Groupon

Groupon uses Ruby on Rails

11. Hulu

Hulu use Ruby on Rails

12. Kickstarter

Kickstarter uses Hulu

13. SendGrid

SendGrid uses Ruby on Rails

14. Shopify

Shopify uses Ruby on Rails

15. Soundcloud

Soundcloud uses Ruby on Rails

16. Square

Square uses Ruby on Rails

17. Twitter

Twitter uses Ruby on Rails

18. Urban Dictionary

Urban Dictionary uses Ruby on Rails

19. Whitepages

Whitepages uses Ruby on Rails

20. Zendesk

Zendesk uses Ruby on Rails

What Is FTP Upload?

What is FTP Upload?

File Transfer Protocol is one of the easiest ways to upload a website to the Internet. You probably know this, but every single website on the Internet is hosted on a server. Some of the content on the server, like the dynamic data of users, posts, or comments, may be generated live on the server, but many of the elements  such as the web design, headers, logos, and structure of the page are all uploaded to the server from someone’s computer. While most hosts (e.g. Hostgator, and Bluehost) offer some sort of file manager, it’s often fairly limited. File Transfer Protocol, or FTP for short, allows you to upload, download and manage your website’s files. In this beginner FTP tutorial I’m going to show you get started transfering files.  

What is FTP?

FTP is a protocol that was first created in 1971. At that time, most file transfer actions were accomplished through manual command-line inputs. Savvy developers decided that it would be much easier to automate the various applications of FTP and collect them together into a program with a graphical user interface called an FTP client.

1. Set Up a Host 

Before you can upload anything to your website, you’ll need it hosted somewhere. This is a great article on how to get started with HostGator if you aren’t already.

After you set up your hosting, you’ll receive a “Welcome” email that has login credentials. Make sure to archive this email, because you’ll need those credentials later.

2. Download your first FTP Client: Cyberduck

There are lots of popular options out there, but if you’re using Windows or Mac, we recommend Cyberduck. It has a long list of features including bookmarks, local-remote synchronization and encryption. Basically, whatever you need to do in terms of file transfer, Cyberduck can get it done. Did I mention that it’s open-source and free?.

It’s also easy to install. Just visit cyberduck.io and click the appropriate download link for your system.

How to setup FTP, SFTP and Amazon S3 using Cyberduck

How to setup FTP, SFTP and Amazon S3 using Cyberduck

3. Connect to Hostgator

In order to use FTP you’ll need to have a host.

http://www.pfnp.me/how-to-setup-hosting-with-hostgator/

Connecting to HostGator with Cyberduck is easy:

  1. Click the “Open Connection” button at the top-left of the Cyberduck window.
  2. Next to “Server:” enter the domain or IP address for your server and make sure the port is set to 21.
  3. Use your cPanel login credentials for the username and password.
  4. Click “connect” and you’re in! If you see yourself managing files on your server frequently, you can save the connection as a bookmark (Bookmarks > New Bookmark).

How to setup FTP with Cyberduck – username and password

4. Upload and Download Files

Once you’re logged in, you’ll see a list of all the files in the home directory for your user. You can browse through them the same way you do the filesystem on your own computer. Click on the small arrows next to folders in order to expand and contract them. Right-click on any folder or file for a list of actions you can perform on the file (or in the folder you clicked in)

How do I upload files?

Uploading files is easy, just right-click, select “Upload” and browse your local filesystem for the file or folder you need to move to the server. Downloading works much the same. Take note that the default “Download” action automatically pulls files down to your default download folder. If you want to rename or choose the location of the download, select “Download As”.

What is synchronize?

A powerful feature you should be aware of is the “Synchronize” action. Suppose you have a local copy of your website and that you’ve edited a handful of files within different folders of your website. Instead of individually uploading each updated file, you can simply right-click the top-level folder for your site and synchronize it with your local copy. Everything you changed will be updated. In the process, you can un-check any files that you don’t want updated.

5. Cyberduck Special: Modifying Files

One of the most powerful features that Cyberduck offers is the ability to edit remote files with your choice of software on your local system. Technically you aren’t editing the file while it’s on the server, as Cyberduck downloads the file, opens it with your preferred editor, then uploads the file when you save it. However, this all happens automatically. The effect is such that you can modify your website almost as conveniently as if it were on your local system.

One Last Question: What is SFTP?

You might notice the option in CyberDuck to connect with SFTP. This is just FTP but encrypted, i.e. “secure”. If your hosting plan offers SFTP, there’s no reason not to use it.

Conclusion

FTP with Cyberduck is an efficient, easy and powerful way to manage the files on your server. Once you’ve set-up your connection, organizing, renaming and editing your files is almost exactly like doing so in your local file browser, but with “Upload”, “Download”, and “Synchronize” actions to manage files between two systems. Once you’ve made the switch, you’ll probably never use a browser-based file manager again!

WordPress vs. Squarespace

WordPress vs. Squarespace are both reasonably priced options for building beautiful websites. If you’re a photographer, business owner, student, blogger or looking to build your personal portfolio then both WordPress and Squarespace are wonderful. How are WordPress vs. Squarespace different from each other? Which is better?  In this article we will examine the differences — with examples —  of the pros and cons of both WordPress and Squarespace.

What are the benefits of WordPress?

WordPress has been around since 2003. You may know it as a blogging platform, but what else can it do? WordPress is a type of Content Management System ( aka CMS). What’s a CMS? Every website on the Internet needs a place to store and organize content — that’s what a CMS does. When you first login to WordPress the Dashboard you’ll see the WordPress Dashboard, this is where you create new posts, upload photos, edit pages, tags, categories, and monitor your comments, etc.

WordPress Admin Preview

WordPress Stats Preview

WordPress powers 29% of the Internet. That means that 1 in 4 Website, of all the Websites in the world, are WordPress Websites.

There are two types of WordPress sites you can create:

What are the benefits of Squarespace?

Squarespace is a publishing platform for the non-techie. Squarespace is also used by photographers, entrepreneurs, and bloggers. With Squarespace you can easily create a portfolio website, an e-commerce store, or even run your small business. Their claim to fame is their dead simple WYSIWYG (What You See Is What You Get) drag and drop editor that allows you to create your site with fluidity and ease.

With Squarespace, you are required to host directly through Squarespace, while WordPress allows you to host your website on any hosting service (which allows for more customization).

Ease of Use Creating New Content

WordPress is a dead simple platform to use, albeit a powerful one. This is why it continues to be a very popular option for creating and growing websites. To get started all you need to do is simply download the WordPress open source code, host it on a server, choose a theme, and you’re up and running.

Squarespace’s WYSIWYG editor can have your site up and running in minutes. They offer beautiful designs and their simplicity allows for people with non-technical backgrounds to build websites with ease. Due to the “live” nature of the building stages, you can instantly see how your site will operate, which is perfect for the ADD generation.

Look and Feel: WordPress Themes vs. Squarespace Templates

With WordPress you have a plethora of choices available when it comes to themes. Themes are basically how your site looks, feels, and operates. Without knowing how to hard code with HTML and CSS, you just click “apply” and you’re good to go.

WordPress theme examples:

WordPress Theme

WordPress Theme: Shapely

WordPress Theme

WordPress Theme: MedZone

WordPress Theme Example

WordPress Theme: Sentio

Squarespace on the other hand uses something called Templates. For all intents and purposes, they are more or less the same as WordPress’ themes. The aesthetic is perhaps a bit more “modern”.

Squarespace template examples:

WordPress Theme: Cacao

Squarespace template: Forte

Squarespace template: Om

Adding theme extensions: WordPress Plugins vs. Squarespace Content Blocks

Plugins are pieces of software you can install to add or enhance functionality on your WordPress site. There are thousands of free plugins to choose from in the directory. There is the option for paid plugins that provide customer support if need be. Plugins can be great additions and enhancements to your website as the library continues to grow.

Free WordPress Plugin Examples

Free WordPress plugin examples

Squarespace calls their extensions Content Blocks. With these “blocks” you can add information such as text, video, forms, and images. They are fairly similar to plugins, yet are perhaps a bit more intuitive in nature. They too create a more dynamic feel to your domain.

Pricing: Hosting

When considering to go the WordPress or Squarespace route, you’re going to need a place to park your domain. With WordPress, your site will need to be hosted on a server. There are plenty of Web Hosting platforms to choose from such as Bluehost or HostGator. Many of these Web Hosting services provide similar experiences. The good thing is that they’re all fast, reliable, and inexpensive.

With Squarespace on the other hand, hosting is automatically included. In a nutshell, you are the guest and they are the host! If your domain(s) are hosted elsewhere, you have the option to transfer them to Squarespace if you so choose.

Support: The Support Team

Contact SquareSpace Support

Official support articles are provided for WordPress. Other than that you are going to have to rely on searches, blogs, forums, YouTube, and the like. They however do not offer human to human engagement.

 

Much like WordPress, Squarespace has support articles and answers to frequently asked questions. What differentiates it from WordPress is the 24/7 team.

 

 

 

 

 

 

 

 

In Conclusion 

WordPress is the way to go. If you want a more robust platform that offers a “beefier” dashboard then WordPress is your option.

These two platforms offer excellent means to getting a site up and running. Depending on your wants and needs, each can provide something a little different. Both WordPress and Squarespace offer simple solutions for you Web needs. Like anything else, it is a matter or preference.

If you would like to dive deep into WordPress, One Month now offers the course, One Month WordPress. Chris, the teacher for the course, has been using WordPress for 10 years and will surely get you moving in the right direction. He’s created WordPress themes for The Black Eyed Peas, General Assembly, Toyota, Aldo, Agency Sacks, and New York Green Roofs. We hope to see you there!

Bluehost vs. HostGator – Which is The Best Web Hosting?

 

Bluehost vs HostGator

Bluehost and HostGator have been around since the early 2000s and are both great choices for Web Hosting. Each offers a cloud plan that boasts a good mix of reliability, scalability, and performance at very reasonable prices. How do they stack up against each other?

HostGator Cloud Plans

Screengrab of Bluehost Cloud Plans

 

Bluehost vs. Hostgator: Basic Cloud Plans

Host BlueHost Hostgator
Plan Prime Baby Cloud
Number of websites Unlimited Unlimited
Storage Space Unmetered Unmetered
Bandwidth Unmetered Unmetered
Domain name included? Yes Yes
RAM 4 GB 4 GB
Available CPUs 4 4
Local Caching Yes Yes
Introductory Price $8.95/mo. $7.95/mo.
Renewal Price $13.99/mo. $11.95/mo.

How does “unmetered” differ from “unlimited”? Unmetered means that you won’t be charged according to your usage, as long as it remains within reasonable limits. For example, if you want to download and host every Will Ferrell movie ever made you’re likely going to be asked to scale back your usage. Otherwise, you probably don’t need to worry about it.

The features offered by the introductory plans are almost identical (see chart above), save for the price. It’s important to note that introductory prices apply only if you pay up-front for a 3-year plan. HostGator has a slight edge here, but not by much. Before you make a 3-year commitment, consider the following important hosting metrics.

Bluehost vs. Hostgator: Reliability

If you’re paying for a professional hosting service you probably expect your site to always be available. Hence, uptime is an important measure of a host, even though it isn’t often included in the usual list of “what you get for the price”.

Fortunately, hostingfacts.com has been monitoring test websites for Bluehost and HostGator since 2016. For the months measured Bluehost showed an average of 99.96% uptime, while HostGator averaged 99.96%. That’s not much of a difference, so let’s look atthe worst month measured for each service. Bluehost’s worst measured uptime was 99.81%, while HostGator’s was 99.87%. Again, HostGator has a slight edge, but this time it’s practically negligible. The high level of uptime is accomplished by mirroring your data across three devices and implementing a strict failover protocol. For example, if one of the three devices goes down, your data is immediately copied from one of the remaining two to a fourth device.

On top of this service redundancy, both hosts offer an option to create a daily backup of the code that powers your site. For example, if you’re experimenting with a new feature and it breaks your whole site, you won’t have to worry about rebuilding anything. Just a few clicks, and you’ll be able to restore your site to the way it was yesterday. This option is an extra $2.99/mo at Bluehost and $2.00/mo at HostGator.

Bluehost vs. Hostgator: Performance

“Ping speed” is the time it takes a server to receive and respond to the most basic request, which makes it an ideal standard with which to compare services. Thankfully, hostingfacts.com also measured average monthly ping speed:

Ping Speed Overall Average Worst Monthly Average Best Monthly Average
Bluehost 487 ms 705 ms 277 ms
HostGator 470 ms 728 ms 252 ms

HostGator has an edge here, but it’s even more miniscule than the difference in uptime. The chart above shows a difference of about 21 ms. For reference, the average duration of a single blink of a human eye is around 250 ms. Both hosts have lightning fast speeds, even in their worst months.  

Bluehost vs. Hostgator: Ease of Use

On both Bluehost and HostGator, you’ll use cPanel to manage your servers. “cPanel” stands for Control Panel, and is exactly whatyou would expect. At a glance, you can monitor your disk space, memory, and CPU usage, as well as bandwidth transfer for the month. Managing file uploads and applications on your server is all accomplished through a graphical interface that will be familiar to anyone who has spent time with a computer in the last decade (i.e. basically everyone).

You can get a WordPress site up and running in no time with an easy one-click install. If you’re unfamiliar with WordPress, both hosts also offer a drag-and-drop solution. The free version of Weebly is included with all Bluehost and HostGator cloud packages. It’s worth noting however, that if you need extra features, like SSL or payment portals, you’ll end up paying a little bit more, depending on your package and the applications involved.

Bluehost vs. Hostgator: Support

Bluehost and HostGator both advertise robust technical support: you can either call or chat online 24/7. However, user reviews of customer support are mixed, ranging from “no problem, perfect service” to “waited two hours and they couldn’t help me”. Unfortunately, the negative reviews seem a little more common than the positive ones. This is the only real issue with Bluehost or HostGator. Frankly, at the low price point offered, spotty support shouldn’t be too much of a surprise.

Our advice: stay on the safe side and do some research on whatever it is you want to build before you sign up with either service.

Bluehost vs. Hostgator: Conclusion

Both Bluehost and HostGator are great choices for a beginner website: cheap, reliable, and fast. Although customer support may not be stellar, the tools provided with all cloud accounts should make it easy enough to fulfill just about any of your basic website needs.

Hostgator Winter 2017 Promotion:

  1. Want HostGator for 1 month free? Enter the code “onemonthcode″ for a discount. If you choose the Baby Monthly plan it should go down to only $0.01. Note that after 1 month it will renew for full price of about $8/month. So if you don’t want to keep this after the class then please just cancel it within a month.
  2. (OR) Want HostGator for 30% off the lifetime of your account? Enter the code “golongerplease″ instead. (this is a better deal if you plan on keeping the account for longer than a few months).

 

* Disclosure: One Month uses both Blue Host and Hostgator, and benefits from their affiliate sales program. 

 

30 Most Notable WordPress Sites

WordPress is a content management system (CMS) that gives users an out-of-the-box publishing solution. In plain English? WordPress helps you make a blog really easily.  

Every WordPress site runs the same code behind the scenes (aka. the core). But on the front-end you can customize your site a million different ways with WordPress themes. You can even learn how to make your own custom themes from scratch.

Because millions of beginners are using WordPress, it’s associated with blogging for newbies. But, WordPress is way more than your best-friend’s cat blog. 

In fact, WordPress powers 28% of the Internet. That’s because both Fortune 500 Companies and basement bloggers want the same things: easy publishing, good SEO, and options for organizing content. The best blogs do this real well. Some of the top sites on the Internet are using WordPress VIP. This is the company’s enterprise CMS, for users who get regular, massive traffic and need ongoing support.

I want to show you 30 famous WordPress sites. Once you see the power, customization, and scalability of WordPress you’ll be inspired to create your own WordPress site immediately. Look, you may not be Beyonce (unless you are, then please leave a comment),  but you can share the same WordPress code used by Beyonce.

1. Beyonce

Beyonce's website runs on WordPress

Bey’s site runs on WordPress. So bow down, reader.

2. Facebook Newsroom

Facebook uses WordPress

One of the top sites on the Internet uses WordPress for their news and press statements.

3. TED

TED blog uses WordPress

The TED blog offers “Further reading on ideas worth spreading.”  You can’t help but think you can change the world after visiting.

4. BBC

BBC uses WordPress The BBC, according to its website, is on a mission “To enrich people’s lives with programmes and services that inform, educate and entertain.”

5. The Walt Disney Company

The Walt Disney Company uses WordPress

 

The official home of the world’s most famous mouse.

6. USA Today

USA Today uses WordPress

 

“Latest world & breaking news”

7. Variety Magazine

Variety Magazine uses WordPress

 

Variety’s tagline is “The Business of Entertainment.”

8. Quartz

Quartz uses WordPress

 

“News, videos, ideas, and obsessions from the new global economy”

9. Nate Silver’s FiveThirtyEight

 

Nate Silver’s FiveThirtyEight uses WordPress

 

The site “uses statistical analysis — hard numbers — to tell compelling stories about politics, sports, science, economics and culture.” It’s journalism for math geeks.

10. Lifehack

Lifehack uses WordPress

 

Lifehack is a site for “Helps, Tips, and Guidance to improve all aspects of your life.”  Read this while brushing your teeth and listening to a podcast at 2X speed in the shower.

11. Black America Web

Black America Web uses WordPress

 

This REACH media site “was formed in January 2003 to develop, acquire and partner in quality media and marketing opportunities targeting the African American community and lifestyles.”

12. Toyota (Brazil)

Toyota uses WordPress

 

The company that says “Let’s go places” uses WordPress for its Brazilian division.

13. New York Post

New York Post uses WordPress

 

“Current & Breaking News | National & World Updates”  

14. Perez Hilton

Perez Hilton uses WordPress

 

This is a site for “Hollywood’s Hottest Celebrity Gossip.” If you’re too proud to grab a tabloid on the grocery line, you can get it all here, judgement-free.

15. Blog Maverick (Mark Cuban)

Blog Maverick uses WordPress

 

Blog Maverick is “The Mark Cuban Weblog,” a place where the NBA franchise owner, Shark Tank personality, and serial entrepreneur posts his ideas about business, politics, and life.

16. Official LinkedIn Blog

Official LinkedIn Blog uses WordPress

 

This is the blog for the world’s most famous networking site.

17. VentureBeat

VentureBeat uses WordPress

 

“Tech news that matters.”

18. Gigaom

Gigaom uses WordPress

 

“The industry leader in emerging technology research”

19. Spotify News

Spotify News uses WordPress

 

Spotify promises “Music for every moment.”

20. Forbes

Forbes uses WordPress

 

Forbes is a business magazine and now a sprawling online content company.

21. The Blog of Author Tim Ferriss

The Blog of Author Tim Ferriss uses WordPress

“Tim Ferriss’s 4-Hour Workweek and Lifestyle Design Blog” houses his writing as well as his popular podcast.

22. PEOPLE.com

PEOPLE.com uses WordPress

 

“Celebrity News, Exclusives, Photos and Videos”

23. Dow Jones

Dow Jones uses WordPress

“Business & Financial News, Analysis & Insight”

24. WIRED

WIRED uses WordPress

 

The famous tech news site started by Kevin Kelly runs on WordPress.

25. Mozilla

Mozilla uses WordPress

 

The Mozilla blog is a place to get “dispatches from the Internet frontier.”

26. Fortune

Fortune uses WordPress

 

When you want to know what’s going on with your money, go to this WordPress VIP site.

27. TechCrunch

TechCrunch uses WordPress

 

“The latest technology news and information on startups”

28. Boing Boing

Boing Boing uses WordPress

 

Boing Boing is “a directory of mostly wonderful things.”

29. The Official Star Wars Blog

The Official Star Wars Blog uses WordPress

 

Well wookie here. The blog for this classic film runs on WordPress.

30. Skype

Skype uses WordPress

 

Topping off the list is the blog for the communication company Skype. Hopefully this site can tell me if I should look at my web cam or the person while on my next call.

HTML vs CSS

So you want to build a website?

Learning how to construct a website is much like learning a new language.

The fundamental languages for building a website are HTML and CSS.

Let’s break each one down individually, then see how they work together…

HTML stands for Hypertext Markup Language. Think of HTML as the skeleton or tree of the document. It’s what gives structure to the site in its most basic form. We do this by tags, elements, and attributes. Whether you want headings, lists, images, or links, HTML can do all of that.

We can start with a basic HTML document.

<!DOCTYPE html>
 <html>
 <head>
     <title>Welcome to One Month</title>
 </head>
 <body>
     <h1>Big Willie Style</h1>
     <img src=https://i.imgur.com/Vr37Ac3.jpg>
 </body>
 </html>
HTML vs. CSS

HTML code example

Lets dissect this a bit further. The !DOCTYPE tells the browser what type of document it is. In this case, HTML. In the head section you can see the title tag. This is where you would put the title of your website. Inside the body, you could add an H1 tag. Think of a newspaper headline such as Hello World!. This would be inside the H1 tags like so <H1>Hello World!</H1> which would translate to the largest heading tag there is.

Tag, you’re it!

HTML is the structure of a website. In order to give your website form you’re going to need to use some HTML tags (also referred to as HTML elements).

<h1>, <h2>, <h3>, <h4>, <h5>, <h6>
These tags are for headings, much like a newspaper. h1 being the largest.

<p>
Paragraph

<br>
Line break

<img>
The img tag is for inserting images into your site.

<video>
The video tag is for adding videos, of course.

<a href>
We use this for adding links, stands for anchor.

<strong>
Bold

<em>
Italic

<ul>
unordered lists

<ol>
ordered lists

Note: Both <ul> and <ol> have children tags <li>

If you are writing a list either unordered <ul> (bulleted) or ordered <ol> (numbered) they will surely need items in the list. To do this we use the list <li> tag. The <li> is a child of either the <ul> or <ol> tags. So an example of favorite 90’s sitcoms would look something like this…

<ul>
  <li>Seinfeld</li>
  <li>Friends</li>
  <li>Frasier</li>
  <li>Growing Pains</li>
</ul>
HTML vs. CSS

HTML code example

CSS

CSS stands for Cascading Style Sheet.

If HTML is the structure of your page, CSS is the style. It’s not one or the other, rather they work together at all times.

Without CSS, your websites would look rather boring and dull. In CSS there is a property and a value. Property is what you want to change, property value is what you want to change it to.

Let’s look at our example again…just with HTML.

CSS code example #1

CSS code example #1

Remember the <body> tag in HTML? We can correspond the same body with CSS. Let’s say we want to change the color of the body. It would look something like this…

HTML with CSS code together

HTML with CSS code together

body {
 background: red;
 }

Gettin’ jiggy wit it.

Or lets say we want to change the color and size of just the text in the body.

It would look like this…

body {
 font-size: 25px; background: blue; color: orange;
}

Learn HTML vs. CSS with a blue background Or suppose you just wanted to hone in on the H1 tag. You could do something like this…

H1 {
 color: blue; font-size: 100px
}
 Learn HTML vs. CSS with a blue background
 

With color, we can do it simply such as the examples above. Another option is to use hexadecimals (#RRGGBB).

In order for us to take advantage of CSS, our HTML needs to be linked to it. We do this by…

<link rel=”stylesheet” type=”text/css” href=”main.css”/>

As you can see, there is a relationship (rel) between HTML and CSS.

Another way we can implement CSS is using the font-family property. This is the same thing as using a text editor to change the font.

We do this by…

h1 {
 font-family: Arial
 }
 HTML vs. CSS 
 

Case Study: CSS Zen Garden

A wonderful showcase of the relationship between the two languages is CSS Zen Garden.

CSS examples with CSS Zen Garden

CSS Zen Garden demonstrates the power of CSS. Clicking the links to the right will load the same exact page with one discernible difference, the CSS. This clearly highlight what CSS can do by changing the look and feel of the page.

Here are some examples from the garden…

CSS Zen Garden examples

CSS Zen Garden examples

CSS Zen Garden examples

Tutorial highlights

So what have we learned?

  • We’ve learned how to construct a barebones website using HTML.
  • HTML can exist on its own, CSS cannot, but together is where the magic happens.
  • The more we learn about each language, the more creative we can be with our design. This is the fun part. With the structure in place, the choices are endless when it comes to what we see.
  • HTML is the noun, CSS is the verb. Let’s make sentences!

Learn more HTML and CSS now! 

If you would like to continue your journey with HTML and CSS here are a few resources:

What is Coding?

print “Hello, World!”

We’re going to talk today a little bit about coding. Specifically we’ll answer the question, What is Coding? and also cover a little of what happens when we code. Before you begin, though, I want you to right click on your browser window and choose the View Page Source option. What you just got was a view of that web page’s code. Which is to say, you got a glimpse of the language that tells your computer how to make that webpage look the way it looks.

The first time I actually looked at the code in a browser window was a revelation to me. Here was the internet in the internet’s own voice. Sure I didn’t understand most of it, but I could pick out snippets of words and phrases I understood. I knew a font name or two, understood pixel sizes more or less. It was alien to me, but I could understand how it worked. Here was the language that my computer spoke. Or so I thought.

If you’re planning on learning to code at all, it’s worthwhile thinking through what exactly is happening when you code, what exactly it means when we say someone is coding, what the difference is between coding vs. programming, what languages you might end up coding in, and how to get started coding.

<style type=awesome_sauce.css>

So let’s start briefly with what coding isn’t. I mentioned above that when I first saw the source code of a web page, I thought that I was looking at the language my computer spoke. This is one of the common ways of talking about what coding is. It’s not exactly true, though.

Your computer doesn’t really understand the nuances of language. In fact, the only terms your computer understands well at all are “Yes” or “No.” Imagine talking to a group of engineers, but your phone has gone out and your radio only works one way. You can only communicate with a flashlight. One flash for yes, two for no. It might take a while, but eventually, the bridge will get built and all will be happy.

This is how a computer communicates with people. The language the computer speaks is binary code, a mathematical language that looks like a line of ones and zeros. Essentially the computer understands “Turn this function on. Turn this other one off,” and nothing else. So unless you’re typing strings of ones and zeros into your text editor (which, you’re not…just no), you’re not really writing code in a computer language.

OK, so if writing code doesn’t amount to writing in the computer’s own language, what are you doing?

Well, think about it like this. You don’t speak binary and the machine can’t come close to understanding human languages. So in order for you to tell the machine what to do, you have to have a translator who can act as an intermediary. This is code. It’s a form of writing that isn’t binary, but that the computer can understand.

For most of the programs you’re likely to write, the code is actually several steps removed from the binary code. You write in a high-level code that’s closer to human language, and programs built into your computer translate them down into binary. It’s like if you needed to speak to someone who knew Mandarin, but the only translator you could find spoke only French. You would need another translator to translate from English to French and then they can translate to Mandarin.

What sort of blows my mind about all of this is that it works somehow. We have programs translating programs to a machine that only speaks binary, which is an insanely complicated prospect. Yet here I am typing human words on my binary speaking computer.

Luckily, when you start coding, it’s not really important to understand how this all works as long as you understand what programming is you’re headed in the right direction. The important takeaway is that coding is writing in an intermediary language that both you and your computer can communicate in.

<{Coding=Programming} YES>

When I was growing up, my dad was a computer programmer and all the people he worked with were programmers. This was how I understood people who wrote for computers for a long time. They were programmers.

Then it seemed like there was a shift in either terminology or industry, and suddenly people who wrote for computers were coders. Which has prompted me to wonder whether there is a difference between the two activities.

A little research shows me that it depends greatly on what school of thought you subscribe to. Several forums I have looked through say that there really isn’t a difference between a coder and a programmer. It’s a difference in terminology rather than activity.

The egalitarian in me likes this way of looking at things. However, Jonah Bitautas makes an interesting argument that there is a real difference that amounts to a matter of scale. Essentially, a coder is someone who writes language for computers. A programmer is someone who oversees the writing of a whole program — that is to say, a whole project’s worth of code writing.

It’s the difference, I think, between calling someone literate and calling someone a writer. A literate person can write and read words, but doesn’t necessarily see how they work together into elegant paragraphs and sentences. A writer, on the other hand, understands how those words work together in a larger, more complex structure and can maneuver through that structure with intelligence and choice.

Like I said, I love the egalitarian quality of the first definition, but I’m all for preserving a sense of difference between the activities, if for no other reason than it gives people something to reach for. I have written code, but I am not yet a coder. When I am a coder, I think I’d love to be able to look forward to the day when I can call myself a programmer.

Languages

There are literally dozens of languages a person can learn to code in. Although a few languages are all-purpose (or multipurpose), most serve a specific function. CSS, for example, functions primarily to make things look pretty on the web. JavaScript, a relatively old language, exists to make web pages more functional. Depending on what you want to accomplish, you’re going to have to choose a specific language. There are a few common ones that you might want to work with, especially if you’re just learning to code.

HTML

When I asked you a minute ago to open the source code for this web page a minute ago, it took you to lines of code written in HTML. Short for Hypertext Markup Language, HTML works as sort of the bones of the Internet. It tells web pages what should be displayed where and how they’ll fit within a given style sheet. It also tells your browser where to look for content like images and videos that you might want to include, as well as where to find the style sheet you’re working off of.

CSS

CSS is the stylesheet. If you open up a CSS file, you’ll see a lot of references to font families, colors, bold or not, etc. When your browser loads a page, the HTML tells it “Hey. Make this part of the page look like a header. OK?” It also says “Here’s where to look to understand what a header should look like.” This will always be a CSS file.

Javascript

Javascript is a language that brings interactivity to the web. It’s a language that makes things happen on a web page. When you click a button on a web site, for example, it’s JavaScript that makes the button seem to click. The controls for video players on the web, animations, etc. Most of these are JavaScript of some other dynamic programming language. In a later post, I’m going to be writing about front-end versus back-end work using Javascript and PHP. Which is to say, programming for the user of the website versus programming for the server of the web site. More on that to come.

Ruby on Rails and Python with Django

We actually already have a baller post on the differences between these two framework languages, which is worth ducking away to read when you’re done here. The short version is that Ruby on Rails (Rails to its friends) and Python (named for Monty Python) are both programs that are used to develop web applications. Which is to say they create programs that allow web pages to do things at a high level of interactivity. If you want to, for example, build a bot to automatically create an automatic payment system for your clients, you’ll probably use one of these. They’re great programs to learn to work with because they are extraordinarily versatile and there is a lot of extant code for you on the web to begin playing with this.

Learning to Code

There are actually a lot of parallels between learning to code and learning to write well (as there should be, since coding is just writing in computer languages). I think the most frustrating of these is that, as with learning any language, you have to be willing to spend time practicing it and doing it poorly.

There are some people who are just natural coders, sure, just as there are people who can speak Italian after listening to a couple of operas. For the vast majority of us, though, learning to code is a process that involves trying to tell the computer to do something, having the computer come back with an error message (which is its way of shrugging its shoulders and saying “Qua?”), and then trying a new way of doing the same thing.

The most successful self-taught coders I know are people who regularly take on coding challenges just to see what they can make. I know a guy who writes Python bots for Twitter as a sort of hobby. He’s made some things that are pretty awesome to behold.

Coding languages now are dynamic and complex enough that often times if you can conceive of a thing you want to have happen on the web, you can do, and probably there’s a web site that can help you work out how.

There are also many ways to find classes that can get you started on the basics of whatever program you want to make. That means there’s really no reason to not start playing a bit. There’s no risk to trying something (you can’t break the web; Kim Kardashian already did that), and the gains are huge. So go for it. Conceive a bot, conceive a web page, conceive a font family, and get started.

Understanding HTTP Basics

One thing that always surprises me when teaching a security class to developers is how little they understand about HTTP. Sure, everyone knows that a HTTP 500 error is a problem on the server, and 404 means the file is missing, but few actually understand how HTTP works at a lower level. This is critical to understanding most web application vulnerabilities and will help you be a much better web developer, so lets dive in!

Skip this if you have a decent understanding of HTTP. Otherwise, it will be a great refresher. First, let’s start with the super-basic before we quickly move into more advanced topics — HTTP. HTTP is the protocol that is used by web servers and browsers to communicate. HTTP is based on a request and a response.

When the you type in a webpage URL in the browser and hit Enter, the browser makes an HTTP GET request. Here is an example of what that looks like:

There are a few things worth noting in the screenshot above. Let’s take a look at the first line. First, the HTTP “verb” is GET, which is generally used to retrieve a document, image, or other internet resource. We will look at the other verbs in a minute. Next, the webpage being requested is “/home”. Anything after the “?” are parameters, which come in key/value pairs. Finally, the HTTP version is provided, which in this case is 1.1.

The rest of the lines are HTTP headers, which do things like: tell the webserver what website to retrieve, based on the domain (Host:); report the user-agent and acceptable encoding and language; and other browser-specific options.

From a security perspective, we need to be aware that parameters in the querystring get logged all over the place, so we want to make sure nothing sensitive or important goes there (think passwords, email addresses, or API keys).

Another HTTP request is the POST, which works almost exactly like the GET request except the parameters are sent in the body of the request instead of on the first line. This is good for security since these values are generally not logged by default on webservers, proxies, or other software as the request is transmitted over the internet.

Other request types are OPTIONS, HEAD, PUT, DELETE, and a few other more obscure values, however GET and POST are the most common. Let’s take a look at the HTTP response:

HTTP responses are similar to HTTP requests in that they are text based and contain HTTP headers. On the first line above, the HTTP response returns the HTTP status code. When everything is going right, this will be 200 OK. Below are the list of status codes which can be returned:

After the status code, some server headers are sent, including information about the type of server and software it’s running. Next, the body of the response contains the data we requested, which is generally HTML, CSS, Javascript, or binary data like an image or PDF.

Since HTTP is a text-based protocol, it’s easy to make HTTP requests. You can try this by running telnet and connecting to an HTTP server and then manually making a HTTP GET request. Try it yourself by typing “telnet google.com 80”.

Then, when telnet connects to the webserver, you can manually make an HTTP request by typing:

“GET / HTTP/1.0 (return, return)”

This should return the HTTP response for the homepage.

That’s it, now you know the basics of HTTP. Here are the important parts:

  • HTTP is a text based protocol
  • HTTP is made up of requests and responses
  • HTTP responses have a status code

Now that you have that covered, check out some hacking tools in the blog post Web Hacking Tools: Proxies.

What People Really Mean When They Say “I Want To Learn How To Code”

There are two important things to know about coding education:

  1. Most people don’t actually want to learn to code
  2. Learning to code doesn’t mean one thing anymore

It’s important to know these two things because otherwise the way we teach people about coding is wrong, and people won’t learn.

The first point I’ve seen over and over again. People who tell me they’re going to learn how to code, then they start learning, and they think it’s boring as hell.

I call it the coding fallacy. People think they want to learn to code but what they really want to do is build a product.

When we think about it, this should be fairly obvious. Knowledge of code in and of itself is not valuable if you can’t do anything with it. So for most people the biggest motivation for learning to code is building something (although a close second is getting a higher paying job).

That brings me to point number two. Learning to code doesn’t mean the same thing anymore.

It used to be that in order to code you had to know almost everything about computers (hence the term “Computer Science”). Then things were abstracted to the point where you didn’t really have to dive into certain topics unless you really needed to. For example, as a web application developer at this point I need to know very little about system administration because it’s mostly done for me by tools like Heroku and Amazon Web Services.

So when people say they want to learn how to code, most teachers start where they assume they should (where they always have), with data types, the various structures of a language, and help students develop a deeper understanding of computers.

The problem is that’s not what people want. They want to build something. And we should no longer take for granted that in order to build something you have to learn everything about computers or even coding in general.

For example, if someone is already working with a great back-end developer, it would make sense to just teach them the front-end, because that’s going to be the most useful thing for them. They will actually get what they want done faster, and they will be able to learn the back-end at a later point in time. By doing so we reduce the cognitive load on the student and enable him or her to learn faster.

There’s so much that could possibly be taught about coding that we need to start identifying at least semi-complete subsets that someone could learn. At the very least I want to pose the following important distinction I’ve learned:

  1. Web development
  2. Non-web development

When you’re developing for the web you specifically have to deal with:

  • HTML
  •  CSS
  •  Routing
  • Databases
  • Hosting/DNS
  • Application structure

There’s a lot here to learn. And most of it is pretty irrelevant to non-web development (except databases and application structure obviously).

The way I see it, most coding education involves a bait and switch. It goes like this:

Student: “I want to learn how to code.” (But what they really — but don’t know enough to ask — is I want to build a web or mobile application.)

Teacher: “Okay let’s start with data types.”

Student: “…”

(2 weeks later)

Teacher: “Now we can design efficient algorithms.”

Student: “But I just wanted to make a cool-looking website!”

As teachers, we need to recognize that when people say they want to learn how to code, they often really mean that they want to build a web or mobile application.

That’s because to them, that’s what coding IS. It’s all they’ve ever been exposed to about coding. The problem is that they don’t know how to ask for it! So we shouldn’t just be taking everything they say at face value. It’s our job as educators to read between the lines.

I remember watching a play a few years ago in which a priest says that you have to tell the truth even in difficult circumstances. The person he’s talking to asks: “but what if someone asks you a question and you know the truth will hurt them?” The priest responds: “When someone asks you a question, answer the question they are REALLY asking.”

In education as well, you have to read between the lines to figure out what people really want. If they’re asking some specific thing, you have to guide the person towards what’s going to lead them towards their ideal learning experience.

So it’s up to us as educators and as experts to guide people in the right direction and not just let them flounder. If we can do this, then we can empower a lot more people to do amazing things.

As a student: learn what you want to learn.

One of the best things you can do in your own learning adventures is learn a little bit about a lot of things — so you know what you want to dive deeper into later. Here at One Month, we’re launching a Learning Library in the new year, a free resource of videos, essays, and information on topics related to coding, design, and entrepreneurship. It is your first 1 minute, 1 day and 1 week of content for any subject.