How to build and launch your first simple website.

This post was previously titled “What (technical things) you should know to get started learning web development.” While my intention in writing this guide was to give the reader a leg up before joining a code school, it fundamentally isn’t more than a guide on building and launching a basic website.

Hey! If I sent you this link it’s probably because you’ve expressed interest in code schools. This article is adapted from an email I found myself sending out to many prospective students. I’m eager and happy to share what I know. You can read about my experience here, just for a bit of credibility. Feel free to reach out to me with any questions or feedback!

There are many more resources online than I list here. In fact, everything that you will learn from a code school you could learn for free somewhere online. HERE’S A GREAT LIST, but it is unordered and relatively unopinionated. It’s compiled by Zed A. Shaw, who produces a huge amount of good, useful, and correct work for people who want to learn to program. He’s also wrong about some things.

THIS IS AN OPINIONATED ARTICLE. I’ve worked for two code schools as a TA, but the writing here does not represent either of their admission guidelines. Most code schools will let you know what their prerequisites are before you even apply. A great many don’t expect you to know anything about programming before you get started.

This article describes fundamental skills for the true beginner learner (e.g. working with the terminal and text editor, HTML, CSS, basic JS, version control, static site creation), and lists resources for learning each of them.

Here’s what you need, like, in a physical sense:
A computer with OSX (Apple) or Linux. If you have Windows, you’ll really gain a lot by switching to Linux, which is a free operating system similar to OSX in many ways. Let me know if this is an issue and I’ll help you out, I’ve done this a couple times! There are many good guides out there, but here are some of them:

Here’s are some programming fundamentals, and resources to start learning them online
First, you must learn to navigate the command-line, which is how nerds interact with computers. The Command Line Crash Course is a great way to do this.

Cool, now let’s get you set up with a text editor. Microsoft Word and Apple Pages are word processors, not text editors. The difference is important for us. I personally use one called Sublime Text 2, which is good but will pester you to buy it. Atom is very similar but free; I recommend it. Download the Atom text editor here.

Now for writing code, the whole point!

HTML, CSS, and JavaScript
Web sites are built using three languages: HTML, CSS, and JavaScript (JS). Generally, HTML is the content of the site, CSS dictates its appearance, and JS is responsible for behavior. That’s the idea, anyways; it’s called separation of concerns. You’ll hear this a lot, but this framework doesn’t always hold true.

Languages like PHP, Ruby, Python, JS, and many others are used for server-side (back-end) code. You have a choice about which of those to use, but they are not the concern of this article. Web sites can only be built with HTML, CSS, and JS.

Khan Academy’s course is really quite good for total beginners. Creating an account to keep track of your progress might be a good idea, but is 100% not necessary. Do:

Much of it is either very simple or irrelevant, but make sure you are comfortable with the “Functions”, “Arrays”, “Objects”, and “Object-Oriented Design” sections specifically in the Intro to JS portion. Don’t get hung up on drawing shapes and animations, but take your time with the other things.

Once you’re comfortable with these three fundamental languages, you’ll be able to build static web pages. We’re gonna get to that real soon. NICE.

Version Control and git
Version control (VC) is how developers save their work. It’s allows users to save many snapshots of the state of a piece of work, so you can do a bunch of work without worrying about overwriting previously existing stuff. VC is weird and complicated, but there’s no way around it. The most common VC tool is called git.

Here are some resources:

You’ll need to be familiar with GitHub, a service that stores version-controlled code for you. Create an account at github.com.

Once you’ve got all this down, start building a Github Pages site. Practically all developers have one, and it can be found at [GitHub username].github.io. Here’s mine! It’s vcolavin.com, but hosted at vcolavin.github.io

To get started, check out Github’s guide to creating a page. Don’t use the automatic page generator as they do; instead create an index.html file in the repository; that file will load at the page’s root directory automatically. Fill that file with HTML, then link up some CSS and maybe even JavaScript to practice and show off your skills!

Here’s some extra credit stuff for HTML and CSS which you may find useful when building your site.


If you’ve done the above and are comfortable with the material, you have, in my opinion, a solid foundation. It is far from being everything you need to become a web developer.
************************************

Here’s some other stuff if you finish that and want to continue learning, or get bored, or want more variety. It’s pretty unorganized.

The request-response cycle, which is the fundamental way computers on the web communicate with each other.
https://en.wikipedia.org/wiki/Request%E2%80%93response

An introduction to Ruby, a nice language for the back-end:
https://www.codecademy.com/courses/ruby-beginner-en-d1Ylq/0/1
 
Object-oriented programming, the principal paradigm used in Ruby:
http://zetcode.com/lang/rubytutorial/oop/
http://ruby.bastardsbook.com/chapters/oops/

Model-View-Controller (MVC) architecture, which Ruby on Rails employs:
Wikipedia
Coding Horror

Ruby on Rails:
Rails for Zombies
Rails Guide

Testing:
Rails Guide

Regex (a horrible language for finding patterns in text):
A good regex tutorial from Zed Shaw.
Rubular, a tool to test your regex as though it were running in Ruby.

Non-technical resources

 

Advertisements

Leave a comment

Filed under Uncategorized

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s