REQUIRED MATERIALS TO USE
1. Drop box class folder (I will make a special folder for each of you, but I need your email to send you an invite)
2. USB
3. PDF book: HTML and CSS: Design and Build Websites
4. Or/and PDF book: Learn to Code HTML and CSS
5. Learn webpage layout with CSS
6. HTML Handout
7. CSS Handout

FREE PROGRAMS FOR WORKING ON WEBSITES
For working at home. You can download and use:
BBedit (for Mac)
Text Wrangler (for Mac)
Notrpad++ (for PC)
Sublime Text (for Mac and PC)
Brackets (for PC)
(my personal preference is Dreamweaver, but it is up to you. Besides, it is not free)

DREAMWEAVER TUTORIALS
Adobe Dreamweaver CC quick tutorial for Beginners (11 min)
Adobe Dreamweaver short tutorials (by Adobe)
Adobe Dreamweaver CC for Beginners 7-Hour Web Development Course

For Later:
Connecting your server with Dreamweaver
Uploading files to server via Dreamweaver

SUBLIME TEXT
If you decide to use Sublime Text, here is the hint:
Quickly Start an HTML File in Sublime Text
1. To start a new HTML page, first create a new file in Sublime Text and save it with the .html extension. This will set the syntax of your document to HTML.
2. Type ! (an exclamation point) and hit Tab to expand it. Emmet will create the HTML page structure for you, allowing you to get right to work.
Note: This coding tip requires Emmet to be installed in Sublime Text.
To install an Emmet package:
Click Cmd+Shift+P, type Install Package, then search for Emmet and click Enter. Then close that Package Control Messages tab.

Sublime Text Tutorials (watch only first several tutorials)
Intro, Working with text, Managine files, etc.
You can find more tutorials on the Internet

As a last resort you can use Notepad (PC) and TextEdit (Mac). They are available on all computers by default, but you have to type all codes manually; no help with colors or mistakes
Tutorial how to use Notepad (PC) and TextEdit (Mac)

WEB DESIGN, UX/UI
User experience example (UX)
10 Usability Heuristics - metaphors for user friendly web design
Forty UI/UX design examples (good redesigns)
UX and UI, Chicken and Egg
6 Steps To Creating A Knockout Online Portfolio
Principles of Web Design, the look and the structure
Don’t design from your head - save your time!
Difference between Mediocrity and Excellence
Advice To Beginners from The Web Design Community
The perfect website layout from start to finish.
DO NOT list; UX, UI

COLORS
http://html-color-codes.info - HTML Color Picker
http://color.hailpixel.com - Colors on screen, very cool!
http://www.colorcombos.com - Color Combinations and Schemes

FONTS
Google web fonts with codes
Thorough guide to using Google Web Fonts
How to use Google Fonts video tutorial
Font-Face Rule
Font-Face Rule simple explanation
Download best fonts (for @font-face rule)
Most Popular Sans-Serif Fonts
Webfont Generator
DO NOT LIST and Bad Fonts, funny posters about fonts
Never Center Align Paragraph Text

IMAGES
Creating images with transparen background (PNG file)
Choosing the Right Images for your Website
Resize Image for Web
Textbook: HTML and CSS, pages 107 – 119, Three Rules for Creating Images

GRID SYSTEM
A Comprehensive Introduction to Grids in Web Design
960 grid system Video
960 grid system

INFORMATION ARCHITECTURE
Site Structure/Map
Common mistakes of Site Structure
Creating a sitemap using Microsoft Word SmartArt
Creating a sitemap using Illustrator

WIREFRAMES
What is Wireframe?
Wikipedia: Website Wireframe
Why Are They Useful?
Creating Wireframes: Examples, Advice and Tips
Example of not High Fidelity wireframe
      and the mock-up that was built upon it
Example of VERY professional high-fidelity wireframe
At the left are notes for the client; at the right is the mobile version (the site is responsive).
Note: HF wireframes should have the real text, not Lorem Ipsum

MOCKUPS
A Comprehensive Guide to Mockups And tutorials how to create them
Examples:
Webpage mockup
Mockup for mobil, the same webpage. Responsive web design
Four sequential pages (out of 40)
Tutorials:
How to mockup a website in Photoshop CS6 (Video)
Create a Clean Modern Website Design in Photoshop
Design a Flat Website Mockup in Photoshop
You can use different Photoshop techniques; the point is – the mockups have to look ABSOLUTELY similar to the future site.

SEO
If you want people to find your site but don’t want to pay Google $1000 a month or more, you should implement some basic SEO techniques
What Is SEO Video and much more information
SEO for you to implement
SEO extended checklist
SEO 101 Tutorial with Videos
Image optimization for SEO

HTML CODING
Textbook: HTML and CSS: Design and Build Websites
HTML Handout
HTML at w3schools.com (all links at the left)
How to start in HTML and web design
7 Lovely Things About HTML5 Markup
30 Must-See HTML5 Tutorials (and more)
HTML 5 tags Click on each for demo and explanation
New HTML5 Features
HTML 4 vs. HTML 5. Structural elements
6 HTML5 tutorials with text, codes and videos

HTML HYPERLINKS
Hypelinks (From w3school)
Video HyperLinks
Video Hyper Link Pages
Video Hyper Link - image
Video HTML Links links to other pages, downloads and page sections
Video Linking pages located in different folders
Video Anchor hyperlink (target to sections of the page)
Videos Making a simple site with linked pages:
Links: Multipage Website (Part 1)
Links: Multipage Website (Part 2)
Links: Multipage Website (Part 3)

HTML ANCHOR LINKS
(Target to different sections on the same page)
Video Anchor links
Anchor links with page slide option practical
Anchor links with page slide option example

IFRAME
Iframe simple explanation
HTML 5 <iframe> Tag
Iframe simple example

MORE LINKS
Here is the file with the links from this Resourses page and many more in addition: web design, HTML, CSS, coding pieces: File with more links

CSS CODING
CSS Demo
CSS for beginners
CSS Handout
CSS properties
CSS examples
Always use the above sites as references (for finding out what CSS can do) explanations and practicing !
Three Ways to Insert CSS
Video Learn CSS in 12 Minutes Starting with wireframe
Reset CSS (by Eric Mayer)
Basics and External CSS
Internal CSS
Inline CSS
Inline Vs Internal Vs External CSS
CSS Selectors with symbols ~ > + and more
The Difference Between ID and Class

CSS Box Model
CSS Box Model Video
Box Model Practice

CSS Positioning, a Comprehensive Look - with practice
CSS Positioning 101
POSITIONING VIDEOS:
Absolute and Relative Positioning
Relative and Absolute Positioning

How to hide an element:
Visibility hidden
Display none

Menu with CSS, convert list into horizontal bar
Example Menu changing a and li colors
Stretching background
CSS Gradients (and more tricks on this site)

ALL CSS EXAPMPLES from w3schools.

CONTACT FORM
Note: PHP file works only online
Example Simple form with HTML5 validation
Example Simple form with Javascript validation
Example PHP file with form
HTML contact forms
Styling contact forms with CSS
Contact form with PHP tutorial
PHP tutorial mostly (if you need it)
Also:
Radio Buttons
Checkboxes
Dropdown Menus

LIGHT BOX
Files to download and the step-by step instruction
Video tutorial
Lightbox example
Lightbox example 2

FANCY BOX
http://fancyapps.com/fancybox
Fansybox zipped files just in case
Fancybox example

MORE GALLERIES
Gallery-Slideshow
Sliding Image Gallery
Zoom Image Gallery
Lightbox-Slideshow (a little complicated)

IMAGE HOVER
Hover example 1
Hover example 2

SIMPLE SLIDESHOW
Simple automatic slideshow with online imajes
Simple automatic slideshow with local images
More slideshows W3 School

ANIMATIONS AND TRANSITIONS
CSS buttons transitions on hover
Keyframe Animation example (more on w3school site)
CSS Animation

WEB HAMBURGER ICONS ANIMATIONS
CodePen: CSS and a little java script
Only CSS, a lot of examples with download files for all examples

MENUS
Dropdown menu
Dropdown vertical menu
Slide down horizontal menu
Slide down menu with submenus
Slide down vertical menu with submenus
Slide right menu using :after Psuedo Element
On click/toggle
On click/tpggle practice

RESPONSIVE WEB DESIGN
Responsive web design basics very thorough tutorial
Responsive web design - easy video
Responsive simple website and flexbox example (two pages, About and Work)
Responsive simple webpage example

FLEXBOX
CSS Flexbox 12 video tutorials
A Complete Guide to Flexbox
Flexbox with content - video

COOL STUFF
Miscellaneous:
Body gradient
Div gradient
Coding a Button with CSS tutorial
Buttons code maker (color, gradient, radius)
Basic Parallax Website With HTML & CSS - easy video
Cool files for you to use - link to dropbox folder (later)