1. Web Design Video Lesson Outline
1.Integrate Template Layout HTML & CSS
Making Multiple Pages
http://www.youtube.com/watch?v=62vVEwAfE4I
CSS Style Sheet Creation With HTML
http://www.youtube.com/watch?v=cp305F7_fnk&list=UU1DnWfnN37vc9GqUvrfoxgw
Adding Nav Bar & Navigation CSS-HTML
http://www.youtube.com/watch?v=kabWPemWuLc&list=UU1DnWfnN37vc9GqUv
rfoxgw
2.Developing Page Content
Planning Form
http://www.youtube.com/watch?v=J55l9-f0p2g&list=UU1DnWfnN37vc9GqUvrfoxgw
Color Scheme
http://www.youtube.com/watch?v=nLeYtFXHa64&list=UU1DnWfnN37vc9GqUvrfoxg
w
3. Created Web Banner In Photoshop
http://www.youtube.com/watch?v=f17M1Qfr5k4&list=UU1DnWfnN37vc9GqUvrfoxgw
4. Create A Div Lesson
Adding A Div Inside A Div
http://www.youtube.com/watch?v=Yg30HXP-
weg&list=UU1DnWfnN37vc9GqUvrfoxgw
Adding Two Divs On Top Of Eachother
http://www.youtube.com/watch?v=RTndm9A8MFg&list=UU1DnWfnN37vc9GqUvrfox
gw&index=78
Two Divs Side By Side
http://www.youtube.com/watch?v=hGd1OMbKtV8&list=UU1DnWfnN37vc9GqUvrfox
gw&index=94

2. Adding Content to the Box
http://www.youtube.com/watch?v=AY7Mwjwgq00&list=UU1DnWfnN37vc9GqUvrf
oxgw
Background Images
http://www.youtube.com/watch?v=AY7Mwjwgq00
Aligning Text Imaging
http://www.youtube.com/watch?v=2eZJSAw3kz8&list=UU1DnWfnN37vc9GqUvrfoxg
w
Adding Unodered & Ordered (Also can use W3schools.com)
http://www.youtube.com/watch?v=F1ZGBrShuPw&list=UU1DnWfnN37vc9GqUvrfoxg
w
Addign A Table (Also can use W3schools.com)
http://www.youtube.com/watch?v=zvZVDFDqtDQ&list=UU1DnWfnN37vc9GqUvrfoxg
w
Adding Borders with CSS (Also can use W3schools.com)
http://www.youtube.com/watch?v=4WwDrlh7kWg&list=UU1DnWfnN37vc9GqUvrfoxg
w
Aligning Images
http://www.youtube.com/watch?v=49tQVCNzg8M&list=UU1DnWfnN37vc9GqUvrfoxg
w
Aligning Text With Images In HTML
http://www.youtube.com/watch?v=2eZJSAw3kz8
Adding bold tag,italicize text,adding an image button HTML
http://www.youtube.com/watch?v=r-b38qcJewo
Changing Font Colors & Size,HR,BR,He
http://www.youtube.com/watch?v=R2CLeTtvfLY&list=UU1DnWfnN37vc9GqUvrfoxg
w
5.Navigation Bars With CSS
http://www.noupe.com/css/100-great-css-menu-tutorials.html
http://css.maxdesign.com.au/listamatic/
http://www.izzymenu.com/

3. 6.CoolCSS Text Tool
http://csstxt.com/
http://csstypeset.com/
http://fontstruct.com/
http://www.typetester.org/
Backgrounds
http://bgpatterns.com/
Fonts
http://www.pimpyourfont.com/
http://www.1001freefonts.com/AlphaTest.php
http://www.dafont.com/hand-test.font
http://www.webresourcesdepot.com/compare-fonts-online-via-typetester/
http://www.fonts.com/
http://www.downloadfreefonts.com/
Cool Tools
http://www.mostinspired.com/blog/2010/04/27/30-useful-web-based-applications-for-
designers/
http://www.smashingmagazine.com/
Border Radius CSS
http://border-radius.com/
Articles
http://www.nngroup.com/articles/top-10-mistakes-web-design/
http://sixrevisions.com/resources/websites_for_web_development/
http://wakeuplater.com/website-building/evolution-of-websites-10-popular-websites.aspx

4. Project Pricing
http://wakeuplater.com/freelance-lessons/when-to-use-project-pricing.aspx
Advanced CSS Cross Browser Fix
http://prefixr.com/index.php
http://www.chromium.org/Home/chromecompatfaq
Fixed Vs. Fluid Layouts
http://webdesign.about.com/od/layout/i/aa060506.htm
http://www.evolutionarydesigns.net/blog/2011/07/18/fluid-vs-fixed-design-which-is-
better/
http://designfestival.com/resizing-fixed-fluid-or-responsive-layouts/
HTML Code Checker
http://www.draac.com/htmltester.html
http://www.htmldog.com/articles/rollovers/
html 5 tools
http://designmodo.com/online-html5-tools/
http://smashinghub.com/25-useful-html5css3-tools-cheat-sheets-and-resources.htm
http://www.dynamicdrive.com/
Roll Over Links
http://blog.thelibzter.com/easy-rollover-effects-for-image-links
Mobile Development

5. Jquery Mobile
http://jquerymobile.com/resources/