Learn your way! Get started

Web Design, Part 2: HTML Intro and Web Images

with John Wiley & Sons


Watch trailer


Course at a glance


Release date 4/3/2015
Level Beginner
Runtime 1h 53m
Closed captioning N/A
Transcript N/A
eBooks / courseware Included
Hands-on labs N/A
Sample code Included
Exams N/A


Enterprise Solutions

Need reporting, custom learning tracks, or SCORM? Learn More



Course description

Master Web Design in this five part learning series, Web design requires knowledge of multiple software tools and coding languages, like Dreamweaver, Flash, Silverlight, Illustrator, Photoshop, HTML, and CSS, among others to craft truly unique, robust, and interactive websites that work across a variety of platforms. Now, you can learn the ins and outs of web design – from a working knowledge of popular design tools to bringing your vision online- with Web Design. Delve into the basics of good web design and get familiar with the most common web development tools. Conceptualize your site, outline its key features, and implement your design concepts. Incorporate user experience and solid interface design techniques into your site design to create a website that is both functional and attractive.

Prerequisites

This course assumes some familiarity with HTML and CSS. This course is part of 5 courses; Web Design: Design and Tools; Web Design: HTML Intro and Web Images; Web Design: CSS and Layouts; Web Design: Advanced Layout and Web Design Essentials: JavaScript and jQuery. Please be sure to view the courses in order if you are new to the material.

Meet the

John Wiley & Sons Our Creative Design courses are presented by experts from Wiley Publishing. Wiley is a global provider of knowledge and knowledge-enabled services that improve outcomes in areas of research, professional practice, and education. They are the publisher of award-winning journals, encyclopedias, books, and online products and services.


Course outline



HTML Intro

HTML Basics and Validation (13:31)
  • Introduction (00:10)
  • Intro to HTML (01:23)
  • The Basics (00:46)
  • The Structure (00:41)
  • Head Section (00:22)
  • Attributes and Values (01:04)
  • Demo: HTML Code (01:57)
  • Page Validation (01:20)
  • Doctype (00:43)
  • Different Versions of HTML (01:08)
  • Demo: Validator (03:45)
  • Summary (00:10)
Elements and CSS (13:49)
  • Introduction (00:10)
  • Elements (01:46)
  • Adding a Link (02:29)
  • Adding an Image Link (02:47)
  • Role of CSS (02:05)
  • Appling Style (04:21)
  • Summary (00:10)
CSS and External Style (13:15)
  • Introduction (00:10)
  • CSS Class (03:17)
  • Attach Class (02:37)
  • External Style (01:58)
  • Create External Style (05:01)
  • Summary (00:10)

Images, Web Buttons, & Slices

Resizing and JPEG Image (18:19)
  • Introduction (00:10)
  • Resizing an Image for the Web (03:05)
  • Pixel Size (04:13)
  • JPEG File Format (01:29)
  • JEPG in Photoshop (03:55)
  • Quality Slider (01:46)
  • Change Image Quality (03:27)
  • Summary (00:10)
Transparency and Gif Images (16:32)
  • Introduction (00:10)
  • Transparency Effect (04:49)
  • Gif File Format (01:10)
  • Gif in PhotoShop (02:35)
  • Dithering (01:54)
  • Color Table (03:34)
  • Transparency and Matte (02:08)
  • Summary (00:10)
Animated GIF and PNG Files (16:45)
  • Introduction (00:10)
  • Creating an Animated GIF (05:08)
  • Tweening in Photoshop (03:42)
  • PNG File Format Overview (02:43)
  • Optimizing a PNG File (04:51)
  • Summary (00:10)
Web Buttons and Slices (21:02)
  • Introduction (00:10)
  • Creating a Web Button (01:44)
  • Shape Layer & Gradient Overlay (04:35)
  • Strokes and The Drop Shadow (03:46)
  • Working With Slices (02:07)
  • Layer Based Slices (01:54)
  • Save For Web Panel (03:26)
  • Create Slices from Guides (03:07)
  • Summary (00:10)