![Page 1: Launch a Landing Page over Coffee - 20140201 · LAUNCH A LANDING PAGE OVER COFFEE Wifi network: workspace6 Wifi password: creative6! Workshop resources:](https://reader036.vdocuments.us/reader036/viewer/2022071213/602fef46562ba8524e10b9c9/html5/thumbnails/1.jpg)
LAUNCH A LANDING PAGE OVER COFFEE
Wifi network: workspace6 Wifi password: creative6 !
Workshop resources: www.launchsteps.com/workshops/landing_page_over_coffee_2014_2_1/ !
Let’s connect on Twitter: @dwightgunning
![Page 2: Launch a Landing Page over Coffee - 20140201 · LAUNCH A LANDING PAGE OVER COFFEE Wifi network: workspace6 Wifi password: creative6! Workshop resources:](https://reader036.vdocuments.us/reader036/viewer/2022071213/602fef46562ba8524e10b9c9/html5/thumbnails/2.jpg)
• What’s a website and how do they work?
• Organise your web domain and hosting
• Set up your machine to design and build
• Design and build the site
• Launch the site
![Page 3: Launch a Landing Page over Coffee - 20140201 · LAUNCH A LANDING PAGE OVER COFFEE Wifi network: workspace6 Wifi password: creative6! Workshop resources:](https://reader036.vdocuments.us/reader036/viewer/2022071213/602fef46562ba8524e10b9c9/html5/thumbnails/3.jpg)
WHAT’S A WEBSITE AND HOW DO THEY WORK?
Image credit: http://www.simplimation.com/blog/5/how-the-web-works
![Page 4: Launch a Landing Page over Coffee - 20140201 · LAUNCH A LANDING PAGE OVER COFFEE Wifi network: workspace6 Wifi password: creative6! Workshop resources:](https://reader036.vdocuments.us/reader036/viewer/2022071213/602fef46562ba8524e10b9c9/html5/thumbnails/4.jpg)
HTML
![Page 5: Launch a Landing Page over Coffee - 20140201 · LAUNCH A LANDING PAGE OVER COFFEE Wifi network: workspace6 Wifi password: creative6! Workshop resources:](https://reader036.vdocuments.us/reader036/viewer/2022071213/602fef46562ba8524e10b9c9/html5/thumbnails/5.jpg)
CSS
![Page 6: Launch a Landing Page over Coffee - 20140201 · LAUNCH A LANDING PAGE OVER COFFEE Wifi network: workspace6 Wifi password: creative6! Workshop resources:](https://reader036.vdocuments.us/reader036/viewer/2022071213/602fef46562ba8524e10b9c9/html5/thumbnails/6.jpg)
JAVASCRIPT
![Page 7: Launch a Landing Page over Coffee - 20140201 · LAUNCH A LANDING PAGE OVER COFFEE Wifi network: workspace6 Wifi password: creative6! Workshop resources:](https://reader036.vdocuments.us/reader036/viewer/2022071213/602fef46562ba8524e10b9c9/html5/thumbnails/7.jpg)
• What’s a website and how do they work?
• Organise your web domain and hosting
• Set up your machine to design and build
• Design and build the site
• Launch the site
![Page 8: Launch a Landing Page over Coffee - 20140201 · LAUNCH A LANDING PAGE OVER COFFEE Wifi network: workspace6 Wifi password: creative6! Workshop resources:](https://reader036.vdocuments.us/reader036/viewer/2022071213/602fef46562ba8524e10b9c9/html5/thumbnails/8.jpg)
DOMAIN AND HOSTING RESOURCES• Domain name finder: http://domai.nr/
• Domain name purchase: http://www.gandi.net/
• Amazon Web Services: http://aws.amazon.com/
![Page 9: Launch a Landing Page over Coffee - 20140201 · LAUNCH A LANDING PAGE OVER COFFEE Wifi network: workspace6 Wifi password: creative6! Workshop resources:](https://reader036.vdocuments.us/reader036/viewer/2022071213/602fef46562ba8524e10b9c9/html5/thumbnails/9.jpg)
SETTING UP THE DOMAIN NAME
![Page 10: Launch a Landing Page over Coffee - 20140201 · LAUNCH A LANDING PAGE OVER COFFEE Wifi network: workspace6 Wifi password: creative6! Workshop resources:](https://reader036.vdocuments.us/reader036/viewer/2022071213/602fef46562ba8524e10b9c9/html5/thumbnails/10.jpg)
• What’s a website and how do they work?
• Organise your web domain and hosting
• Set up your machine to design and build
• Design and build the site
• Launch the site
![Page 11: Launch a Landing Page over Coffee - 20140201 · LAUNCH A LANDING PAGE OVER COFFEE Wifi network: workspace6 Wifi password: creative6! Workshop resources:](https://reader036.vdocuments.us/reader036/viewer/2022071213/602fef46562ba8524e10b9c9/html5/thumbnails/11.jpg)
MACHINE SETUP RESOURCES• Sublime text editor : http://www.sublimetext.com/
![Page 12: Launch a Landing Page over Coffee - 20140201 · LAUNCH A LANDING PAGE OVER COFFEE Wifi network: workspace6 Wifi password: creative6! Workshop resources:](https://reader036.vdocuments.us/reader036/viewer/2022071213/602fef46562ba8524e10b9c9/html5/thumbnails/12.jpg)
• Open your terminal application
• Create a directory for your website projects
![Page 13: Launch a Landing Page over Coffee - 20140201 · LAUNCH A LANDING PAGE OVER COFFEE Wifi network: workspace6 Wifi password: creative6! Workshop resources:](https://reader036.vdocuments.us/reader036/viewer/2022071213/602fef46562ba8524e10b9c9/html5/thumbnails/13.jpg)
• Download and install a helper tool called “virtualenv”
!
• Activate the new virtual environment
!
• Create a new website project
$ curl -O https://pypi.python.org/packages/source/v/virtualenv/virtualenv-1.11.2.tar.gz!$ tar xvfz virtualenv-1.11.2.tar.gz!$ cd virtualenv-1.11.2!$ python virtualenv.py ~/websites/cactus-venv
$ source ~/websites/cactus-venv/bin/activate!$ pip install cactus
$ cd ~/websites/!$ cactus create www.launchsteps.com!$ cd www.launchsteps.com!$ cactus serve
![Page 14: Launch a Landing Page over Coffee - 20140201 · LAUNCH A LANDING PAGE OVER COFFEE Wifi network: workspace6 Wifi password: creative6! Workshop resources:](https://reader036.vdocuments.us/reader036/viewer/2022071213/602fef46562ba8524e10b9c9/html5/thumbnails/14.jpg)
• What’s a website and how do they work?
• Organise your web domain and hosting
• Set up your machine to design and build
• Design and build the site
• Launch the site
![Page 15: Launch a Landing Page over Coffee - 20140201 · LAUNCH A LANDING PAGE OVER COFFEE Wifi network: workspace6 Wifi password: creative6! Workshop resources:](https://reader036.vdocuments.us/reader036/viewer/2022071213/602fef46562ba8524e10b9c9/html5/thumbnails/15.jpg)
DESIGN AND BUILD RESOURCES• http://www.getbootstrap.com/
• http://bootswatch.com/
![Page 16: Launch a Landing Page over Coffee - 20140201 · LAUNCH A LANDING PAGE OVER COFFEE Wifi network: workspace6 Wifi password: creative6! Workshop resources:](https://reader036.vdocuments.us/reader036/viewer/2022071213/602fef46562ba8524e10b9c9/html5/thumbnails/16.jpg)
DESIGN AND BUILD RESOURCES• http://www.getbootstrap.com/
• http://bootswatch.com/
![Page 17: Launch a Landing Page over Coffee - 20140201 · LAUNCH A LANDING PAGE OVER COFFEE Wifi network: workspace6 Wifi password: creative6! Workshop resources:](https://reader036.vdocuments.us/reader036/viewer/2022071213/602fef46562ba8524e10b9c9/html5/thumbnails/17.jpg)
• What’s a website and how do they work?
• Organise your web domain and hosting
• Set up your machine to design and build
• Design and build the site
• Launch the site
![Page 18: Launch a Landing Page over Coffee - 20140201 · LAUNCH A LANDING PAGE OVER COFFEE Wifi network: workspace6 Wifi password: creative6! Workshop resources:](https://reader036.vdocuments.us/reader036/viewer/2022071213/602fef46562ba8524e10b9c9/html5/thumbnails/18.jpg)
• Deploy the site to Cactus
!
• Browse to www.launchsteps.com
$ cactus deploy!$ Amazon access key (http://bit.ly/Agl7A9): xxxxxxxxxx!$ Amazon secret access key (will be saved in keychain): xxxxxxxxxxxx!$ S3 bucket name (www.yoursite.com): www.launchsteps.com
![Page 19: Launch a Landing Page over Coffee - 20140201 · LAUNCH A LANDING PAGE OVER COFFEE Wifi network: workspace6 Wifi password: creative6! Workshop resources:](https://reader036.vdocuments.us/reader036/viewer/2022071213/602fef46562ba8524e10b9c9/html5/thumbnails/19.jpg)
LAUNCH A LANDING PAGE OVER COFFEE