The document outlines a web design video lesson plan consisting of several parts: 1) integrating template layouts and adding navigation bars using HTML and CSS, 2) developing page content like forms and color schemes, 3) creating a web banner in Photoshop, 4) lessons on adding and styling divs, and 5) tutorials on navigation bars and CSS text tools. It also includes additional resources on fonts, layouts, code checkers, HTML5 tools, and mobile development.

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/