Creating Your First Web Page (with code!)

What happens after your web design comp is approved? How do you create the web graphics from Photoshop, Illustrator, or Sketch? How is design translated to HTML and CSS?
This course will walk you through the process of evaluating, planning, and creating a web page from a design comp. We’ll explore strategies for setting up your HTML, slicing and saving web graphics, and applying CSS rules that will re-create your design vision in a browser.
When we’re finished, we’ll have a working web page that will respond to varying screen sizes, as well as paper. Choose to follow along with the video, with the provided project files, or simply evaluate the final project as you watch the instructor.
What you’ll learn:

• How to evaluate aspects of a design for conversion
• How to structure the HTML
• To make decisions how the graphics should be created
• What graphical formats you should use
• How to add fonts and style text in CSS
• Using CSS for layout
• Incorporating graphics with HTML and CSS
• Using media queries for screens and paper

Software Used: Panic Coda 2017

• Class Introduction
• Evaluating a Web Design
• Adding Markup and Content
• Getting Started with CSS
• Styling the Header and Define Sections
• Styling the Main Section
• Creating the Navigation
• Adding Media Queries
• How to Create Navigation for Mobile
• Create CSS for Printing
• Showing off your New Web Page