{"id":51,"date":"2018-01-23T23:50:20","date_gmt":"2018-01-24T04:50:20","guid":{"rendered":"http:\/\/newmediaproduction.mynmi.net\/?page_id=51"},"modified":"2023-09-06T23:58:42","modified_gmt":"2023-09-06T23:58:42","slug":"getting-started-on-project-one","status":"publish","type":"page","link":"https:\/\/nmi.cool\/web\/getting-started-on-project-one\/","title":{"rendered":"Getting started on Project One"},"content":{"rendered":"\n
\"\"
Photo by Dayne Topkin<\/a> on Unsplash<\/a>.<\/figcaption><\/figure>\n\n\n\n

1) In your class folder, navigate to the project-one folder. Within the project-one folder, create two new folders, one named css<\/code> and one named img<\/code>.<\/p>\n\n\n\n

2) Open Visual Studio Code. Create two new files. File one: an HTML file named\u2014you guessed it!\u2014index.html<\/code>. Save this within your project-one<\/code> folder. File two: a CSS file named style.css<\/code>, saved in your css folder.<\/p>\n\n\n\n

3) In your index.html<\/code>, start with our usual HTML boilerplate<\/a>, either with the VS Code html5<\/code> autocomplete or, if you’re up for a challenge, from memory!<\/p>\n\n\n\n

4) In the <head><\/code> of index.html<\/code>, go ahead and link to your style.css<\/code> file. Remember the three elements of a proper <link><\/code> element<\/a>. Again, try to do this from memory.<\/p>\n\n\n\n

5) In the <body><\/code> of index.html<\/code>, add a <header><\/code> element<\/a> and, enclosed within it, a <nav><\/code> element<\/a>. 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<\/a><\/p>\n\n\n\n

6) In your <nav><\/code>, add a <ul><\/code> with three <li><\/code> elements. Each <li><\/code> should contain a link to one of the three pages of your site. Your first page is, of course, index.html<\/code>. Your second and third pages should be page-two.html<\/code> and page-three.html<\/code>.<\/p>\n\n\n\n

7) Underneath your <header><\/code> element, add a <main><\/code> element.2<\/a><\/p>\n\n\n\n

8) At this point, be sure to save your index.html<\/code> in Visual Studio Code. Now, head over to the Finder, navigate to your project-one<\/code> Dropbox folder. There, duplicate3<\/a> your index.html<\/code> twice. Rename one of the files\u2014again, you guessed it!\u2014page-two.html<\/code> and the other page-three.html<\/code>.<\/p>\n\n\n\n

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.<\/p>\n\n\n\n

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:<\/p>\n\n\n\n