1. Here is an example of what your webpage could look like at the end of this week. This is the code that makes that page (scroll to view in full):

    I'll include a sample like this at the beginning of each tutorial, so you know what you're getting into. If you ever get lost, come back to this step and check your code against mine. Remember, in code, missing one piece of punctuation can break everything. I'll use text boxes like these throughout the tutorial when giving code examples. Note that the text boxes are resizable and scrollable.
  2. Download Atom.io, a lightweight and free text editor. There are many good text editors, but Atom.io gives helpful hints. After you press "Download," you should open Atom.io. Then, select "Open a Project" and choose the folder within which you'll be saving your work for this class. You'll be prompted to install command line developer tools; you can decline for now.
  3. Now, make the folder that will house your website and only your website. You can name this folder anything you want, as long as you use only lowercase and avoid spaces and punctuation other than the dash and underscore.
  4. Make a new file in Atom.io, and save that file in your folder as "index.html." You'll notice that you can see all your files in the left column on Atom.io. Any change you make in Finder will be reflected in Atom.io, and vice versa. Go to View->Toggle Soft Wrap. This way, you will always see all your code and/or text (because it will wrap to your screen width). Write the following code in your index.html file (always avoid copy and pasting unless otherwise noted):

    Throughout this tutorial, any text that will vary for everyone will be in brackets. You should never actually type in the brackets. But every piece of punctuation other than brackets needs to be copied exactly.
  5. Congrats: you've made your first webpage. You've also written your first lines of HTML (Hypertext Markup Language). Save it. Then, go to your index.html file in Finder, right click on it, and select "Open with [your favorite browser]." Double-clicking on the file will also probably work. You should see whatever you wrote in step 3 displayed—if you don't, check to make sure you typed everything perfectly. Keep this page open in your browser as you work. Whenever you want to check that you've done something right, you should 1) save all your files and 2) refresh the page.
  6. [Explanation.] The code in step 3 is the skeleton that makes up ANY webpage. A quick explanation of what it all means:
  7. Now, to make that text a bit more visually fun, let's learn your first bit of CSS (Cascading Style Sheets). Between the <style> tag and the </style> tag, add the following:

    After saving your index.html file, refresh your page in your browser to see what's happened. Always remember to save your document before refreshing your page. Any unsaved changes will not appear in your browser. Now, before I tell you what all that means, play: change anything and everything between a colon and a semi-colon (but don't mess with "absolute," for now).
  8. [Explanation.] Everything between the curly brackets in CSS molds/styles the element (or section of the body) that's named right before the curly brackets—in this case, everything in the body. The texts that directly precede the colons are called properties, and the texts between the colons and the semi-colons are called values. Together, a property and its value make a declaration. Now, let's see what those declarations are doing:
  9. Let's add an image. Choose any image—either one you've found online (and downloaded) or one you've taken yourself. Remember that gifs are technically images! Move that image to the same folder that houses your index.html file. In the body, before or after your text, write the following line of code:

    In place of [your-image-name], write the file name of your image. Include the extension, or the part after the period—for example, bigbutter.jpg or we-went-while.gif. If your image doesn't have an extension, check what type it is and add the appropriate extension to the file name before linking to it. Refresh your page in your browser. Your image should show up below your text if you placed it below your text in the body, or above your text if you placed it above your text in the body.
  10. Note that you can name your files, folders, and elements (and ids and classes—more on that soon) whatever you want, as long as you remember what you've named them. Think about these names like street names: it doesn't matter what a street is called, as long as everyone calls it the same thing. As your website gets more complicated, you'll refer to files, folders, and elements in several different moments. As long as you keep their names consistent, you can call them anything you want. You just need to follow these two rules to ensure that all browsers can read the names: Now, try changing the name of your image to something more interesting than its original name. Be sure to change the name in your index.html file, too.
  11. Let's mobilize some CSS for your image. Write the following code into your head between <style> and </style> (in the future, I'll say "add this to your CSS"); it doesn't matter if this is before or after the code you wrote in step 6:

    Save your code and refresh your page; if you don't see the image change, make sure you've typed everything correctly. Now, change and play with everything! Check what happens if you define both the width and the height of your image; try making either the top or right values negative. Note that the "opacity" property only takes values 0-1. I'mm skipping an explanation for this one, since it should all become clear with a bit of experimentation.
  12. Let's put a third kind of element in here: video. First, we'll go over how to include a video from YouTube. Right click on your video in YouTube, and choose "Copy embed code." You can paste this directly into your body, and it will work. YouTube has added CSS into the iframe tag, which is fine, but may cause unnecessary confusion at this point in the coding process. So, alter the iframe (ie, delete a ton from what you just copy-and-pasted) to look like the following:

    Now, in your CSS (between <style> and </style>), add the following:

    Notice that this is the same as when you added CSS to your image, except that "iframe" replaces "img" before the curly brackets. Change and delete any of the above. You'll want to define AT LEAST your iframe's position; width OR height (you can have both but need at least one); top OR bottom (one or the other); and left OR right (one or the other).
  13. As a general rule, elements layer on top of one another in the order that they appear in your body—and you won't be able to press play on your iframe video if it's covered by something else (like an image with less than full opacity). We will get into layers and the "z-index" property next week, but for now, if your iframe is covered up, feel free to add "z-index: 10;" into its CSS, like so:

    This will make your iframe the top layer, and you'll be able to press play. You can also, of course, solve this problem by resizing or moving whatever element is covering your iframe.
  14. If you want to add a video you have downloaded (original or otherwise), it's a bit simpler. Choose a video, and place it in the same folder as your index.html file, like you did with your image. The video tag currently supports .mp4, .ogg, and .webm—so, if your video is not in one of those formats, use an online converter to make it so. Then, add this code into your body:

    If your video is .ogg, [your-video-extension] should be "ogg"; etc. You don't need "loop" if you don't want your video to loop, but "controls" is the easiest way to make a play button—without which your video won't play. To add CSS, use "video" before the curly brackets.
  15. There are many ways to define measurements in code, but we're going to stick to px, vh, and vw. I've already been using these throughout the tutorial, but I'll now explain them. Pixels (px) will remain the same size regardless of how large your screen is, and vh/vw (or viewport height and viewport width, respectively) will change relative to the height and width of your screen, respectively, where 100vw is the full width of your screen. Change one or more of the measurements in your CSS to vw or vh, and then resize your screen to see what happens. And don't worry about mixing vw, vh, and px for one element or even one property (if that property takes various numerical values); with very few exceptions, this will work just fine.
  16. The last element type we'll include this week is the audio file. Move an audio file to the folder that houses your index.html file. If this file is not .wav, .mp3, or .mp4, use an online converter to make it so. Then, type the following into your body:

    You can use CSS to change the placement of this element, by using the same format you used for the video and iframe, and defining the same properties: just write "audio" before the curly brackets instead. We're not going to learn how to change this element's appearance, unfortunately. Like videos and iframes, you won't be able to press play on an audio if it's covered up. Try changing the z-index or moving other elements around so that's not the case.
  17. Finally, let's put in some links. Before we go any further: a link is the the element on a page (usually it's a few words, but it can also be many words, an image, a shape, or a video) that, when you click it, takes you to a new webpage. People sometimes refer to the url (Uniform Resource Locators, or the specific address of a webpage) as the "link," but that's not technically correct; a link defines the url to which it will lead. A link is always going to be a kind of modified HTML element. To make an element (again, text, image, or video) into a link, you simply add "<a href=[your-link-url]>" before it, and "</a>" after it. In other words, here's how you'd format various elements as links:

    Experiment with making different kinds of elements into links. Think about how links can function strangely, ie., not functionally. Technical warnings:
  18. Congrats! You've finished your first web artwork. Now, play more. In the next tutorial, we'll learn how to give different CSS to individual text/images/video/audio, so that you can add much more content to the page.