Skip to content

Instantly share code, notes, and snippets.

@dnathanaeljones

dnathanaeljones/01_web_dev_starter_kit.md

Created April 26, 2012 00:00
Show Gist options
  • Star 6 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save dnathanaeljones/2494605 to your computer and use it in GitHub Desktop.
Save dnathanaeljones/2494605 to your computer and use it in GitHub Desktop.
Download ZIP
Web Developer Starter Kit
Raw
01_web_dev_starter_kit.md

Web Developer Start Kit | Vol 1.0

We kick off our very first WDSK volume with an extended tutorial on building and deploying a custom WordPress themed website. Being this is the very first volume, you're not expected to know much about web development. The very fact that you're here, reading this, qualifies you to proceed.

Why?

WDSK's primary purpose is to aid me and few folks as we rebuild our church website from the ground up. Right now, I'm the only one in the group who knows how to do this. By the end of the process, I'm hoping everyone will know how to do it. That's where WDSK comes in: I'll document as much of the knowledge-transfer as possible and make an artifact of it here, where I hope it will useful to anyone interested in learning how to build a website.

We're using WordPress in Volume 1 because it's one of the best avenues available to someone wanting to move quickly into web development without having to learn a billion other things. Once you get upright and walking in it, you can start to learn those billion other things. Eventually, you may move on to other tools as you start getting board with WP and PHP. For now, I hope you'll find it just the thing to get going.

Volume 1 Roadmap

  • Setting up your development environment
  • Wiring things up and playing around with WordPress "out of the box"
  • HTML/CSS 101
  • Project Management 101: From defining goals to hammering out a timeline (client management will have to wait for another volume)
  • Design Global, think Mobile
  • Getting Design Right / Working with a Designer
  • HTML & CSS! with an emphasis on responsive techniques
  • Creating Your Core Templates
  • From Templates to WordPress PHP Files
  • Auxiliary Pages: Search, 404, etc.
  • MetaBoxes and other advanced things
  • RSS & Integration with Social Media
  • Hosting and Initial Push
  • HTML Validation
  • Browser Testing
  • Initial Content! (When's it ready to push live? and other such questions)
  • Go-Live
  • Maintenance techniques
Raw
02_dev_env.md

WDSK 1.1: Setup your Development Environment!

By "your development environment", I mean "everything you need in order to produce and maintain your project on your local machine."

By "setup", I mean "setup".

Components of the WordPress DevEnv

  • A good text editor
  • The latest version of WordPress
  • LAMP/MAMP/WAMP
  • Git
  • A GitHub account
  • Less Compiler

###A Good Text Editor* The more code you write, the more you'll care about having a good text editor. At a minimum, you'll want an editor that allows you to view and switch between all your project files easily.

Though there are free editors out there, I'd highly recommend you invest in either Sublime Text or (if you work from a mac) TextMate. These are editors don't require any fancy knowledge to get started, but they have plenty of advanced awesomeness for you to grow into.

If you can't stomach the cost, fine. Get a free one. Recommendations:

  • NotePad++ Windows only
  • Vim Vim is a very powerful and feature rich editor, but it comes with a high learning curve. Consider yourself warned. That said, many have learned and come to love it.
  • TextWrangler Mac only

These aren't the only good free ones out there, they're just the ones that I've used at one time or another.

###The Latest Version of WordPress Go to wordpress.org and download the latest version onto your machine. I'd recommend setting up folder on your machine called "Wordpress_Versions" and download into that. That way, as you start new projects later, you'll have all your WP downloads all in the same place, each named according to its version.

###LAMP/MAMP/XAMP In order to get WordPress doing its thing locally, you're going to need a local web server running on your machine. You'll need the ability to run PHP (PHP is one of the many computer languages that can be configured to run on a server as part of a web application; it's the one used by WordPress). You'll also need a database (a MySQL database, to be precise).

It's easier than it sounds to get these three things up and running on your machine. Thanks to the awesome community of open source software developers who have made it easy for us.

MAMP: Mac, Apache, MySQL, PHP: Simple Installer WAMP: Windows, Apache, MySQL, PHP: Simple Installer LAMP: Linux, Apache, MySQL, PHP: If you're using Linux, you're probably able to install each of the components on your own. If you're feeling lazy and just want to get started, google for "install LAMP in one command line" include your Linux distribution name as well.

If you're rolling your own LAMP stack, you'll probably want to install (phpMyAdmin)[http://www.phpmyadmin.net/home_page/index.php] to help manage your MySQL databases. MAMP and WAMP should come with it installed already.

Once the *AMP components have been installed, you'll be the proud owner of your very own apache server. Congratulations! Take a quick jog over to the nearest mirror and give yourself a high-five.

The main thing you need to know to get started making web pages is: where is the document root? That is, where is the folder in which you can put files that will get served up to your browser when you point it at http://localhost:(whatever-port-your-server-is-serving-to)?

With MAMP (and I presume WAMP), you can set the document root manually by clicking Preferences > Apache. I'm pretty sure the default LAMP (well, pretty much the default Apache) configuration is /var/www. More info here. You can change it using the DocumentRoot directive (search "DocumentRoot Directive" here for more info).

###Git
Git is a version control system that will serve you nicely as you begin tinkering around with various projects. If you have no idea what I'm talking about when I say "version control", it's time to learn-up!

Download Git, then learn a bit more about it.

###A GitHub Account GitHub is a place of magic and wonder, and you need to be a part of it. It's pretty much the place for storing, viewing, using, and collaborating on open-source code. It can also become the place where you keep your proprietary code as well, but you'll need to upgrade to a paid account for that.

But the main reason you'll want a GitHub account right now is because you'll want to use (and perhaps enhance) my WordPress starter kit which I have on there.

Signup

###Less Compiler Less is a beautiful way to write CSS (and less of it). We'll talk about that later. For now, all you need to know is that you can download a program that will automatically watch and live-compile *.less files to *.css files. Grab the version appropriate to your OS:

Mac: Less.app Windows: WinLess Linux: SimpleLess

Raw
03_hello_wordpress.md

WDSK 1.2: Hello Wordpress!

Buckle your seatbelts! By the end of today's session you'll be running your very own WordPress installation. At least, that's the hope. I mean, everything might crash spectacularly, but at least you're now wearing your seatbelt.

Configure and Start Apache

It's going to be easiest to proceed if we all set up Apache to listen on port 8888. The easiest way to do this is to search your computer for httpd.conf (it will be inside the apache folder you just downloaded and installed along with your (L/W/M)AMP install). Scroll down to to where you see the word "Listen". If it isn't already 8888, change the number after "Listen" to 8888. Now save and close this file. If you're wondering about the significance of what you just did, check out [the wiki article on it](http://en.wikipedia.org/wiki/Port_(computer_networking\)) and this (less technical) overview of network ports in general.

  • WAMP: Click on the WAMP icon in your taskbar (bottom right), and select "start all services"
  • MAMP: Open MAMP and click "Start Servers"
  • Rolled your own on Linux: Su to root, run apachectl start (find more commands here)

Say "Hello World!"

Before we say hello to WordPress, let's say hello to the world! Start by opening up Apache2's document root directory (see the last vol 1.1 for more info on finding the document root) and create a file in it named hello.html. Paste the following text in it:

<!DOCTYPE html>
<html>
	<head>
		<meta http-equiv="Content-type" content="text/html; charset=utf-8">
		<title>Hello World</title>
	</head>
	<body>
		<h1>Hello World!</h1>
	</body>
</html>

Now open your browser and navigate to http://localhost:8888. You should see the words "Hello World!" written in big, bold typeface. If not, be glad you're wearing your seatbelt. Also be glad you have access to google. You know what to do!

Make sure PHP is working

Create a file in your Apache document root called test.php. Copy and paste in the following:

<?php phpinfo() ?>

If PHP has been installed properly, you should get a page that looks looks something like this.

Create a Database

If you're using MAMP or WAMP, or if you have installed phpMyAdmin as part of a LAMP install, go to your local phpMyAdmin page. In MAMP, you can get to this by opening the MAMP application and clicking "Open start page" and clicking on the phpMyAdmin link. With WAMP, there should be a quick-launch link from your WAMP taskbar icon.

The default login should be root/root.

Once you're logged in, you will see a text box with the label "Create a new database". Type in "wordpress_1" and click "Create". Done.

If you're not using phpMyAdmin, you can use the mysql command line tool to create the database. You may have to play/google around to get mysql recognized as a command. Once you do though, check out this reference for what you can do

Copy over and configure Wordpress

Copy the entire WordPress folder you downloaded during last session and paste it into your Apache document root directory. Rename this folder to wptest.

Now fire up http://localhost:8888/wptest. You should see a page that says you need to create a configuration file, and you should have an option to create one with a click of a button. Press the button. Continue to the page where you can enter your database information. Your database is named wordpress_1, your username/password should be "root", your host is "localhost". And it is fine to leave the table name prefix set to the default. Continue.

You'll be brought to a page that enables you to set up your site/blog with a title and all that good stuff.

Hello World! from Wordpress!

Now that you're all set up with your first complete WP install, go back to http://localhost:8888/wptest. You should see the default version of a WordPress blog with it's default first post and Sample Page.

You can access your site's dashboard at http://localhost:8888/wptest/wp-admin. Have fun kicking the wheels a bit on your new installed and running WordPress.

Raw
04_html_css.md

WDSK 1.3: HTML, CSS, Etc!

Hear that sound? It's the Web Document calling! Today, we're going to answer the phone!

Short histories of HTML.

Anatomy of a Web Page

Specs and Such

Building Blocks of Web Page Design

Font, Etc

Lists

Tables

DIVs and SPANs

Forms

Layouts

CSS Concepts and Tricks

Testing, Debugging, Etc

Javascript Quick Introduction

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment