Lessons
Class Introduction
05:05 2Evaluating a Web Design
09:43 3Adding Markup and Content
32:26 4Getting Started with CSS
30:09 5Styling the Header and Define Sections
21:04 6Styling the Main Section
21:09 7Creating the Navigation
35:30 8Adding Media Queries
11:33Lesson 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 Materials
Bonus Materials with Purchase
Ratings and Reviews
Christine Wigaard
A great course. Chris has a great way of explaining and making it seem very easy and fun.
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!
Matthew Chesebrough
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.
Student Work
Related Classes
Web Design