Creating Your First Web Page (with code!)

Lesson 1 of 11

Class Introduction

 

Creating Your First Web Page (with code!)

Lesson 1 of 11

Class Introduction

 

Lesson Info

Class Introduction

What we're gonna do in this class today is create a webpage from scratch. We're going to evaluate a design, we're gonna come up with an HTML strategy in order to figure out how we wanna structure all of our content, and then we're gonna write some CSS to style that content, create our layout, and just make a webpage from scratch. The webpage we're gonna create is also gonna feature a navigation system, which we're gonna put together, that you can hover over and menus will come up, and we'll also change the behavior of that same menu for mobile, so you can tap on the menu icon and have it expand open. We'll also make the site responsive using media queries, so with that, let's get started. So, the first thing I want to talk about is when we're looking at HTML and CSS, the relationship of HTML and CSS is exactly the same as design software you're typically using now. Tools like InDesign or PowerPoint, or After Effects, the difference is when we're using some of these visual tools, we don...

't see the separation of the design and style. When we're working with HTML and CSS, we are forced to confront the content and structure, and the style and layout. But really, behind the scenes, it's all sort of the same thing, you're doing this already with design software. The only difference here is we, again, don't get that sort of visual cue from these pieces. So, what we're gonna be doing is writing some CSS that will, in a sense, style the content and structure from HTML, so we're gonna start by creating our HTML document, make sure that all of our content's in place and well-structured, and then applying all of our CSS rules to this. Now, when you're getting started with HTML, you don't have to learn the entire HTML library of tags and elements. These are the most common tags that you're gonna use for content, there are things like headings, paragraphs, anchor tags, and when we're talking about the structure, and most of these structural elements came when HTML 5 hit the scene about five or six years ago, and we have things like <header>, <nav>, <main>, <article>, we're gonna be using almost all of these today during this class. When we're talking about CSS, again, we don't have to learn the entire library of properties for CSS, these are some of the most common properties you're going to use for styling content. Things like font-family, weight, color, things you're probably used to with design software. And as far as layout, we're going to be setting things like width and height, using flex properties to create some columns, using float and position, and these are gonna give us the ability to take that HTML content and structure, and turn it into a layout. Now, the software that you'll need to take this course is a text editor, that's the first thing. HTML and CSS files are not a specific file type, they're just text files, but we do need to edit them with text editors, so you don't wanna use something like Microsoft Word or Word Processor, we wanna use something that will just show us the core text. Some of these are free, some of these are paid. At the bottom, Aptana Studio, is a sort of a full development environment, it's a free application for both Mac and Windows. If you're a Creative Cloud subscriber, you can download Dreamweaver. The 2017 version actually has a very robust code editor, they have revamped it completely. There's a bunch of others here, for the class today I'll be using Coda at the top on the Mac side, but again, any text editor's gonna do just fine for following along. You'll also need a web browser, of course, so we can load the HTML into a browser and check it out. We can resize the browsers on our computer screen and see what the different responsive states look like. But in addition, if you are going to be loading your design on a mobile device, if you have a mobile device, that will be very helpful. You don't have to have one, but it will really help. This will give you the ability to see what the fonts look like, what the images look like, how the compression is moving across those different screen sizes, so there's just nothing like having the actual device in front of you if you're gonna be delivering your site on mobile devices as well. And then finally, the other optional piece you'll need is access to a web server. You can use any web hosting service that you have, you can even use file sharing systems like Dropbox, for example, that will serve out your webpages, and you'll just need this if you'd like to share your web content across the world. And so, for those who are purchasing the class, we have our Bonus Materials. There are five folders in the Bonus Materials. We're starting off with our Starter Files. There's Graphics folder, the Graphics folder has both print and screen graphics, we'll talk about those more later. There's a Content folder so you don't have to type any of the content. There's a Snippets folder to keep us from any repetitive typing, we're going to type anything that important to understand in the class, but then anything that gets repetitive, we're just going to copy and paste from code snippets. You'll understand what's in the snippets and it'll just make the process go faster. And then finally, you'll get a copy of the Final Project, so everything that we're doing, the final design that does all the cool stuff with the navigation and responsiveness, responsiveness, that's my new word for the day, is all included in the Final Project.

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

Reviews

Linda
 

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!

Tom Hickey
 

I think this class was way over my head.