Web Design Course

Get Started. It's Free
or sign up with your email address
Rocket clouds
Web Design Course by Mind Map: Web  Design Course

1. Intro

2. Three Pillars of Modern Web Design

2.1. HTML5

2.2. CSS3

2.3. JavaScript

3. Design Workflow

3.1. Creative Brief

3.1.1. see template file

3.2. Keyword research

3.2.1. Infogrpahic

3.2.2. Google Keywords Tool

3.3. Layout Sketch

3.3.1. Moqup wireframe tool

3.4. Design Spec

3.4.1. Color scheme

3.4.2. Fonts

3.4.3. Style consistent with industry

3.5. Create website layout in DW

3.6. Add content

3.6.1. Text

3.6.2. Images

3.7. Add Styles

3.7.1. CSS Stylesheet

3.8. Add interactivity

3.8.1. jQuery

4. HTML5 Basics

4.1. HTML Page Structure

4.1.1. <!doctype> declaration

4.1.1.1. html

4.1.2. <html> tag

4.1.2.1. <head> section

4.1.2.1.1. meta tags

4.1.2.1.2. Styles

4.1.2.1.3. Scripts

4.1.2.2. <body> section

4.1.2.2.1. HTML code

4.1.2.2.2. Scripts

4.2. Tags

4.2.1. Layout

4.2.1.1. <div>

4.2.1.1.1. CSS

4.2.2. Text

4.2.2.1. <h1>...<h6>

4.2.2.2. <p>

4.2.2.3. <ul>, <ol>

4.2.2.3.1. <li>

4.2.2.4. <strong>

4.2.2.5. <em>

4.2.3. Forms

4.2.3.1. <form>

4.2.3.2. <input>

4.2.3.2.1. type=

4.2.3.3. <label>

4.2.3.4. <button>

4.2.3.5. <fieldset>

4.2.3.5.1. <legend>

4.2.4. Tables

4.2.4.1. <table>

4.2.4.2. <tr>

4.2.4.3. <td>

4.2.4.4. <th>

4.2.5. Other

4.2.5.1. <a>

4.2.5.1.1. href=

4.2.5.1.2. id=

4.2.5.2. <img>

4.2.5.2.1. src=

4.2.5.3. <span>

4.2.5.4. <br>

4.2.5.5. <hr>

4.2.5.6. <!-- COMMENT -->

4.2.6. Attributes

4.2.6.1. id=

4.2.6.1.1. Once per page

4.2.6.2. class=

4.2.6.2.1. Many per page

5. CSS3 Basics

5.1. Style

5.1.1. Selector

5.1.1.1. What does the style apply to?

5.1.1.1.1. HTML tag

5.1.1.1.2. Anything with a specific Identifier

5.1.1.1.3. Anything with a specific Class

5.1.1.1.4. Compound

5.1.2. Property:

5.1.2.1. e.g. color

5.1.3. Value

5.1.3.1. e.g. red

5.2. CSS reset

5.3. Properties

5.3.1. Layout

5.3.1.1. float

5.3.1.2. clear

5.3.2. Text

5.3.2.1. font-family

5.3.2.2. font-size

5.3.2.3. font-weight

5.3.2.4. font-style

5.3.2.5. color

5.3.2.6. font-variant

5.3.2.7. line-height

5.3.2.8. text-transform

5.3.2.9. text-align

5.3.3. Box Model

5.3.3.1. width

5.3.3.2. height

5.3.3.3. padding

5.3.3.4. border

5.3.3.5. margin

5.3.4. /* comment */

6. What is an Integrated Design Environment?

6.1. IDE

6.1.1. WYSIWYG or Design View

6.1.1.1. Displays preview of page

6.1.2. Code Generator

6.1.2.1. HTML generator

6.1.2.2. CSS3 creation tool

6.1.3. Site Manager

6.1.3.1. Organize files

6.1.3.2. Rebuild links

6.1.4. FTP

6.1.4.1. Puts files on server

7. Web Page Layout

7.1. Short history

7.1.1. iFrames

7.1.2. Table-based

7.1.3. CSS-based

7.2. Who cares?

7.2.1. Google

7.2.1.1. Evaluation now downgrades pages using out-of-date web design

7.3. Layout flow

7.3.1. Top to bottom

7.3.2. Unless we modify it

7.3.2.1. CSS

7.4. Interaction design

7.4.1. Navigation

7.5. User testing

7.6. Examples

8. Interaction Basics

8.1. JavaScript

8.2. jQuery

8.3. jQuery Plugins

8.4. Forms

8.4.1. PHP

8.4.2. ZOHO

9. Course Objectives

9.1. Understand the basics of web design

9.2. Create web sites and pages in DreamWeaver

9.2.1. Understand and create HTML tags

9.2.2. Understand and apply CSS styles

9.3. Create interactive page elements using jQuery

9.4. Create and optimize images in FireWorks

9.5. Understand search engines and page optimaization

10. Images

10.1. Theory

10.1.1. Vector vs Bitmap

10.1.2. Colors

10.1.3. Aliasing

10.2. File types

10.2.1. GIF

10.2.2. JPG

10.2.3. PNG

10.3. Tools

10.3.1. FireWorks

10.3.2. PhotoScape

11. Types of sites

11.1. Brochure

11.1.1. Credibility

11.1.2. Information

11.2. eCommerce

11.2.1. Product catalog

11.2.2. Shopping cart

11.2.3. Payment gateway

11.3. Listings

11.3.1. Realty sales

11.3.2. Auto sales

11.3.3. Rentals

11.4. Directories

11.4.1. Products

11.4.2. Services

11.5. Community

11.5.1. User signup/login

11.5.2. User profiles

11.5.3. User communication

11.6. Blog

12. What makes a good web page?

12.1. Strong call to action

12.2. Short, punchy copy

12.3. Strong supporting images

12.4. Don't create "spammy" pages