1. with Matt Ladner | @netfuel

2. Who is a one hour
website for?

3. This website is NOT for:
• A client that needs several page
templates.
• A client that is unclear about what
they need in a website.
• A designer that has the time and
budget to build a highly customized
experience.

4. This website is for:

5. This website is for:
MICAH!
• Has a limited time and budget.
• Needs it to work well on mobile
devices and tablets.
• Needs a clean and professional way
to present himself in a rather hassle
free website.

6. Lets gather some
resources.

7. We have the following:
• Images of Mica’s work.
• His contact information.
• He has given us some examples of
sites he likes and we have some
ideas for esthetics.

8. We need the following:
• To pick a framework to build the
site on.
• To build the layout of the site.
• Add buttons and calls to action.
• Test the site.

9. What is a framework?
The framework is a pre built set of
code that aims to alleviate the
overhead associated with common
activities performed in Web
development.

10. What makes it awesome?
It allows us to layout and build
websites extremely fast without having
to start from scratch. It also lets us
make things adjust for mobile and
tablets very easily.

11. Show me some...

12. Less Framework
http://
lessframework.com/
• Is awesome for
experienced web
monkeys.
• Has great typography.
• Works great on all
devices.

13. 1140 CSS Grid
http://cssgrid.net/
• Is easy for beginners.
• Accommodates large
screens.
• Comes with a
Photoshop template for
you to build on.

14. Skeleton Framework
http://getskeleton.com/
• Simple Simple Simple.
• Looks Great out of the
box.
• Has lovely typography.

15. Hundreds more
exist.

16. So back to this guy:

17. He needs a site to
get him a job!
• Lets list a small portfolio of
work.
• Some featured work.
• List his skills
• Have some contact
information.

18. Lets get down
to business

19. Stop...
Resource Time!

20. Coda for Mac
http://panic.com/coda/
Any text based editor will
do. I prefer Coda because
of its clips feature.

21. Coda Clips
http://coda-clips.com
Lots and lots of prebuild
clips for you!

22. JumpCut for Mac
http://
jumpcut.sourceforge.net/
Any text based editor will
do. I prefer Coda because
of its clips feature.

23. Ditto for Windows
http://sourceforge.net/projects/ditto-
cp/
I have not tested this but
it comes highly
recommended and is
open source (free)

24. Google Web Fonts
http://www.google.com/webfonts
Hundreds of awesome
fonts for use on ANY
website.

25. HTML Ipsum
http://html-ipsum.com/
Ipsum for HTML Code.
Clips are included with
the tutorial.

26. CSS3 Buttons
A library of pre built and
coded buttons. Just
attach the style sheet!

27. Subtle Patterns
http://subtlepatterns.com/
Awesome, Subtle
backgrounds that repeat
with ease! They also
include a photshop file.

28. Wufoo
http://wufoo.com/
Really simple forms for
any website.

29. Type Kit
http://www.typekit.com
Awesome web fonts from
the worlds bes foundries.

30. slideshare:
resources download:
test site URL:

31. @netfuel
( if your brave )
@lokion
( if your smart )