VISC210 - Web Design 2
Prerequisites: VISC 102 and VISC 110.Further focuses on the tools, strategies, and techniques for web site design, architecture, naviga- tion, language and production.Explores more in depth the methods for creating successful web sites from concept to implementation. Examines the process of integrating text,graphics, audio, and video for effective communication of information.
Introduction to the Course
In this lesson we will be outlining the goals and expectations of this course as well as quickly reviewing the basics of HTML, CSS, and the Web in general so that we're all on the same page.
Basic code structure of a Website
This week we are going to discuss how the Web works and how the various coding languages come together to make our modern Web experiences possible. We will also begin to dive into the fundamentals of HTML and how Web pages are created.
Choosing a Code Editor
Various programs for Mac & Windows
In this lesson, I use jsbin.com to type out my code. However, I've also listed several other code editors both for Mac and Windows.
Wild Style With CSS
Learning the basics of Cascading Style Sheets
We will be going over some of the basics of CSS and how it can transform a plain HTML document dramatically.
Apple vs. Adobe
Why no Flash on the iPad?
Web Typography 101
Getting non-Web-safe fonts a Web page
Typography is a powerful artistic tool to impact your audience. It can completely change the look and feel of a layout and set a specific mood. Unfortunately, the Web has had a long struggle with Typography due to both technical and legal issues. However, very recently, some powerful break-thoughs have been made to free up Web designers to be more expressive with their use of type on the Web.
Make your Site Public
Site Hosting, DNS, & Domain Registry
We will be setting up our sites online and in a way that will help them receive the most traffic possible through good SEO techniques.
Tableless PSD to HTML 1
Preping your PSD for tabless Web design (part1)
This week we're going to be applying the concepts that we learned in CSS and HTML towards converting a Photoshop document into HTML.
Tableless PSD to HTML 2
Preping your PSD for tableless Web design (part2)
This week's lesson will be a continuation of last week's were rebuilt out an HTML page based on a Photoshop template. We will be using some of the CSS principles from week four in addition to some new ones. In week three and four we spent our time primarily coding straight text, but this week we will be using some of Dreamweaver's tools to help us code faster. For those of you who do not have Dreamweaver, I will be showing the code as well. I will also be using the firebug occasionally to help me test out some of the CSS changes in Firefox.
Tableless PSD to HTML 3
Preping your PSD for tabless Web design (part3)
This week we will be doing another video tutorial on CSS construction of our sample page.
Flash vs HTML5
The battle between the two dynamic Web platforms
Intro to jQuery pt1
Write more, do less...
Intro to jQuery pt2
We will continue working with jQuery and jQueryUI to create drag-and-drop functionality, tabs, accordions, and other cool gadgets.
Setting Up Nivo Slider
Intro to CMS
Expolore various CMS and blog platforms available
We have now been in the Web 2.0 era of dynamic Web design for quite some time now. Let's explore some of the available FREE options for converting our static HTML site into a dynamic, database-driven site.
Building a Blog in Modx
Making your static site dynamic with Modx (part2)
Having set up our Modx site in the previous lesson, we will now build more dynamic features and work with community plugins to build our blog.
Final Project - VISC210
Final project requirements
In this lesson, we'll be going over the requirements for your final project, which will be to build a 3-page website.