umPrinciples of Web Design

Instructor : Wilson Alvarez
Phone : 305-386- 6165
Email : info@wilsonalvarez.com

Week 01

This unit will give students a brief history of the web, an explanation of how the web works, and a basic understanding of core principles that apply to web design and development. It will help them develop criteria for assessing the quality of websites, introduce them to web design trends, common HTMl elements and the concepts of developing a site plan before coding.

SESSION 1A (Tuesday)

  • History of the web
  • How does the internet work?
  • The web standards model – HTML, CSS and Javascript
  • Common HTML terms and elements
  • ✖︎ Class Notes || (Updated with instructor’s notes)

Other links

SESSION 1B (Thursday)

  • What does a good webpage need?
  • Who will be coming to my site?
  • What should my website users do?
  • Common elements
  • ✖︎ Class Notes || (Updated with instructor’s notes)

Class Workshop: Coding Simple Website

  • Setting up our basic html document
  • adding main headline
  • adding sub-headings
  • adding paragraphs
  • adding unordered list for navigation with 3 list items ‘home, about, contact’
  • add links to navigation
  • adding email link to contact navigation item
  • ✎ HTML Starter Page || (Updated with instructor’s notes)

Extra Credit: Basic CSS

  • Create HTML/CSS classes that apply background colors to html elements
  • Float and clear elements to create a basic main content/sidebar nav website layout

 

Week 02

This unit will introduce students into the legalities of sampling images from the web. It will summarize and clarify some copyright laws and show students where to obtain high-quality photo media legally. We will also give them a brief tour of the photoshop application and show them some basic image editing. We will introduce them to Cascading Style Sheets (CSS) for styling and layout.

SESSION 2A (Tuesday)

 


 

SESSION 2B (Thursday)

Continuation from Week 2A

  1. Basic Photo Editing for web
    There are many free online image editors that perform these basic tasks beautifully and cost you a penny. There are literally dozens of free applications out there. These are a few.
    For the purpose of this demonstration we will be using photoshop. But these are simple exercises that you can do to edit and resize your photos. Keep in mind that there are many ways to accomplish any one image editing task in photoshop.

    • Editing pictures.
    • Resizing, resolution, saving multiples versions.
    • Entering text into a picture.
    • Removing backgrounds? Special effects.

       

  2. Finding legal images and inspiration
    Searching for the perfect photo for a web project can be difficult. Most people run to the internet searching for photos, since those images are seemingly free. But many of those photos are copyrighted, and using them without permission can lead to an embarrassing legal confrontation.
    An easy way to avoid this is to select images from Creative Commons stock photography sites:

     

  3. Map your thoughts with MindManagerVISIOWord/Excel,  Design Ideas.

    Exercise: Have the students discuss their individual web page needs, i.e. Have a student explain the department or business to the rest of the partners (the students) and grab individual ideas from all, formulate the menu structure based on your findings.

 

 


 

Week 03

This unit will introduce students to open source frameworks, specifically HTML5 Boilerplate and Bootstrap by Twitter. We will learn why HTML5 BP is so well thought-out in its structure. We will review the Bootstrap framework, discovering how easily it is to create complex web components and studying the CSS behind the bootstrap components. We will learn how to quickly create a HTML5 BOILERPLATE/Bootstrap code base for our new projects using intialzr.

SESSION 3A (Tuesday)


SESSION 3B (Thursday)

POP QUIZ!!!

Guess what folks? I’m throwing you some curve-balls. Tonight we have no lectures, no ranting, no ravings about html and css! You need to build a multiple row, multiple layout website. Fun right!?!

 

Week 04

Bootstrap is a framework of carefully crafted html/css/js components, free to use, for creating websites and web applications. It contains HTML and CSS-based design templates for typography, forms, buttons, navigation and other interface components, as well as optional JavaScript extensions. Bootstrap was developed by Mark Otto and Jacob Thornton while working at Twitter in order torpidly build web apps.

SESSION 4A (Tuesday)


SESSION 4B (Thursday)

 

Week 05

This unit will introduce students to the Bootstrap grid system and teach them how to rapidly put together almost any web page layout.

SESSION 5A (Tuesday)


SESSION 5B (Thursday)

  • Class workshop – More Bootstrap Grid!

 

 

 

Week 06

This unit will teach: students to apply CSS transitions on elements to achieve simple animations, about jQuery and its capabilities, how to select, add and remove classes from HTML elements to activate CSS transitions.

SESSION 6A (Thursday)

  • ✖︎ Class Notes || (Updated with instructor’s notes)

SESSION 6B (Tuesday)

Lets try transitions again! And maybe… a little JQuery.

 

Week 07

This unit will introduce the basic HTML elements necessary to build a web form. And ‘cheating’ at forms by using web services like Wufoo.com. We will also go over planning and wire-framing our websites before coding.

SESSION 7A (Thursday)

FORMS & WUFOO FORMS
Lets talk about forms and SUPER EASY Wufoo forms!

WIRE-FRAMES
Now lets talk about planning and wire-framing our websites before coding!

CLASS WORKSHOP
Review the ‘Final Project Website Requirements‘ below. Sketch out (on paper) the following elements for your final website:

  • Logo placement in layout
  • Navigation elements and placement in layout
  • Main content and sidebar content elements and layout
  • Footer elements
  • Sketch different pages if any part of the layout changes significantly

MANDATATORY HOMEWORK

  • Create or gather all of the content for you website (text, images, etc.)
  • Purchase web domain hosting account. You can pick one out of this consumer ranked list ( Choose a hosting provider)
  • Sign up for a free wufoo account (Sign up here)

SESSION 7B (Tuesday)

 

umPrinciples of Web Design

Instructor : Wilson Alvarez
Phone : 305-386- 6165
Email : info@wilsonalvarez.com

Week 01

This unit will give students a brief history of the web, an explanation of how the web works, and a basic understanding of core principles that apply to web design and development. It will help them develop criteria for assessing the quality of websites, introduce them to web design trends, common HTMl elements and the concepts of developing a site plan before coding.

SESSION 1A (Tuesday)

  • History of the web
  • How does the internet work?
  • The web standards model – HTML, CSS and Javascript
  • Common HTML terms and elements
  • ✖︎ Class Notes || (Updated with instructor’s notes)

Other links

SESSION 1B (Thursday)

  • What does a good webpage need?
  • Who will be coming to my site?
  • What should my website users do?
  • Common elements
  • ✖︎ Class Notes || (Updated with instructor’s notes)

Class Workshop: Coding Simple Website

  • Setting up our basic html document
  • adding main headline
  • adding sub-headings
  • adding paragraphs
  • adding unordered list for navigation with 3 list items ‘home, about, contact’
  • add links to navigation
  • adding email link to contact navigation item
  • ✎ HTML Starter Page || (Updated with instructor’s notes)

Extra Credit: Basic CSS

  • Create HTML/CSS classes that apply background colors to html elements
  • Float and clear elements to create a basic main content/sidebar nav website layout

 

Week 02

This unit will introduce students into the legalities of sampling images from the web. It will summarize and clarify some copyright laws and show students where to obtain high-quality photo media legally. We will also give them a brief tour of the photoshop application and show them some basic image editing. We will introduce them to Cascading Style Sheets (CSS) for styling and layout.

SESSION 2A (Tuesday)

 


 

SESSION 2B (Thursday)

Continuation from Week 2A

  1. Basic Photo Editing for web
    There are many free online image editors that perform these basic tasks beautifully and cost you a penny. There are literally dozens of free applications out there. These are a few.
    For the purpose of this demonstration we will be using photoshop. But these are simple exercises that you can do to edit and resize your photos. Keep in mind that there are many ways to accomplish any one image editing task in photoshop.

    • Editing pictures.
    • Resizing, resolution, saving multiples versions.
    • Entering text into a picture.
    • Removing backgrounds? Special effects.

       

  2. Finding legal images and inspiration
    Searching for the perfect photo for a web project can be difficult. Most people run to the internet searching for photos, since those images are seemingly free. But many of those photos are copyrighted, and using them without permission can lead to an embarrassing legal confrontation.
    An easy way to avoid this is to select images from Creative Commons stock photography sites:

     

  3. Map your thoughts with MindManagerVISIOWord/Excel,  Design Ideas.

    Exercise: Have the students discuss their individual web page needs, i.e. Have a student explain the department or business to the rest of the partners (the students) and grab individual ideas from all, formulate the menu structure based on your findings.

 

 


 

Week 03

This unit will introduce students to open source frameworks, specifically HTML5 Boilerplate and Bootstrap by Twitter. We will learn why HTML5 BP is so well thought-out in its structure. We will review the Bootstrap framework, discovering how easily it is to create complex web components and studying the CSS behind the bootstrap components. We will learn how to quickly create a HTML5 BOILERPLATE/Bootstrap code base for our new projects using intialzr.

SESSION 3A (Tuesday)


SESSION 3B (Thursday)

POP QUIZ!!!

Guess what folks? I’m throwing you some curve-balls. Tonight we have no lectures, no ranting, no ravings about html and css! You need to build a multiple row, multiple layout website. Fun right!?!

 

Week 04

Bootstrap is a framework of carefully crafted html/css/js components, free to use, for creating websites and web applications. It contains HTML and CSS-based design templates for typography, forms, buttons, navigation and other interface components, as well as optional JavaScript extensions. Bootstrap was developed by Mark Otto and Jacob Thornton while working at Twitter in order torpidly build web apps.

SESSION 4A (Tuesday)


SESSION 4B (Thursday)

 

Week 05

This unit will introduce students to the Bootstrap grid system and teach them how to rapidly put together almost any web page layout.

SESSION 5A (Tuesday)


SESSION 5B (Thursday)

  • Class workshop – More Bootstrap Grid!

 

 

 

Week 06

This unit will teach: students to apply CSS transitions on elements to achieve simple animations, about jQuery and its capabilities, how to select, add and remove classes from HTML elements to activate CSS transitions.

SESSION 6A (Thursday)

  • ✖︎ Class Notes || (Updated with instructor’s notes)

SESSION 6B (Tuesday)

Lets try transitions again! And maybe… a little JQuery.

 

Week 07

This unit will introduce the basic HTML elements necessary to build a web form. And ‘cheating’ at forms by using web services like Wufoo.com. We will also go over planning and wire-framing our websites before coding.

SESSION 7A (Thursday)

FORMS & WUFOO FORMS
Lets talk about forms and SUPER EASY Wufoo forms!

WIRE-FRAMES
Now lets talk about planning and wire-framing our websites before coding!

CLASS WORKSHOP
Review the ‘Final Project Website Requirements‘ below. Sketch out (on paper) the following elements for your final website:

  • Logo placement in layout
  • Navigation elements and placement in layout
  • Main content and sidebar content elements and layout
  • Footer elements
  • Sketch different pages if any part of the layout changes significantly

MANDATATORY HOMEWORK

  • Create or gather all of the content for you website (text, images, etc.)
  • Purchase web domain hosting account. You can pick one out of this consumer ranked list ( Choose a hosting provider)
  • Sign up for a free wufoo account (Sign up here)

SESSION 7B (Tuesday)

 

Week 08 – FINAL WEEK

Final Project Website Requirements:

  • Logo
    Website should have text and/or graphic logo. If you want to use a graphic for your logo, you can download some here – ( Free Graphics for Logos )
  • Menu
    Website needs a navigational element with 3 or more links (e.g., Home, About, Contact)
  • Content, content, content!
    Website should have at least 3 pages of original, logical content
  • Layout
    Website content should be laid out in a logical, organized structure (i.e. Main content, supplementary content, website information)
  • Contact
    Website should have some method of allowing users to contact the author. Students can use a form, wufoo form or simple email links

Week 08 – FINAL WEEK

Final Project Website Requirements:

  • Logo
    Website should have text and/or graphic logo. If you want to use a graphic for your logo, you can download some here – ( Free Graphics for Logos )
  • Menu
    Website needs a navigational element with 3 or more links (e.g., Home, About, Contact)
  • Content, content, content!
    Website should have at least 3 pages of original, logical content
  • Layout
    Website content should be laid out in a logical, organized structure (i.e. Main content, supplementary content, website information)
  • Contact
    Website should have some method of allowing users to contact the author. Students can use a form, wufoo form or simple email links