Lesson Info
1. Introduction to HTML and CSS
Lessons
Introduction to HTML and CSS
06:50 2Beginning the Project: Adding and Formatting the Content
34:30 3Creating CSS Rules for Text Styles
24:43 4Creating CSS Rules for Layout and Images
23:59 5Creating Display Properties for Links
13:46 6Introduction to CSS Media Queries and Java Script
10:10Lesson Info
Introduction to HTML and CSS
HTML and CSS really is a way that we structure content and style and create layouts and we do all of that currently with design software and so I wanna draw some of the correlations here and explain how that works and how we can start to create some of our layouts and so the reason we wanna use HTML is because this is everywhere and it is the universal format, HTML is used in everything from websites to emails, it's used in EPUBS, your smart refrigerator is using HTML to show you content on the screen, it is just absolutely everywhere and so it's becoming more and more important as designers for us to be able to take our designs and create those layouts and again, so I wanted to draw the correlation to design software, so with HTML and CSS, HTML is responsible for the design and content and CSS does the style and structure, so in typical design software now, we are used to having things like a graphic frame and we put our content inside, in standard design tools, again like InDesign, w...
e do all that at once, we draw our text frames, we put in our text, we pick a font, we position it somewhere, we apply a color, so we're really doing content and structure, layout and style all at the same time, well, HTML does that, the structure of HTML is the same, the difference is we sort of separate those two disciplines, HTML is responsible for the structuring of the content and the content itself, CSS is responsible for styling that content and adjusting the layout and so if we take a look at what this sort of workflow looks like, we end up with HTML and CSS, the CSS informing elements of the HTML, so to get our final design over here on the right, we have our CSS, which is informing sort of the style and layout of the individual HTML elements and so again, I just wanna try to draw that correlation, so that as we're doing this, you can sort of visualize what's happening. One of the other core differences with HTML and CSS versus using tools like InDesign or Photoshop or even like After Effects is the final deliverable is the HTML and CSS file you're working on, if you're doing a design in InDesign for example, most likely, you're not giving that InDesign file away, that's not the final, producible file, that gets distributed out to the world, you export that out to PDF, you have it printed and it's the print pieces that are distributed, in the case of HTML and CSS, those are the files that get distributed, those are the ones that go out to the world and because of that and because there's so many ways to strategize your HTML and write your CSS, we haven't seen a lot of visual tools, that have been really successful in making this a completely WYSIWYG environment, so unlike InDesign, where we do it all at once, HTML and CSS separates those and we're seeing that we have to be able to understand how this works, in order to be able to send that out. Now having said that, we don't have to learn the entire HTML library or the entire CSS library, there are just a handful of tags, that you would need to learn for HTML to structure content and just a handful of elements, that you would need to develop the structure and so these items here, a lot of these came to us when HTML five hit the scene about six years ago and we got things like a header tag, an article, an aside, a figure and so these really start to help us strategize how we're gonna put our HTML together and then again, just like HTML, with CSS, we don't have to learn the entire library of possible properties, these are the things we're gonna use most for style and these look exactly like things you might see in a design application, things like letter-spacing and the font-size and the alignment of text and then similarly for CSS, we have a bunch of properties, that we use for the layout, things like width and height, whether we're positioning items or using floats of flex, and again, so these things all come together to give us the ability to create those individual layouts. Now HTML and CSS aren't their own file types, they're simply text files and so we need to edit these with text editors, so we're not gonna use a word processor like Microsoft Word, for example, we need to use a text editor, which will just edit the text of that document, so here's a lot of popular text editors, some of these are commercial and some are free, Aptana Studio, listed here at the bottom, is a complete development environment, it's completely free and it's available on the Mac and Windows platform, if you are a Creative Cloud subscriber with Adobe, you can get Dreamweaver, the 2017 version of Dreamweaver actually got a brand new code editor in it and it's got a lot of visual tools inside, so it's actually pretty powerful and Adobe's done a lot of work on that. For today, I'm gonna be using Coda two on the Mac, which is on the left-hand side here, but again, any text editor will work and text editors will give us little hints as we're typing, so we'll see things like tags come up, attributes come up, CSS properties, so as we start to type, these tools will give us little windows that'll pop up and you'll see this when we start to help you code, so as you get used to these tools, you can start to type in your content really quickly and so in addition to a text editor, of course you're gonna need a web browser, all of the most recent web browsers are HTML five compliant and so HTML browsers have been around for about five or six years, when HTML five came out and then finally if you wanna see how your design's gonna look on a mobile device, it's one thing to resize the browser, which we'll be doing today, but you also wanna take a look at this on your device, you wanna see how the compression of the images looks, you wanna see how the type looks with the different CSS styles that you pick, there's no substitute for actually looking at this on a device, so when you're working on websites, if you have a device to look at this on, that's really gonna help, that is optional though, it's also optional to have access to a web server, this is just so that you can take these files and upload them somewhere and you can have anybody in the world log into your site and check it out, but again, this is just optional, we don't actually have to have this. On the bonus material, that's part of the course, we'll include the project files, that will include all of the starter files, so we have an HTML and CSS file to start, they're mostly blank, but they're properly formatted with some of the sort of mundane text you don't wanna type every time, there's a content folder and then finally there's a final project, so the layout we're gonna be building here is also included in the project files.
Class Materials
Bonus Materials with Purchase
Ratings and Reviews
Lu Gerard
I am completely new to web design and this video has been a great purchase. I now understand the basics very clearly. I am also happy with the way Chris talks and explains, as I am not an English native speaker and sometimes class contents might not be difficult but the speaker is. Definitely not the case. I used the subtitles and watched each video a couple of times. Highly recommend it for beginners like me!
BolesMA
Awesome. So simple and very informative if you are slightly aware of HTML and CSS but aren't sure about using them to construct a page. If you have been relying on templates to build your site and dabbled with a little code to improve them....this class will take you much further. If you've relied on templates and have been frustrated by the limitations of them then this class will help you being to understand how web pages actually work. If you're wanting to take more control over your pages then this is the class to start with! Can't wait to to take his other classes. Super easy to follow and very informative!
AnissaT
I appreciated Chris' direct approach and simple explanations. I've been developing and teaching website development for 20+ years, and enjoyed his pacing and resources. This was a solid, straight-forward introduction for new designers.