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=UU1DnWfnN37vc9GqUvrfoxgw 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=UU1DnWfnN37vc9GqUvrfoxgw 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=UU1DnWfnN37vc9GqUvrfoxgw&index=78

Two Divs Side By Side

http://www.youtube.com/watch?v=hGd1OMbKtV8&list=UU1DnWfnN37vc9GqUvrfoxgw&index=94

Adding Content to the Box http://www.youtube.com/watch?v=AY7Mwjwgq00&list=UU1DnWfnN37vc9GqUvrfoxgw

Background Images

http://www.youtube.com/watch?v=AY7Mwjwgq00

Aligning Text Imaging http://www.youtube.com/watch?v=2eZJSAw3kz8&list=UU1DnWfnN37vc9GqUvrfoxgw Adding Unodered & Ordered (Also can use W3schools.com) http://www.youtube.com/watch?v=F1ZGBrShuPw&list=UU1DnWfnN37vc9GqUvrfoxgw Addign A Table (Also can use W3schools.com) http://www.youtube.com/watch?v=zvZVDFDqtDQ&list=UU1DnWfnN37vc9GqUvrfoxgw Adding Borders with CSS (Also can use W3schools.com) http://www.youtube.com/watch?v=4WwDrlh7kWg&list=UU1DnWfnN37vc9GqUvrfoxgw Aligning Images http://www.youtube.com/watch?v=49tQVCNzg8M&list=UU1DnWfnN37vc9GqUvrfoxgw 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=UU1DnWfnN37vc9GqUvrfoxgw 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/

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

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

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