This is about choosing your first web project and getting started with it. We're going to use Jekyll to practice, using this Jekyll site as a resource.
First, grab a book. They're useful and give you a reliable reference. The book I recommend1 is Learning Web Design: A Beginner's Guide to HTML, CSS, JavaScript, and Web Graphics. If you're looking for a book that is more likely to be in libraries check out Designing With Web Standards 3rd Edition. This book is great, and helped bring about a bunch of great changes in the internet over the past decade. However, the third edition came out in 2009, and the web changes fast. Some of the information is outdated.
Since you have a book you can read about what the internet is, what HTML and CSS and Javascript are, and look up more terms and such. If you have a question about something, check the book first (its answers will be better) and if you can't find it there, Google it. Building web pages is mostly about looking things up on Google.
HTML and CSS, the most basic parts of a modern web page, are just text files. You can open them with TextEdit, the text editing program that comes with OSX. But if you're planning on actually making web pages, using a text editor designed for writing code is very useful.
I recommend Sublime Text. It's what I use to write code every day. It's free to download, but it will nag you about purchasing it every so often. I suggest using the free trial of it until you can't stand the nag screen anymore.
You also will need to install Command Line Tools for OSX, which you can download here. They are free.
You will need a Github account. Go to Github and create an account.
Then set up Git. The easiest way to set it up is to download and install the Github application, available here 2. This application will only work on recent versions of OSX. If you don't have the most recent, or one version behind I would recommend upgrading. It will make things easier.
While it would be really cool if everything could be done via a graphical interface, to get this site running we are going to have to use the terminal. 3
After you have installed the Github application, open up a terminal window. To do this, open Spotlight, the Mac OSX search utility in the upper right hand corner of the screen (command + spacebar is the standard keyboard shortcut) and type 'Terminal' into the search field.
This will bring up a terminal window. You should have a cursor in a blank screen.
Type sudo gem update --system to update your ruby gems. You will be prompted for a password. Enter your password.
Then do gem install jekyll4
Whew! You've now got everything installed to create the rockingest website evuh!
Now you need to download the starter site. This has all of the things in it that a website needs, and offers a chance to mess around, learn things and get a feel for web sites. It's tough to create a site without some basis, and this site will provide the base for you to work from.
When you have the starter site downloaded you can run the site locally and start learning to code!
The github repository is located at https://github.com/sethherr/jekyll-starter
Download this with the mac github app. Sorry for my brevity, I will expand on this soon.
It's a good practice to set up any webpage you are working on on your own computer (this is known as locally), so you can work on pieces of it without worrying about whether you are breaking the webpage people are visiting. With Jekyll, the site generator this starter site is made with this is easy. It might seem daunting, but compared with some of the other options... this is a pleasant cakewalk.
Open up the terminal again, using Spotlight or whatever you find easiest.
Type cd
Then drag in the folder where the sample site is. This should make something that looks like:
cd /Users/seth/Sites/personal-sites/starter-site
Press enter to submit that path. This changes your "current directory" to the directory of the files for the website.
Type jekyll --server and hit enter again.
It's up and running!
Press control + c to stop it.
Visit the webpage your computer is serving at http://localhost:4000/jekyll-starter/index.html!
If you create new posts, add them to the _posts directory. Follow the naming conventions of the two posts in the _posts directory. Add the this to the top of any posts you create:
---
layout: post
title: [yer title here]
---
You can look at the two sample posts to check out the way it's done.
The header is located at /_includes/header.html. The code that does this is at the top of both the post and homepage layout and looks like this: {% include header.html %}. If you have a footer or some such thing you want to be on all the pages, this is the way to do it.
We're using github pages! It's free! You already have a github account! It's not too confusing!
If you want to be able to view the page online make sure you push everything to a branch titled gh-pages. Then you will be able to access the site at:
http://[your github username].github.com/[the name of the github repository]
However, you will have to change the 'baseurl' in _config.yml to whatever you choose to have as the name of your repository.
If you want to use your own domain name (so people don't visit the site at the above address, but instead go to http://snakes-and-maps.com or whereves) there is an explanation here.
Good luck.
I choose this book because it was listed on css-trick's bookshelf. Chris Coyier, the man behind css-tricks, is awesome and I highly recommend his site as a resource. I also purchased this book and it's a very comprehensive book with good information. However, I haven't fully read the book. I haven't read any programming book cover to cover in quite at least 5 years–things change too quickly, and it's easier to find the information you need on the internet–but without the ability to evaluate what a good source is, you could be lead astray, so a book is a good starter option. ↩
If you have trouble installing the github app, check here for their documentation. ↩
I will explain how to do everything you need to do as clearly as possible, so you probably don't need to know more about the terminal. But if you run into issues, or are curious about the terminal—what it means, what it does, and how to use it—I'd recommend this article. ↩
If you have some trouble with these things, feel free to read more about how it works here ↩