1. Module 1: The Modern Web Development & Design
1.1: Idea & Web Concept Development
1. Do you have a good idea for a website?
A. What websites do you use and why?
B. What makes the websites you like engaging?
2. What makes it a good idea?
A. Is it original?
B. Is it useful?
C. Are you a knowledge or content area/expert?
3. How will you organize this idea?
A. Will you use Flow charts or user centered design strategies?
B. Will you use web based organizing tools?
http://www.gliffy.com/uses/wireframe-software/
https://cacoo.com/
C. What is the importance of wire framing your information?
http://www.slideshare.net/nickf/wireframes-for-the-wicked?from_search=2
D. Draw it out on paper? What are the considerations for a prototype?
http://www.slideshare.net/bunky34/design-studios-idea-creation?from_search=6
E. Can you present the idea clearly? (A Prezi or Powerpoint)
F. What code languages will you need learn:
Basic Website Code Template:
http://www.htmlgoodies.com/tutorials/getting_started/article.php/3863271
/How- To-Build-a-Website-HTML-CSS-and-HTML-Editors.htm
http://www.w3.org/Style/Examples/011/firstcss.en.html

2. HTML
http://www.slideshare.net/danieldowns1/html-xhtml-tagsheet-23341252
CSS3
http://www.slideshare.net/andrewjtalcott/css3-cheat-sheet-
2890995?from_search=2
Difference Between Classes & ID’s
http://www.dontfeartheinternet.com/css/dont-fear-specificity
Fonts/Typography For The Web
http://www.dontfeartheinternet.com/css/don%E2%80%99t-fear-web-
typography
4. When thinking about your website what considerations are important to the design
(the look and feel) of your website?
A. Navigation: How will users move around your website? (HTML/CSS/
JavaScript)
http://blog.kissmetrics.com/common-website-navigation-mistakes/
http://www.smashingmagazine.com/2011/06/06/planning-and-implementing-
website-navigation/
B. Colors/Schemes and Themes: What colors will you use? (Color scheme
Generator)
Color Sheme Generator
http://colorschemedesigner.com/
C. Layout Ideas (organization of content): Where will things go in the
layout?(Wire framing and Prototyping)
http://webdesign.tutsplus.com/tutorials/workflow-tutorials/a-beginners-guide-to-
wireframing/
D. Fluid or Fixed Layout-How will your site adjust to different browsers and
views?(pixels or percentages, resolution, style sheets, media queries, Fixed &
Relative Position)
http://www.dynamicdrive.com/style/layouts/item/css-liquid-layout-31-fixed-fluid-
fixed/
http://www.dynamicdrive.com/style/layouts/category/C13/

3. E. Resolutions of Images & Graphics: What sizes will you need to make graphics
and pictures on you web pages? (Photoshop, resizing images, html/css, web
graphics, design concepts, colors)
http://www.learn.columbia.edu/mcah2/pdf/training_resolution.pdf
http://www.techsoup.org/support/articles-and-how-tos/finding-and-using-images-
from-the-web
F. Integration of Multimedia (video, animation, scrolling text etc.): How will you
integrate these and how will they work?(HTML5,Javascript,Embedding)
G. How will you engage the user in a world in which there are so many
distractions on the web? (Multimedia, Browser Support)
H. How will your site be seen by mobile users? How does this influence your
planning (responsive design, Mobile Design)?
Media Queries
http://www.slideshare.net/maxdesign/css3-media-queries?from_search=3
http://mobile.smashingmagazine.com/2013/05/29/the-state-of-responsive-web-
design/
I. What considerations should be made for Search Engine Optimization(SEO)?
http://static.googleusercontent.com/external_content/untrusted_dlcp/www.google.
com/en/us/webmasters/docs/search-engine-optimization-starter-guide.pdf