1) In your class folder, navigate to the project-one folder. Within the project-one folder, create two new folders, one named css and one named img.
2) Open Visual Studio Code. Create two new files. File one: an HTML file named—you guessed it!—index.html. Save this within your project-one folder. File two: a CSS file named style.css, saved in your css folder.
3) In your index.html, start with our usual HTML boilerplate, either with the VS Code html5 autocomplete or, if you’re up for a challenge, from memory!
4) In the <head> of index.html, go ahead and link to your style.css file. Remember the three elements of a proper <link> element. Again, try to do this from memory.
5) In the <body> of index.html, add a <header> element and, enclosed within it, a <nav> element. You haven’t seen these elements before, but remember: a big part of learning what you need to learn in this class is learning how to find and implement online resources.1
6) In your <nav>, add a <ul> with three <li> elements. Each <li> should contain a link to one of the three pages of your site. Your first page is, of course, index.html. Your second and third pages should be page-two.html and page-three.html.
7) Underneath your <header> element, add a <main> element.2
8) At this point, be sure to save your index.html in Visual Studio Code. Now, head over to the Finder, navigate to your project-one Dropbox folder. There, duplicate3 your index.html twice. Rename one of the files—again, you guessed it!—page-two.html and the other page-three.html.
9) Stop and think about why we did what we did in the last step. No really: stop and think about it for a second. Think about why it was efficient. Think about why we did it at the particular moment in this process that we did.
10) Okay, from here, it’s up to you. Add some content to each of the three pages. A few quick thoughts to keep in mind as you do so:
- To follow best practices, include only a single
<h1>element per page. - Place any body text in
<p>tags. - All
<img>tags must include a descriptivealt=""attribute. - Maintain proper indenting throughout.
- Experiment with classes!
11) And now, on to your style.css. A few things to think about here:
- Proper formatting / indenting throughout, obvs.
- Organize your style logically from the most broad to the most specific.
- Related to the above point, try to eliminate duplicated styles.
- Don’t just format top-level elements (
h1,h2,nav, etc.)—style a class or two! - Maybe try styling your
<nav>to look more like, well, anav! Try searching for a tutorial / guide on how to do so.
12) When you’re done working, it’s time to publish a copy of the files on your server! Connect to your server via Cyberduck.
13) If you haven’t yet, download the entire file structure for this class here, unzip the file, and then upload the folder called “webdev” to the root of your domain (your public_html folder) in Cyberduck.
14) In Cyberduck, navigate to yourdomain.com/webdev/project-one. Then, copy all the files from your project-one folder 4 into your project-one folder on your server!
Also, they’re just fancy (semantic)
divs—think on that for a bit.↩No link provided this time—it works how you expect it works, but you can look it up if you’re curious.↩
Either by right-clicking
index.htmland selecting “Duplicate” or, better, by clicking once onindex.htmland then holding down the Option key while you drag the file within the Finder.↩But not the enclosing folder itself!↩