Web design 1& 2 lesson outline

202 views

Published on

Published in: Technology, Design
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
202
On SlideShare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
3
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Web design 1& 2 lesson outline

  1. 1. Web Design Video Lesson Outline1.Integrate Template Layout HTML & CSSMaking Multiple Pageshttp://www.youtube.com/watch?v=62vVEwAfE4ICSS Style Sheet Creation With HTMLhttp://www.youtube.com/watch?v=cp305F7_fnk&list=UU1DnWfnN37vc9GqUvrfoxgwAdding Nav Bar & Navigation CSS-HTMLhttp://www.youtube.com/watch?v=kabWPemWuLc&list=UU1DnWfnN37vc9GqUvrfoxgw2.Developing Page ContentPlanning Formhttp://www.youtube.com/watch?v=J55l9-f0p2g&list=UU1DnWfnN37vc9GqUvrfoxgwColor Schemehttp://www.youtube.com/watch?v=nLeYtFXHa64&list=UU1DnWfnN37vc9GqUvrfoxgw3. Created Web Banner In Photoshophttp://www.youtube.com/watch?v=f17M1Qfr5k4&list=UU1DnWfnN37vc9GqUvrfoxgw4. Create A Div LessonAdding A Div Inside A Divhttp://www.youtube.com/watch?v=Yg30HXP-weg&list=UU1DnWfnN37vc9GqUvrfoxgwAdding Two Divs On Top Of Eachotherhttp://www.youtube.com/watch?v=RTndm9A8MFg&list=UU1DnWfnN37vc9GqUvrfoxgw&index=78Two Divs Side By Sidehttp://www.youtube.com/watch?v=hGd1OMbKtV8&list=UU1DnWfnN37vc9GqUvrfoxgw&index=94
  2. 2. Adding Content to the Boxhttp://www.youtube.com/watch?v=AY7Mwjwgq00&list=UU1DnWfnN37vc9GqUvrfoxgwBackground Imageshttp://www.youtube.com/watch?v=AY7Mwjwgq00Aligning Text Imaginghttp://www.youtube.com/watch?v=2eZJSAw3kz8&list=UU1DnWfnN37vc9GqUvrfoxgwAdding Unodered & Ordered (Also can use W3schools.com)http://www.youtube.com/watch?v=F1ZGBrShuPw&list=UU1DnWfnN37vc9GqUvrfoxgwAddign A Table (Also can use W3schools.com)http://www.youtube.com/watch?v=zvZVDFDqtDQ&list=UU1DnWfnN37vc9GqUvrfoxgwAdding Borders with CSS (Also can use W3schools.com)http://www.youtube.com/watch?v=4WwDrlh7kWg&list=UU1DnWfnN37vc9GqUvrfoxgwAligning Imageshttp://www.youtube.com/watch?v=49tQVCNzg8M&list=UU1DnWfnN37vc9GqUvrfoxgwAligning Text With Images In HTMLhttp://www.youtube.com/watch?v=2eZJSAw3kz8Adding bold tag,italicize text,adding an image button HTMLhttp://www.youtube.com/watch?v=r-b38qcJewoChanging Font Colors & Size,HR,BR,Hehttp://www.youtube.com/watch?v=R2CLeTtvfLY&list=UU1DnWfnN37vc9GqUvrfoxgw5.Navigation Bars With CSShttp://www.noupe.com/css/100-great-css-menu-tutorials.htmlhttp://css.maxdesign.com.au/listamatic/http://www.izzymenu.com/
  3. 3. 6.CoolCSS Text Toolhttp://csstxt.com/http://csstypeset.com/http://fontstruct.com/http://www.typetester.org/Backgroundshttp://bgpatterns.com/Fontshttp://www.pimpyourfont.com/http://www.1001freefonts.com/AlphaTest.phphttp://www.dafont.com/hand-test.fonthttp://www.webresourcesdepot.com/compare-fonts-online-via-typetester/http://www.fonts.com/http://www.downloadfreefonts.com/Cool Toolshttp://www.mostinspired.com/blog/2010/04/27/30-useful-web-based-applications-for-designers/http://www.smashingmagazine.com/Border Radius CSShttp://border-radius.com/Articleshttp://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. 4. Project Pricinghttp://wakeuplater.com/freelance-lessons/when-to-use-project-pricing.aspxAdvanced CSS Cross Browser Fixhttp://prefixr.com/index.phphttp://www.chromium.org/Home/chromecompatfaqFixed Vs. Fluid Layoutshttp://webdesign.about.com/od/layout/i/aa060506.htmhttp://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 Checkerhttp://www.draac.com/htmltester.htmlhttp://www.htmldog.com/articles/rollovers/html 5 toolshttp://designmodo.com/online-html5-tools/http://smashinghub.com/25-useful-html5css3-tools-cheat-sheets-and-resources.htmhttp://www.dynamicdrive.com/Roll Over Linkshttp://blog.thelibzter.com/easy-rollover-effects-for-image-linksMobile Development
  5. 5. Jquery Mobilehttp://jquerymobile.com/resources/
  6. 6. Jquery Mobilehttp://jquerymobile.com/resources/

×