Creating Your First Web Page (with code!)


Creating Your First Web Page (with code!)


Lesson Info

Showing off your New Web Page

In order to share this with the world, everything that we've been working with so far has been inside of what we're calling the root directory, or the project directory. By default, most web browsers will take this index, that HTML file that we've been working with and load that by default. So basically to share this you go to your web hosting, you're gonna upload all of your content. There might be a few different protocols that you can use to upload. File transfer is one of the most popular. You might have a mounted drive. You might be able to do this through a web browser interface with your ISP. And basically, once you load all of these up to your server, you can go to, and that image will load up. If you want to do this as a test, you could put this inside of a folder on your server, maybe inside of a test folder, in which case your URL would be And the index file on most cases will be the file that will load by default, and you can send it out ...

to all your friends and then receive all the praise for becoming a web developer. And so Jim, with that, I think we have covered (laughs) a crazy amount of stuff. Pretty much a crazy amount of stuff, Chris. Yes. That was amazing, thank you so much. Your first time here at Creative Live. You definitely knocked it out of the park. I know that you're coming back in an undisclosed date, sometime later this year to teach After Effects so we're really excited for that, but until then, can you let folks know if you have that slide ready to show us where people can follow you online? I do. Great. So we have a couple places online. Our website, my wife and I run a design company in Pennsylvania called Codify Design Studio. We developed this course and put all the content together. Our day job is graphic design and interactive development, so we sorta do this for a living. Not sort of, we actually do this for a living. is my personal website and then Twitter, Facebook, Instagram and YouTube is places you can find more information about some of the course materials that we put together at Codify Design, as well as maybe looking at some of our work and you know, finding templates. We have templates on a couple different sites including Adobe devnet, for example, where you can download HTML templates. And of course you can get the templates for this course, as well.

Class Description

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