Modern Web Design Workshop

By Adam Kaplan and Stephanie Briones

In this three part workshop, we're going to be covering the basics of building a mobile first responsive layout, applying simple visual design and selecting typefaces for the web. For our project, we will be creating a blog using Jekyll.

Schedule

####Friday, March 21 In our first workshop, we will cover setting up a blog using Jekyll and adding the foundation of our mobile first layout.

####Friday, March 28 In part two of our workshop, we will continue to refine our mobile first layout, focus on working with web type and discuss how to best use color on the web.

####Friday, April 4 In our last workshop, we will take a closer look at the details of our design and explain how you can easily host your blog on GitHub Pages.

Requiements

• Laptop running Linux, Unix, or Mac OS X
• Ruby and Git Installed
• GitHub Account
• Text Editor (TextMate, Sublime, VIM)

Resources

• Ruby
• Git
• Jekyll
• GitHub Pages
• Liquid
• Markdown Basics
• Normalize.css
• Mobile first responsive design

Setup Jekyll

Create a new repo

yourusername.github.io

Clone the repo

git clone [email protected]:yourusername/yourusername.github.io.git

Change directories

cd yourusername.github.io

Install Jekyll

gem install jekyll

Create new blog

jekyll new blog

Move directory

mv blog/* ./

Delete blog folder

rm -rf blog

Start the server

jekyll serve -w

Visit

localhost:4000