1) Connect to your server via Cyberduck. Delete all content in your public_html folder.1Bonus points if you verify that you can connect to your server via your lab computer and your laptop.
3) Navigate to yourdomain.com/nmi/4110/project-one. In that folder, make a new folder called “css”.
4) Open Brackets. Create two new files. File one: an HTML file named—you guessed it!—index.html. File two: a CSS file named style.css. You might want to go ahead and set up a vertical split view in Brackets.
5) In your index.html, create our usual HTML boilerplate from memory—click the link above if you need help.
6) In the <head> of index.html, go ahead and link to your style.css file. Remember the three elements of a proper <link> tag. Again, try to do this from memory.
7) 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.4
8) 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.
9) Underneath your <header> element, add a <main> element.5
10) At this point, be sure to save your index.html in Brackets. Now, head over to the Finder, navigate to your project-one folder. There, duplicate6 your index.html twice. Rename one of the files—again, you guessed it!—page-two.html and the other page-three.html.
11) Stop and think about why we did what we did in step 10. 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.
12) 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 descriptive alt=”” attribute. We’ll talk more about why in class on Friday, but it’s quite important. Also, remind me in class on Friday to talk about properly sizing images.
- Maintain proper indenting throughout.
- Experiment with classes!
13) And now, on to your style.css. A few things to think about here:
- Proper formatting / indenting throughout, obvs.
- Organize your style logically from most broad to 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, a nav! Try searching for a tutorial / guide on how to do so.
- Don’t forget about the specific link styling requirements in the project description. See if you can figure out how to make them happen on your own.
14) At the end of class, upload all the files from your project-one folder7 into your public_html folder on your server!
15) Bonus points: update something on your site, on your server, using Cyberduck’s edit tool (which should point to Brackets) and then compare the edited file on your server with the local copy saved in Dropbox. Also, think about why we call the copy in Dropbox the local copy.
That should be more than enough to keep you busy throughout class and homework time. Looking forward to seeing what you made on Friday!
Yes, I know. This again. But remember: practice practice practice. ↩
or move to a single folder called “early_work” or something similar↩
But seriously, just delete it.↩
Also, they’re just fancy (semantic) div tags—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.html and selecting “Duplicate” or, better, by clicking once on index.html and then holding down the Option key while you drag the file within the Finder.↩
But not the enclosing folder itself!↩