In this Turning a Design into HTML Code and Using CSS video, we’ll cover how to determine structural elements needed to turn a design into a webpage, how to use a visual design to plan out the other HTML elements needed in that page, and how to code a webpage based on a visual design. We’ll also cover the syntax of CSS, type or element selectors, class selectors, ID selectors, descendant selectors, CSS specificity, and how to attach a CSS file to your HTML page.
Sometimes the most difficult part of creating a website is a step that is often overlooked: converting a graphic design into HTML/CSS files to be used on the web. In this workshop, expert web developer and trainer Candyce Mairs shows you how use a design created in Photoshop or Photoshop Elements as the basis for a website created with Dreamweaver. You’ll learn how to “slice” a graphic design for conversion, optimize and export your images for the web, and plan how you are going to organize your website. Then, as the course moves into Dreamweaver, you’ll use HTML and CSS to create web pages, add content, and format and position that content. Finally, you’ll see how to test your pages in a variety of browsers to make sure you get the best results.
Viewers can expect to learn how to apply the basic principles of HTML and CSS (as ideas, not actual code), accessibility, responsive design, and usability, to their typography, use of color, layout, and design aesthetic. The creative exercise built into the format of the course (we will use the same content to create two visually different interior pages, both desktop and mobile) will help demonstrate the power of visual design in crafting distinctive user interfaces tailored to different brand design and esthetics.