Your SlideShare is downloading. ×
Web design 1& 2 lesson outline
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×

Saving this for later?

Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime - even offline.

Text the download link to your phone

Standard text messaging rates apply

Web design 1& 2 lesson outline

635
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
635
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
0
Comments
0
Likes
0
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 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/