GENERAL
Web Design Standards: 10 Best Practices on the Top 50 Websites – crucial for visitors’ expectations, clarity and usability.
https://www.orbitmedia.com/blog/web-design-standards/
Strategic web design
https://www.smashingmagazine.com/2008/11/strategic-design-6-steps-for-building-successful-websites/
From the above sites:
“Do not avoid these conventions just to be different or unique. Instead, follow these conventions.
Provide consistent navigation”.
“Web design isn’t art. It involves a whole collection of different skills”
“You must think strategically”.
9 Guidelines for Exceptional Web Design, Usability, and User Experience http://blog.hubspot.com/blog/tabid/6307/bid/30557/6-Guidelines-for-Exceptional-Website-Design-and-Usability.aspx#sm.00004ia5hnemvf1fu5j13bhn8jimn
User friendly website:
10 Usability Heuristics https://www.youtube.com/watch?v=hWc0Fd2AS3s 6 min.
Is Your Website user Friendly? https://www.youtube.com/watch?v=7s-5zt1ODlE
7 principles that make your website more engaging
https://www.youtube.com/watch?v=3J85SUZFXNM&list=PLLcXeRHxsVPdHCyiHvKgUSxGGbH_cIALu
Copying vs. Stealing in Web Design
Video https://www.youtube.com/watch?v=kKxtD2tWqDk
Advice from hiring manager - Web Design Portfolio Do's and Don’ts:
Video https://www.youtube.com/watch?v=dtOiDBRVH58
Font Sizes in Responsive Design: px vs. pt vs. em vs. percent?
https://blueprintdigital.com/font-sizes-in-responsive-design
EM: Relative to the font-size of the element (2em means 2 times the size of the current font)
Usually 1 em =16px
Converter px to em http://pxtoem.com/
And http://www.w3schools.com/cssref/css_pxtoemconversion.asp
File manager tutorials
https://www.siteground.com/tutorials/cpanel/file_manager.htm
Sitemap in Illustrator https://www.youtube.com/watch?v=IrWQFjXyjhk
Google Web Fonts - A Beginner’s Guide with thorough instructions:
http://restored316designs.com/blog/2016/08/22/how-to-change-your-fonts-using-google-fonts/
Goggle fonts videos:
https://www.youtube.com/watch?v=1S3ga5Or5ec 18 min
https://www.youtube.com/watch?v=kUZXOKr4EAc 1 min
https://www.youtube.com/watch?v=r_7hTYnwwGU 6 min
https://www.youtube.com/watch?v=F3gvIqko4iE 3 min
HTML
Good site for beginners (most of it)
How to start in HTML and web design: http://www.computerhope.com/starthtm.htm
(Make as exercise in class to learn themselves)
Learn HTML in 12 Minutes
https://youtu.be/bWPMSSsVdPk
What is HTML5
http://www.elated.com/articles/7-lovely-things-about-html5-markup/
http://www.1stwebdesigner.com/html5-introduction/
HTML 5
Videos, 6 parts:
https://www.youtube.com/watch?v=9gTw2EDkaDQ
Getting started
https://www.youtube.com/watch?v=YcApt9RgiT0 Text
https://www.youtube.com/watch?v=CGSdK7FI9MY Images and hyperlinks
https://www.youtube.com/watch?v=4I1WgJz_lmA Audio and Video
https://www.youtube.com/watch?v=dDn9uw7N9Xg New Semantic Elements
https://www.youtube.com/watch?v=CPcS4HtrUEU CSS page layout (12 minutes)
All above videos with codes: http://www.littlewebhut.com/html5
Multipage website, 4 parts:
Part 1 https://www.youtube.com/watch?v=2kEJR7HWodU
Part 2 https://www.youtube.com/watch?v=Klf6M6REWzw (instead of typing the same links on all pages, it is easier to make all 4 links on one page, and then copy/paste on other three pages)
Part 3 https://www.youtube.com/watch?v=fhigeuFPVm8
Part 4form (later) https://www.youtube.com/watch?v=l-t85yDh0tc
Video - Linking pages located in different folders
https://www.youtube.com/watch?v=ERAvM777f-Y
Video - Anchor hyperlink (target to different sections on the same page) https://www.youtube.com/watch?v=bCt2FnyY7AE
SCC
Learn CSS in 12 Minutes:
https://www.youtube.com/watch?v=0afZj1G0BIE
Instructions for students: 12 minutes tutorial which covers all CSS material that we learned so far. I would like you to watch it and practice coding, and then tell me how helpful it was. Of course, you should stop the video many times because he talks too fast not giving time to digest materials, as I usually do. But that's the beauty of learning with video – you can stop and repeat it as many times as you need
It is very fast, therefore give it as HW
Videos (4 parts), CSS for beginners
https://www.youtube.com/watch?v=Wz2klMXDqF4 Applying Styles (13 min - home).
https://www.youtube.com/watch?v=6rKan6loNTw Selectors (8 min.)
https://www.youtube.com/watch?v=NR4arpSA2jI Box models
https://www.youtube.com/watch?v=W5ycN9jBuBw Positioning
All above videos http://www.littlewebhut.com/css/tutorials/ (including drop-down menu)
Difference id and class https://css-tricks.com/the-difference-between-id-and-class/
Inline Vs Internal Vs External CSS https://vineetgupta22.wordpress.com/2011/07/09/inline-vs-internal-vs-external-css/
Video - Menu with CSS, convert list into horizontal bar.
https://www.youtube.com/watch?v=qfXW3U-HQ6A
(With a useful mistake)
Very good CSS practical short quizzes (exercises) to give in class or home, or use for quizzes:
https://www.w3schools.com/css/exercise.asp?
W3School Videos
CSS Box Model https://www.youtube.com/watch?v=lPm8lK4C7nc
CSS Navigation Bar https://www.youtube.com/watch?v=Uz0rJ4jaHJc
CSS Font https://www.youtube.com/watch?v=9jnaJgHg_IU
CSS Border https://www.youtube.com/watch?v=xfkMw3mGHAc
CSS Background https://www.youtube.com/watch?v=wFjEZw-FF_w
JAVA SCRIPT and PHP
How to Make a HTML Contact Form with PHP (11 minutes)
https://www.youtube.com/watch?v=Jb7dehE9DqI
PHP contact form with files
https://www.youtube.com/watch?v=VtUME695Deo
PHP contact form
https://www.youtube.com/watch?v=1CkBsGhux9U
Interactive Moving Background http://www.onextrapixel.com/2014/04/09/create-an-interactive-moving-backgroundobject-that-reacts-to-viewers-cursor/
LIGHTBOX
Here is the site with files to download and the step-by step instruction of how to use it:
http://lokeshdhakar.com/projects/lightbox2
Script: http://www.ajaxblender.com/demos/lightboxes/lightbox-2-lokesh-dhakar/index.html
Video tutorial: https://www.youtube.com/watch?v=1ysjh_HZ1do
CODING PIECES
CSS full referencehttps://developer.mozilla.org/en-US/docs/Web/CSS/Reference
CSS responsive viewport
https://www.w3schools.com/css/css_rwd_viewport.asp
Several examples of basic HTML5 and CSS3:
http://code.tutsplus.com/tutorials/html-5-and-css-3-the-techniques-youll-soon-be-using--net-5708
FLEXBOX_______________________
Video Flexbox Tutorial (very good one)
https://www.youtube.com/watch?v=k32voqQhODc
Codes for the above video: http://codepen.io/anon/pen/VKxRoE?editors=1100
W3school https://www.w3schools.com/css/css3_flexbox.asp
Flexbox Grid http://flexboxgrid.com/
Visual Guide to CSS3 Flexbox Properties https://scotch.io/tutorials/a-visual-guide-to-css3-flexbox-proper
Maintain Scroll Position of large HTML page when client returns:
<a href="#" onclick="history.go(-1)">Go Back</a>
https://stackoverflow.com/questions/16388772/maintain-scroll-position-of-large-html-page-when-client-returns
More than one class per a single element:
http://webdesign.about.com/od/css/qt/tipcssmulticlas.htm
For example:
In CSS:
.center {text-align: center;}
.red {color: right;}
and in HTML: <p class="center red">The text in this paragraph is centered and red</p>
Shorthand properties are CSS properties that let you set the values of several other CSS properties simultaneously. Using a shorthand property, a Web developer can write more concise and often more readable style sheets, saving time and energy.
https://developer.mozilla.org/en-US/docs/Web/CSS/Shorthand_properties
selector{
font: [font-style] [font-variant] [font-weight] [font-size]/[line-height] [font-family];
}
Examples:
p{
font: italic small-caps bold 20px/2 Futura;
}
background: url(images/bg.gif) no-repeat top right;
font: italic bold .8em/1.2 Arial, sans-serif;
background: #000 url(images/bg.gif) no-repeat top right;
border: 1px solid #000;
margin: 10px 5px 10px 5px;
margin: 5em 1em 3em (top, right and left, bottom)
margin: 5% 1% (top and bottom, right and left)
CSS White space
white-space: nowrap;
http://www.w3schools.com/cssref/pr_text_white-space.asp
https://developer.mozilla.org/en-US/docs/Web/CSS/white-space
http://www.w3schools.com/cssref/pr_text_word-spacing.asp
Word spacing animation: http://www.w3schools.com/cssref/tryit.asp?filename=trycss_anim_word-spacing
Cool Hover Effects with CSS3 (text and button goes on an icon)
http://tympanus.net/codrops/2011/11/02/original-hover-effects-with-css3/
Text over images on hover
http://css-workshop.com/hover-box-text-over-images-on-hover-and-more/
Image hover overlay
https://www.w3schools.com/howto/howto_css_image_overlay.asp
Tooltips
https://www.w3schools.com/css/css_tooltip.asp
Full Page Image
https://www.w3schools.com/howto/howto_css_full_page.asp
HOW TO …. – more cool things (I don't know most of it)
https://www.w3schools.com/howto/
Full screen Background Image Slideshow with CSS3
https://tympanus.net/codrops/2012/01/02/fullscreen-background-image-slideshow-with-css3/
(more effects down the page)
CSS Transitions and Transforms for Beginners https://robots.thoughtbot.com/transitions-and-transforms
CSS Background Animations (sky) https://davidwalsh.name/background-animation-css
Buttons transitions and animations
http://www.w3schools.com/css/css3_transitions.asp
http://www.w3schools.com/css/css3_animations.asp
http://www.w3schools.com/css/css3_buttons.asp (lower on the page)
Codes for responsive grid system (different number of columns)
http://www.responsivegridsystem.com/
CSS Gradient http://css-tricks.com/css3-gradients/
FOR ME
Margin-collapse https://www.sitepoint.com/web-foundations/collapsing-margins/
Hexagons
http://stackoverflow.com/questions/26114920/responsive-grid-of-hexagons
Good parallax, but not for web portfolio
http://www.sbs.com.au/theboat/
http://restaurantleduc.com
WEB DESIGN
Good sites with site of the day http://www.awwwards.com
Tips for Designing a Clean Yet Colorful Website
http://www.noupe.com/design/opposites-attract-tips-for-designing-a-clean-yet-colorful-website-88829.html
How to start the web design project? With implementing Strategic Design
http://www.smashingmagazine.com/2008/11/05/strategic-design-6-steps-for-building-successful-websites/
Get the perfect website layout in 27 steps
What is hot today? Analyze and follow styles, backgrounds, fonts, colors, etc.
http://www.creativebloq.com/web-design/steps-perfect-website-layout-812625
Color http://blog.jimdo.com/the-psychology-of-color-in-web-design-part-2/
Mockups http://psd.fanextra.com/articles/a-comprehensive-guide-to-mockups-in-web-design/
Retina Display or Retina Support websites provide sharper imagery.
Is it good for websites?
https://www.dbswebsite.com/blog/retina-displays-good-for-web-design/
EXAMPLES
STUDENTS’ PORTFOLIO
http://abaodesign.com
http://thomasma.co
PROFESSIONAL PORTFOLIOS
http://www.carolinebrickell.com/
NO WAY!
http://www.lanceitp.com/