Beginning Web Design for Creatives, Visual Learners, and Everybody Else

1. What This Class is About: It's been said that coding is the new literacy. While it may not replace all the other forms of literacy anytime soon, it's a wonderful skill set to have. Whether you looking to update your current skill set, you've got an idea you want to bring to life, or you're just interested in learning about it. This class is going to give you the basics that you need. Welcome to Web design for creatives, visual learners, and everybody else. I'm Marc Nischan, and I teach text objects to create people at the College for Creative Studies in Detroit and here on skill share. When I first became interested in the web, it was over 20 years ago. Back then I was a part-time cook and full-time rocker and I wanted to make a website for my band. The quest to get those skills has turned into a career and for the last 20 years, I've made my living doing graphic design, building websites, and designing for the web and mobile. It wasn't always easy for me to grasp the concepts though. As a visual learner, I had to find my own ways to make that information makes sense. But it's been a rewarding career. I enjoyed the work. It's given me a lot of flexibility, and I like to share what I've learned with others in hopes that it can help them achieve some of their goals as well. In this class what we're going to learn, are the five elements of a basic web page. You're going to learn different tools and techniques to help you get started and write your code, we will talk about how your browser thinks about the code that you're writing. We're going to build a layout with images and links and talk about how we can add style to that to change the appearance of it. That's going to be fun and by the end you will have built your very own web page. Let's get started. 2. Tools: Hey everyone, welcome to basic web design for creative visual learners and everyone else. I'm glad you decided to take this class. I'm going to tell you a little bit about the Internet. We are using the internet now, but you probably don't know that in the beginning, in 1977, it was called Arpanet and it was a very small network of computers that was created to solve the problem of how to share data across great distances. It's evolved quite a bit since then. It was originally just text and hyperlinks were the only real interactive element for these websites. It's grown into the Internet that we know today, but in essence, it's still very similar. There is data stored on a computer somewhere, a server, which is essentially at gigantic hard-drive, used for serving up data. Then it is beamed across a bunch of wires to your computer and interpreted by a client, which is your browser. Your browser reads the data and also the information necessary to arrange that data on a page. That information is markup language and it is organizing hypertext, and that is where it gets its name, Hypertext Markup Language, and that is HTML. That's what we'll be working with to build our basic web-page today. For this class, you won't need a server. However, if you do want to get a domain name and hosting, I will show you how to publish your website. At the end of this class, you will be a published web developer. If not, you can still work locally on your computer and do your project right in your own browser. We don't need a server or anything like that. We're going to be working on files on your computer. This is what's known as a local development environment. To do this, you're going to want to get yourself some software, an IDE, which is an Integrated Development Environment. Basically, that's just a fancy word for a text editor. Now back in the old, or olden days, I would have to write my web-pages in Word and save them as dot HTML, open them in a browser and see if they looked like what I thought they were going to look like. It's much more sophisticated today. But there are lots of tools that are going to be much more useful to you than a Word doc. There are two IDE's I want you to check out. The first one is Adam.IO, that is produced by GitHub. The second is brackets dot IO, produced by Adobe. There's plenty of support for them. Lots of third party plug-ins that are free that people to handle things like syntax highlighting in automatic margins and almost anything you can pick up. Go download one of those IDEs. I'm going to be using Adam for our demos. Either one is going to work just fine. To get started, we need to find a home-base where our project is going to live. You maybe should create a file on your desktop call it a website, call it whatever you want and all of our files are going to live inside this folder. We'll start by creating what is essentially the center of the solar system for your website, the index page. By default, browsers look for a page called Index when they come to a folder. Go ahead, open your IDE and create index.html and save it into your folder that you've created to house this website. Once you do that, you will have taken the first step to creating our webpage. 3. Anatomy of a Web Page: We've got our IDE, we've got our index page. Let's take a look at it in a browser and see what it looks like when the browser renders it. It doesn't look like anything. There's nothing there. Let's see what happens when we paste some words in there and they're all running together. We need some markup language to structure these words. The essence of webpage layout is that you're putting boxes inside of boxes, inside of boxes, and HTML tag is nothing more than a box to hold your words, images, or videos. There are dozens and dozens of HTML tags, and they all have specific behaviors that your browser understands. Let's take a look at the code behind Wikipedia's homepage. You can see that all of this content is contained in various HTML tags. Some of those HTML tags are contained by still more HTML tags. The most primordial webpage consists of five of these elements. The DOCTYPE, the HTML tag, the head tag, the body tag, and the title tag. We're going to start with this collection of HTML elements to get us rolling on building our basic web page. Go to your IDE and in our index.html page, we're going to write the DOCTYPE tag. The DOCTYPE is the tag that tells your browser which set of instructions to use when it's rendering your webpage. We're working in HTML5 and it's got a very simple DOCTYPE. But let me show you what one of the DOCTYPES for HTML4 looks like. When they wrote HTML5, they greatly simplified the syntax and everyone was much happier as a result. The DOCTYPE always starts with a bang. Now you may recognize this character as the exclamation point, but it's often referred to as a bang in programming, so they are the characteristic: angle brackets, the bang, the word DOCTYPE in all capital letters, and then HTML. And that's it. Next, we have the HTML tag. This is the biggest box. Everything goes in this box and this tag has an opener and a closer. It's exactly the same except for the slash for the closing tag that lets your browser know that this tag is over and that the box is complete. Inside of the HTML tag are the head and the body. Now, I like to think of these like our heads and our bodies. The head tag is where more of the meta-information goes. This is information you won't necessarily see and I'd like to think of it as the thoughts of the webpage. The head and the bodywork together to form the complete picture. Then there's our fifth primordial tag, the title tag. Inside the title tag are the words that you want to appear up in the little tab in your browser there. Get your IDE fired up. We're going to write some code in the very next lesson and take a look at our primordial webpage. See you there. 4. Let's Start Coding!: This is it. The moment you've all been waiting for. Are you ready to write some code? Open up your IDE and pull up the index page. Now I'll walk through it, feel free to type along with me if you want to, but I will leave an opportunity after I'm done typing to pause it and catch up with me. I'm going to write all five tags and talk a little bit about them as I go and we will take a look at it in the browser when we're done and see our first primordial web-page. This is going to be the foundation that we build on to you get to the finished project for this class. Here we go. We're going to start with the doc type. Pop quiz. What's next? The HTML tag, the biggest box. We HTML, and we close the tag, and we split them so we can put things inside this box. Now this is going to introduce a concept that I hope you will follow, indentation. It's a great way to visually see where your boxes are. Because after you've got dozens and dozens of them on the screen, it can become really difficult to figure out where you're at. HTML, we split it, the next tag is the head. You write that in there and notice I've indented it to indicate that it's inside its parent container, the HTML tag. Now it's going to have a sibling, the body tag. It's also indented. There we go, and now our final tag, the title tag. The title tag lives inside the head. Once again, here I indent the title tag, I put the title of my page in there, I close it, and pressed O, we have a primordial web-page. If I open this in the browser right now, you're not going to see anything except the title because there's still no content in the body. Let's write the words Hello World inside the body just so there's something to see. This is a typical first pass at a project step to take. You do what's called the Hello World just to prove you can get the thing up and running. Go ahead and pause the video right now. If you haven't been typing along, get your code to look like my code, and we'll take a look at it. Here you've created your first Hello World page, welcome to the world of web development, and we're going to build on this to get the rest of our project together. Congratulations. 5. "The DOM": Okay, up until now we've been moving at a pretty catchable rate. I'm going to pick up the pace a little bit as we begin to start working on our final project. This is what our final project's going to be. It's a pretty simple webpage. It's got a couple of links and a couple of images. Now remember I told you that building a webpage is about putting boxes inside of boxes. Your unique coded set of boxes is a model, from what you're going to see in the browser when you take a look at your webpage. That model has a name. To the browser, it's the Document Object Model. Now remember that, it's shortened to the DOM. It's probably going to come up a little bit later. What we're going to do now is build the model for our project. Open up your text editor and type along with me. If you need to pause the video and catch up, we're going to lay the basic structure for our project out right here. Here we go. I've attached a couple of project files. Just below the video, you'll see four tabs. Go to your project and click on FinalProject.txt. Grab the first piece of prose that you see there, copy it, and then we're going to paste it into our text file. Let's overwrite our hello world and start customizing this layout. We can call this the Whitman sampler and these are basically two poems by Walt Whitman that we're using as just some content to build our webpage around. Let's start building some boxes here. We have the body as the second largest box inside this HTML and we're going to keep subdividing that till we get our content where we want it. Let's start out with a div tag. This is a new tag, maybe to you, I don't know. It is in this tutorial. A div is just another box. All these different tag names are just other boxes, but some of them have specific behaviors that we can take advantage of. The div is just a great big box and then we're going to put a paragraph tag around our text. Everything's cleanly indented. You can see the flow of the boxes here. As we go into a new box, we go in our indentation and as we go out of the box, as we go out. It helps you to see where you're at while you're coding. You can kind of be thinking about what that might look like when you're actually viewing it in the browser. Let's wrap an H1 tag around our title here. That's just header one and your browser knows what that H1 tag means. It means it has a certain size font, it has a certain amount of margin around it and it behaves a certain way. Specifically, a header will try to go and fill the space all the way across the box that it's in whereas a paragraph will try to wrap inside the box it's in. Let's see what we have so far. We refresh this, look at that. We've got an H1 and some texts. Alright, it's still pretty ugly, so let's put some more things in here. Let's also put a placeholder in for our links. I'm putting a pipe here, that's the vertical symbol. It's all the way over on the right-hand side of your keyboard above the backslash. Take a quick look at that. You can see how our boxes are stacking on top of one another, let's keep modifying that to get what we want. 6. Basic Styles and CSS: We take it for granted that when we experience a webpage, it's going to be very visually engaging. Well, there was a point in time when there weren't even images on the Internet. Our webpage looks like that right now. It's just plain text, so let's add an image to give it some visual interest and then we'll start laying in styles to fully flesh out our design. Here we are. I downloaded the two images that are attached to the class. One is called Pioneers, one is called Walden. They're going to be the images for our two pages. Let's get started by putting these in. Images have their own special tag, it's the image tag, I-M-G. There's a small group of tags that are like this. They don't have an opening and closing their self-closing tags. They self close with a slash and a bracket. The image tag has a few attributes that are going to help us out. The most important one for us is going to be source. We're going to tell it where this image is found. We say source equals, it has to be in quotes and we're going to put pioneers.jpeg in there. Let's save it and take a look. There's our photograph. There are other things you can put in here like title of the image or Alt text that can be read by a screen reader. I'm going to leave some Alt texts in here and credit pixels.com for giving me this free photo to use. Pixels is a site that has all kinds of great free stock photography. You'll notice that that text doesn't show up anywhere in our webpage. Now on larger websites that have lots and lots of images, it's pretty common to have images in their own folder. Now the image is gone and you see this broken link and the alt text is displayed as an alternative to the missing photo. We have to be careful about the information that we give in our source here. If I type images/pioneers, now it can find the photo again. These file paths are going to become important as we get into more complex lessons and I have a second and third class after this where we'll get into more advanced topics. This basic file structure is something to pay attention to. I'm trying to keep everything in one file for this first class just to keep it easy though. We're going to go with; no special photo. Let's pull this back out here. Fix my link and we're back in business. The next thing that we're going to do is add some really simple elements called horizontal rules. They're just a line that goes all the way across the page. They're also self-closing tags. hr, let's copy that and put another one down at the bottom here. Let's do one more so it matches the design. Another self-closing tag you can use is the break tag, so br with a slash and an angle bracket. Let's take a look at this, refresh and we've got our two lines down there and there's a break beneath the word Walt Whitman. It's an extra return that's the same height as a line of text. Some other simple ones are things like the strong tag. If we take this and look at, it creates bold face type. There used to be a bold tag, it was just a B, but it's been deprecated in favor of a more descriptive tag and the reason is that screen readers and braille readers and things like that use. The concept of bold doesn't exist in speech but the context of emphasis, see for instance, does exist, so we use italics for emphasis in text. Let's take a look there. See we get some italics. But for a screen reader, it might read that with a little bit of a louder voice or a more emphatic voice. These are some of the basic styles that are available to us. Now we're going to get a little bit more sophisticated. We're going to start writing code inside of these tags. We're going to give attributes to these boxes, it's going to affect the way that they look. One of the things that is really boring about this page right now is how it's all left aligned. Let's put it inside a box that has a width that is less than our screen and that is centered. When you're writing styles inline. These are inline styles because they're inside of these tags. There are more sophisticated ways to do this that we'll get into in the next course but for now this is a quick and easy way to become familiar with styles. We start out with the style attribute, style equals and put it in quotes and let's say that the width is going to be 800 pixels. Px is the abbreviation for pixels and take a look at this. There's a colon here, not an equals but a colon. This is called a key value pair. This is the key and this is the value and that's a very common pattern in coding for the web. You'll see it in programming languages and all kinds of stuff. Let's center it now that it's a certain fixed width, we have a margin tag or margin style we can use. If we say margin auto, the browser is going to read that and it's going to put the same amount of margin on either side of this box. This is going to center it. Let's take a look. It's looking better already. How about that? When you're using styles, there is a cascading effect and that leads to the name cascading style sheets. It basically says that the last style that it reads is the style it's going to use. Let's take a look at a style that we can apply to the body: style = "color" and I'm going to use a gray, 33333. See I'm ending the styles with the semicolon, that's really important. The browser doesn't know where to end if it doesn't see one of those in the style declaration. This color key is going to refer to the font color. I've just made it a little bit lighter gray not so black. Here, let's do something really dramatic. Let's type red in there and see what we get, everything's red. Now, to demonstrate that way that styles cascade, I'm going to go down to our h1 and say style = "color: blue". Notice that even though the whole web page was red, when it encountered a style that was deeper inside the boxes that was different, it differed to that one, so we've got blue there. Do we have any more nested boxes? No we don't. But we could go and do that for every one of these tags. I'm going to get rid of this because we're not using that right now. Let's clean up a couple of things really quickly and then we're going to move onto the next section which is going to be custom type. Let's finish off our little boxes here. I'm going to copy this break tag and put one at the end of each line of this poem and what that's going to do is snap it out of that wrapping behavior that we've seen. There were go, stacks it up, nice and neat. I'm going to get rid of this red text there we go. Now we've got our boxes in a row, they are stacked up. You can see the dom here. Our boxes stacking on top of one another. We've got our basic shape together. Let's go on to styling some of this type and getting away from these default type styles. 7. Adding Custom Type: One of the most high impact things you can do for your webpage is to have good type eye. There are default typefaces that come with Macs and Windows, and we can use some of those. We can also use third party typefaces. I'm going to walk you through the differences. There are two basic types of fonts. That's a gross understatement but for the purpose of this class, let's talk about Serif and Sans Serif, or Serif and Sans Serif, depending on where you're from. A Serif is this little foot, these little sticky Audi things on a font. They're supposed to help guide your eye across the letters. So this is times, this is the default font, but I could also spec something different, like font-family, sans-serif, and there I go. I believe this is Arial, I think that's the default. There are a couple of default values for a Serif and Sans Serif. I can do something like take advantage of cross-browser typefaces, that will render on both Macs and PCs. Here we go. Here's the list. There are 1, 2, 3, 4, 5, 6 that you can use on either platform. Let's try Comic Sans. Because I've got two words together, I need to put them in quotes. Otherwise, the browser is only going to read the first word and stop. It won't recognize the whole name of the font. When you're nesting quotes, you have to use a combination of double-quotes and single quotes, and since I've already used double quotes, I'm going to use single quotes here and put Comic Sans MS in there and a comma, and I'm leaving this Sans Serif font declaration. What this is is your font stack, and it goes from your most desired font down to your least desired or default font. The reason is, you don't actually have 100 percent certainty that the font that you spec is going to be on a user's machine. System fonts don't come down with your website. You're referencing a font that lives on a local computer. On your computer, it's going to look great, you could specify. Man, I don't know. Let's see. I don't know if I have lobster on here. But I can specify some font that I like, some fancy font, Gotham, and it would render on my machine. But if the person that downloads the webpage doesn't also have Gotham installed, it's just going to default to whatever text you specified next. Or if you didn't specify anything, it's just going to render Times New Roman, which is what the webpage looks like so far. Here I've got Comic Sans MS, and I'm saying if that's not available, use any Sans Serif type. Let's see what we get. Oh boy, there it is. Comic Sans. I think this has the dubious distinction of being the most hated font on the Internet. Let's see why you hate Comic Sans, designed for hackers. I'll let you read up on Comic Sans on your own time. What's important here is that you understand the font stack, because we're going to use a Google font to really put some nice type on here, and we're going to specify a font stack because this font is going to be coming from Google's CDN or content distribution network. If for some reason you lose network connectivity or, I don't know, the font is no longer supported, you will have a font stack backing you up. I'm going to spec Helvetica and then a [inaudible]. There we go, Helvetica, a little bit nicer than Arial, in my opinion. Now let's go take a look at Google's free fonts. There are lots of free font sites out there. Google makes it so easy to embed custom fonts. Google.com/fonts. They have hundreds and hundreds of fonts. You can sort by Serif, Sans Serif, Display, Handwriting. We're going to look for a font I've already chosen called Josefin Slab. There it is. I hit this "Plus" button, this little dialogue pops up, and from this dialog, I can get instructions on how to embed this font. It's super easy. I copy this link into the head, and we don't have anything else up there right now, so we start filling this up. This is a classic example of that thoughts portion of the website, that head-body distribution or split, whatever you want to call it. This is something that you don't actually see but it's telling your browser to download this. There's not going to be a link on your web page that says, Josefin Slab or whatever. The other thing you have to do now is add it into your declarations. I'm going to put Josefin Slab, Helvetica, and then San Serif. Let's take a look at that. There we go. That easy. Now, we do have a little bit of work to do. It's small. Let's go in and dial it in. I'm going to move this declaration down to our main div here. I've got my width, I've got margin auto, let's put the font family in there. I don't need the word style equals because I'm already inside a style tag. Get rid of these extra quotes, there. For the body, I'm going to spec a color, a little bit lighter gray. Now for this, I'm going to make our default font size for the whole page, 18 pixels. There we go, a little bit bigger, it's a little bit easier to read, and let's go do some more here. Let's put a little bit of emphasis on the title of our page. Right now I've just got these two placeholders for our links, which are coming up in the next section. I am going to introduce you to the span tag. Span tag is a lot like a paragraph tag. It's made for holding text. I'm adding this box so we can specifically target the text that is inside of it. Let's do a style tag. I'm going to say font size is 27 pixels, and I've got a little title. Looks like I need to give it a little bit of room. Let's put a space here, maybe even a dash, how about that? There we go. There you can see how easy it is to make a really nice layout using Google's free fonts. Now let's go on to the next section. We're going to link these pages up, one of which we haven't created yet, and we'll have completed our project. 8. Adding Links: Well, you've made it to the end. We've just got one more thing to do before our project is finished. So far you've written all the code necessary to make a basic webpage. Now we're going to add a couple of links and hook them up, so we've got a two-page site. Links can work different ways depending on how you need them to. Let's take a look at the basic anatomy of a link. They used the anchor tag, which is just an a and they have to be closed. They also need an href. The href is basically the address of the place you want them to go. They can go to links that are on the same web page. They can go to files that are also in your same website, or they can link out to other websites. Say if you put the URL for Google in there and we refresh the page. There we go, it goes out to Google. We can also do something like if we had a very long page, let me duplicate this paragraph a bunch of times and we're going to pretend this is a long page of text. We can give an ID to one of these things. Let's call it chapter one and change our href to chapter one with a hash in front of it and it will link down the page to chapter one. The way that we're going to use it is to link to another webpage. Let's start by creating that page. You can right-click and make a duplicate and name it Walden. Now we need to change over all of the code that is from the first poem to the second poem. I'm going to open that text file that has the pros in it, copy it out and then just replace all of this text with it. Through the magic of video that only took a second. Let's write a link that's going to go to our Walden page. One thing, don't forget the change the photo. Lets change the photo really quick. We're on Walden, so let's make this link back to our index page. Then let's go to our index page and make it link to Walden. I'm going to have that link point to index. Its just going to link to itself. Nothing will really happen when you click on it. This will go to our walden.html page. When we refresh, we should have two links that let us go back and forth. Now we never wrote a link for this one, so it's not going to show up. Let's go back and add that really quick. Well you can see it's hooked up and it's switching between the two pages. I mainly add this link just for visual consistency. That's better. We don't have that jumping underlying now. There you go. You've got yourself a functioning two-page website. If you bought hosting and domain name, I'll show you how to put it up and publish it on the internet and of course, you can take this and do whatever you want with it. You can substitute a different Google font, a different image. You can put more texts, less text. You can add additional pages to it. I'm going to do a couple more classes on skill share that I'm going to show us how to do advanced page layout and create a full fledged website. Something that's a little bit more like what you're used to interacting with on the web. But for now, this gets you started. Congratulations, you are a basic web developer. 9. Publishing & Wrapup: Okay, let's see if we can get this up on the Internet for you. There are lots and lots of domain providers and hosting providers. I've been using DreamHost for a long time, probably 15 years. They'd been really reliable. There are tons of other ones, but that's the one that I'll be going through in this demo. It's really pretty simple. All you're doing is taking your files and putting them up into another folder on the Internet and the domains pointed to it, and we type into a browser, boom, it shows up. I'll walk you through that. Also, I want you guys to leave me some comments and let me know about the class, if it was lacking anything, if it taught you everything you wanted to know, if you could think of any constructive criticism. I'm always open to hearing that because I want to make these classes the most useful tools for you that they can be. All right. Let's take a look here at getting your site live. Once again, congratulations. I hope to see in some future classes, I'm going to be teaching one on CSS layout and then one on Responsive Design. So I'll see you there. Thanks a lot and have a good one. All right. We're ready to put this up on the Internet. There are a number of free FTP clients. FTP is File Transfer Protocol, and that is the connection that you can use to put your files up on your server. One client that I like is FileZilla, it's free. The other one is Cyberduck. You can search for either of those and download them, open them up and they look something like this. Here's Cyberduck, it has a very clean Mac OS type look and you basically, you drag things from your Finder Window into it. The other one is FileZilla which is a lot more of a hierarchical view. Whichever one fits the bill best view. I'm going to use Cyberducks. It's so easy to see. I've put a test folder in here at the end of a domain that I manage just for the sake of showing you this. All we have to do is grab the files for our website, drag them over to the file that we want to use. Now, if you've never done this before, it can be a little bit confusing and you may not get it right the first time. There is usually a public HTTP file, or maybe it's just your domain name. But there'll be a number of files up there depending on which service you use. If you use DreamHost, it's your domain name, you would see marcnischan.com. You can open that up and drop the files in there, go to marcnischan.com and it comes right up. Here we go, drag the files over there, drop them, and we should be able to go to a browser right now and immediately see them. There they are. This is live on the Internet right now. This was that easy. Anytime you make a change locally, you just overwrite the files on the server and update them. That's it. That's how you publish a website. The last thing you need to do to complete the course is to upload a picture as a screenshot of your completed site, or maybe even post a URL if you decided to host it.