Skip to main content

Watch Preview

Creating Your First Web Page (with code!)

with Chris Converse

Log in or Sign up for FREE and get full access to these and thousands of other Open Lessons in our catalog! Watch 1 Lesson For Free

  •   04 Getting Started with CSS

    30:09

Class duration: 3h 11m

See all 11 lessons
  • 6K students

    100% satisfaction guaranteed

  • 100% recommended

    3 student reviews

  • Access anytime

    OFFLINE SYNC WITH iOS APPS

Get the Pass

Unlock this class plus 1500+ more >

starting at $25/month*

$299/year or $39/month

Watch Now

You already have access!

Buy Class

$49

About The Class

Master your web site from front to back

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

Topics Covered


Lesson Plan

  1. 01

    Class Introduction

    05:05
  2. 02

    Evaluating a Web Design

    09:43
  3. 03

    Adding Markup and Content

    32:26
  4. 04

    Getting Started with CSS

    30:09
  5. 05

    Styling the Header and Define Sections

    21:04
  6. 06

    Styling the Main Section

    21:09
  7. 07

    Creating the Navigation

    35:30
  8. 08

    Adding Media Queries

    11:33
  9. 09

    How to Create Navigation for Mobile

    06:56
  10. 10

    Create CSS for Printing

    15:22
  11. 11

    Showing off your New Web Page

    02:22

Meet Your Expert

Chris Converse

Chris has over 25 years of experience in graphic design, interactive and animated media, with a unique focus on both graphic design and web development. Chris possesses development skills across such languages as PHP, HTML, CSS, JavaScript, jQuery, and AngularJS, making his design execution ... read more

See instructor's Classes

Bonus Material

Access your course materials here!

Get access to exclusive bonus content when you purchase this class.

  • zip Project Files

100% of students recommend this class.
See what some of them have to say.

  • Linda

    June 2017

    I am so happy to have taken this course! Chris is very clear and knowledgeable about what code to use and why. He is very organized and made coding fun!

  • Matthew Chesebrough

    Matthew Chesebrough

    July 2019

    Chris, thanks so much for having such a well organized an insightful class. I took the class because I'm working on some redesigns for my personal website and the hosting templates weren't quite getting me to the level of fit and finish I envisioned. To be honest, I was a little nervous and intimidated by html/css initially, but you helped me conquer the fear. I look forward to taking some of the lessons (after a few more views of the classes that is :) ) to my website achieve my vision. Wishing you all the best. Take care.

  • Tom Hickey

    Tom Hickey

    July 2017

    I think this class was way over my head.

    Similar classes you might like

    You know who’d love this class...?

    When gift-spiration strikes, grab it. Give this class to a friend who’d love it. For their birthday or just because. (Or just because you missed their birthday.)

    GIFT THIS CLASS