{"id":1580,"date":"2020-02-20T23:40:43","date_gmt":"2020-02-21T04:40:43","guid":{"rendered":"http:\/\/newmediaproduction.mynmi.net\/?page_id=1580"},"modified":"2023-09-28T15:16:36","modified_gmt":"2023-09-28T15:16:36","slug":"getting-started-with-project-two","status":"publish","type":"page","link":"https:\/\/nmi.cool\/web\/getting-started-with-project-two\/","title":{"rendered":"Getting started with Project Two"},"content":{"rendered":"\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"2560\" height=\"1440\" src=\"https:\/\/nmi.cool\/newmediaproduction\/wp-content\/uploads\/sites\/3\/2020\/02\/gia-oris-_uM5_nG2ssc-unsplash-scaled-1.jpg\" alt=\"Shoes standing in front of pink text on street saying &quot;start here&quot;\" class=\"wp-image-1587\" srcset=\"https:\/\/nmi.cool\/web\/wp-content\/uploads\/sites\/3\/2020\/02\/gia-oris-_uM5_nG2ssc-unsplash-scaled-1.jpg 2560w, https:\/\/nmi.cool\/web\/wp-content\/uploads\/sites\/3\/2020\/02\/gia-oris-_uM5_nG2ssc-unsplash-scaled-1-300x169.jpg 300w, https:\/\/nmi.cool\/web\/wp-content\/uploads\/sites\/3\/2020\/02\/gia-oris-_uM5_nG2ssc-unsplash-scaled-1-1024x576.jpg 1024w, https:\/\/nmi.cool\/web\/wp-content\/uploads\/sites\/3\/2020\/02\/gia-oris-_uM5_nG2ssc-unsplash-scaled-1-768x432.jpg 768w, https:\/\/nmi.cool\/web\/wp-content\/uploads\/sites\/3\/2020\/02\/gia-oris-_uM5_nG2ssc-unsplash-scaled-1-1536x864.jpg 1536w, https:\/\/nmi.cool\/web\/wp-content\/uploads\/sites\/3\/2020\/02\/gia-oris-_uM5_nG2ssc-unsplash-scaled-1-2048x1152.jpg 2048w, https:\/\/nmi.cool\/web\/wp-content\/uploads\/sites\/3\/2020\/02\/gia-oris-_uM5_nG2ssc-unsplash-scaled-1-1568x882.jpg 1568w\" sizes=\"auto, (max-width: 2560px) 100vw, 2560px\" \/><figcaption class=\"wp-element-caption\">Photo by <a href=\"https:\/\/unsplash.com\/photos\/_uM5_nG2ssc\">Gia Oris<\/a><\/figcaption><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>Project Two Folder and File Structure<\/strong><\/h2>\n\n\n\n<p>To get started, navigate to the <code>project-two<\/code> folder in your course file structure. <\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Panel Folders<\/h3>\n\n\n\n<p>You&#8217;ll also see a folder each for <code>panel-one<\/code>, <code>panel-two<\/code>, and <code>panel-three<\/code>. <\/p>\n\n\n\n<p>Think of each folder for each panel as its own separate miniature site. Even though all three panels\/sites will be powered by Bootstrap, each should be entirely separate from the other. Each should contain: <\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Its own separate <code>index.html<\/code><\/li>\n\n\n\n<li>Its own separate folder structure (i.e., a <code>css<\/code>, <code>js<\/code>, and <code>img<\/code> folder) <\/li>\n\n\n\n<li>Its own separate copies of all necessary files in those folders (<code>bootstrap.css<\/code>, etc.)<\/li>\n<\/ul>\n\n\n\n<p>This is an important best practice for two reasons:&nbsp;<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>If you need to move panels around, you won&#8217;t have to worry about breaking any links to images, JavaScript, or CSS. (i.e.: your file path will always be \u201cgo into XX folder and find XX file\u201d rather than going up and out of the current subdirectory).&nbsp;<\/li>\n\n\n\n<li>You&#8217;ll be able to compress (zip) the folder for a panel, and all of the dependent files will travel with it. This is especially helpful if you\u2019re sending the panel to your instructor for troubleshooting!<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"local-copies\">Creating <strong>local copies of Bootstra<\/strong>p&#8217;s<strong> CSS and JavaScript<\/strong> files<\/h2>\n\n\n\n<p class=\"has-medium-pink-color has-text-color\">Note for Fall &#8217;23 students: This is optional! It&#8217;s good know the benefits of downloading local CSS and JS files, but for the purposes of this project \u2013 I recommend that you use the links.<\/p>\n\n\n\n<p>For this project, it&#8217;s a good idea to move from using copies of Bootstrap&#8217;s CSS and JavaScript files served by a CDN to locally stored copies. Why?<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>First, it allows you to work offline. Helpful!<\/li>\n\n\n\n<li>Second, it reduces external dependencies. For your site to function properly when linking to CDN hosted files, you&#8217;re betting that a server besides your own is up and running.<a href=\"#footnote-1-1580\" id=\"note-1-1580\" rel=\"footnote\">1<\/a><\/li>\n\n\n\n<li>Third, the CDN files are really intending for rapid development purposes, not for production use. It&#8217;s not quite <a href=\"https:\/\/simple.wikipedia.org\/wiki\/Hotlinking\">hotlinking<\/a>, but the concept is similar.<\/li>\n<\/ul>\n\n\n\n<p>Thankfully, replacing the CDN files with local copies is super-easy!<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Grab the Starter Template<\/h2>\n\n\n\n<p>To add the local copies of CSS and JavaScript, your best bet is to make sure you have an HTML file with the Bootstrap Starter Template. This will include links to the the remote version of the CSS and JavaScript files, so it&#8217;s a good idea to use it to get started. <\/p>\n\n\n\n<p>To get started, open Visual Studio Code and create a new file. Save it as <code>index.html<\/code> in your <code>panel-one<\/code> folder.<\/p>\n\n\n\n<p>Next, head over to <a rel=\"noreferrer noopener\" href=\"https:\/\/getbootstrap.com\" target=\"_blank\">Bootstrap<\/a> to copy the Bootstrap Starter Template. <\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Click &#8220;Read the Docs&#8221;<\/li>\n\n\n\n<li>Scroll down to &#8220;Quick Start&#8221; <\/li>\n\n\n\n<li>Copy the code and paste it into your <code>index.html<\/code> file<\/li>\n<\/ul>\n\n\n\n<p>Now you should see a remote copy of the Bootstrap CSS (located in the <code>&lt;head&gt; <\/code>of your HTML document) and JavaScript files (located right before the closing <code>&lt;\/body&gt;<\/code> tag in your HTML document).<\/p>\n\n\n\n<p class=\"has-medium-pink-color has-text-color\">Let&#8217;s replace the CSS file first. (Again, this is optional. You can just use the linked CSS)<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><strong><code>bootstrap.css<\/code>:<\/strong><\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Go to <a href=\"http:\/\/getbootstrap.com\">getbootstrap.com<\/a> \u2192 Download \u2192 Compiled CSS and JS \u2192 Download.&nbsp;<\/li>\n\n\n\n<li>Unzip the file, go to the <code>css<\/code> folder, and find <code>bootstrap.css<\/code><\/li>\n\n\n\n<li>Drag <code>bootstrap.css<\/code> and <code>bootstrap.min.css<\/code> <a href=\"#footnote-2-1580\" id=\"note-2-1580\" rel=\"footnote\">2<\/a> into the <code>css<\/code> folder for <code>panel-one<\/code><\/li>\n\n\n\n<li>In your <code>index.html<\/code>, delete the CDN link (including the <code>integrity<\/code> and <code>cross-origin<\/code> attributes) and link the local copy of <code>bootstrap.min.css<\/code><\/li>\n<\/ul>\n\n\n\n<p>Your final result will look like this: <\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">&lt;link rel=\"stylesheet\" href=\"css\/bootstrap.min.css\"&gt;<\/pre>\n\n\n\n<p class=\"has-medium-pink-color has-text-color\">Now, we&#8217;ll work on the JavaScript file. (Again, this is optional. You can just use the linked JS)<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><strong><code>bootstrap.bundle.js<\/code>:<\/strong>&nbsp;<\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li>If you have not already: Go to <a href=\"http:\/\/getbootstrap.com\">getbootstrap.com<\/a> \u2192 Download \u2192 Compiled CSS and JS \u2192 Download.<a href=\"#footnote-3-1580\" id=\"note-3-1580\" rel=\"footnote\">3<\/a><\/li>\n\n\n\n<li>Unzip the file, go to the <code>js<\/code> folder, and find <code>bootstrap.js<\/code> and Unzip the file, go to the <code>js<\/code> folder, and find <code>bootstrap.bundle.js<\/code> and <code>bootstrap.bundle.min.js<\/code><\/li>\n\n\n\n<li>Drag <code>bootstrap.bundle.js<\/code> and <code>bootstrap.bundle.min.js<\/code> into the <code>js<\/code> folder for <code>panel-one<\/code><\/li>\n\n\n\n<li>In your <code>index.html<\/code>, scroll down to the JavaScript file just above the closing <code>body<\/code> tag. This <code>bootstrap.bundle.min.js<\/code> file will replace the script file that calls to the CDN version of <code>bootstrap.js<\/code>.<\/li>\n\n\n\n<li>Delete the CDN link (including the <code>integrity<\/code> and <code>cross-origin<\/code> attributes for the script file and link the local copy of <code>bootstrap.js<\/code>\n<ul class=\"wp-block-list\">\n<li>Make sure that you don&#8217;t delete the closing <code>&lt;\/script&gt;<\/code> tag! <\/li>\n<\/ul>\n<\/li>\n<\/ul>\n\n\n\n<p>Once you&#8217;re done with this you can save your <code>index.html<\/code>. You now have a perfect starter template to get going on Panel One! <\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1528\" height=\"832\" src=\"https:\/\/nmi.cool\/newmediaproduction\/wp-content\/uploads\/sites\/3\/2020\/02\/index.png\" alt=\"Source code of Panel One index.html.\" class=\"wp-image-1637\" srcset=\"https:\/\/nmi.cool\/web\/wp-content\/uploads\/sites\/3\/2020\/02\/index.png 1528w, https:\/\/nmi.cool\/web\/wp-content\/uploads\/sites\/3\/2020\/02\/index-300x163.png 300w, https:\/\/nmi.cool\/web\/wp-content\/uploads\/sites\/3\/2020\/02\/index-1024x558.png 1024w, https:\/\/nmi.cool\/web\/wp-content\/uploads\/sites\/3\/2020\/02\/index-768x418.png 768w\" sizes=\"auto, (max-width: 1528px) 100vw, 1528px\" \/><figcaption class=\"wp-element-caption\">The finished result of your Panel One index.html.<\/figcaption><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">Adding Bootstrap components and customizing with a custom.css<\/h2>\n\n\n\n<p>In much the same way you did with your <a href=\"https:\/\/nmi.cool\/web\/bootstrap-playground\/\">Bootstrap Playground<\/a>, explore the bounty of offerings at <a href=\"http:\/\/getbootstrap.com\">getbootstrap.com<\/a> and use them to start constructing your Panel One <a href=\"https:\/\/nmi.cool\/web\/bootstrap-triptych\/\">to spec<\/a>.<\/p>\n\n\n\n<p>Then, customize your site with a <a href=\"https:\/\/nmi.cool\/web\/customizing-bootstrap\/\">custom.css<\/a><a href=\"#footnote-4-1580\" id=\"note-4-1580\" rel=\"footnote\">4<\/a>. You might even include some custom <a href=\"https:\/\/nmi.cool\/web\/media-queries\/\">media queries<\/a>!<a href=\"#footnote-5-1580\" id=\"note-5-1580\" rel=\"footnote\">5<\/a><\/p>\n<div class=\"footnotes\"><hr \/><ol><li id=\"footnote-1-1580\" class=\"footnote\"><p>Granted, this is a reasonably safe bet, but still, it&#8217;s easy to de-risk completely!<a href=\"#note-1-1580\" class=\"footnote-return\">&#8617;<\/a><\/p><\/li><!--\/#footnote-1.footnote--><li id=\"footnote-2-1580\" class=\"footnote\"><p>Why include both? (We&#8217;ll go through this again for the JavaScript in a minute, too.) The non-minified version of the files is easier to read if you ever need to look through them to learn more about how they work, but the minified versions load more quickly. So, non-minified files for reference, minified files for performance.<a href=\"#note-2-1580\" class=\"footnote-return\">&#8617;<\/a><\/p><\/li><!--\/#footnote-2.footnote--><li id=\"footnote-3-1580\" class=\"footnote\"><p>You should have just done this for the CSS steps, but if you&#8217;re skipping around, you may need to do download the file<a href=\"#note-3-1580\" class=\"footnote-return\">&#8617;<\/a><\/p><\/li><!--\/#footnote-3.footnote--><li id=\"footnote-4-1580\" class=\"footnote\"><p> Remember, your custom.css will be added to your HTML document right under the bootstrap.css stylesheet<a href=\"#note-4-1580\" class=\"footnote-return\">&#8617;<\/a><\/p><\/li><!--\/#footnote-4.footnote--><li id=\"footnote-5-1580\" class=\"footnote\"><p>If you&#8217;re extra-good and promise only to look at it for reference and <em>not<\/em> just copy and paste, <a href=\"https:\/\/nmi.cool\/web\/wp-content\/uploads\/sites\/3\/2022\/02\/panel-one.zip\">here&#8217;s<\/a> a start of a sample Panel One that&#8217;s headed in the right direction.<a href=\"#note-5-1580\" class=\"footnote-return\">&#8617;<\/a><\/p><\/li><!--\/#footnote-5.footnote--><\/ol><\/div><!--\/#footnotes-->","protected":false},"excerpt":{"rendered":"<p>Project Two Folder and File Structure To get started, navigate to the project-two folder in your course file structure. Panel Folders You&#8217;ll also see a folder each for panel-one, panel-two, and panel-three. Think of each folder for each panel as its own separate miniature site. Even though all three panels\/sites will be powered by Bootstrap, &hellip; <a href=\"https:\/\/nmi.cool\/web\/getting-started-with-project-two\/\" class=\"more-link\">Continue reading <span class=\"screen-reader-text\">Getting started with Project Two<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-1580","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/nmi.cool\/web\/wp-json\/wp\/v2\/pages\/1580","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/nmi.cool\/web\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/nmi.cool\/web\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/nmi.cool\/web\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/nmi.cool\/web\/wp-json\/wp\/v2\/comments?post=1580"}],"version-history":[{"count":12,"href":"https:\/\/nmi.cool\/web\/wp-json\/wp\/v2\/pages\/1580\/revisions"}],"predecessor-version":[{"id":4431,"href":"https:\/\/nmi.cool\/web\/wp-json\/wp\/v2\/pages\/1580\/revisions\/4431"}],"wp:attachment":[{"href":"https:\/\/nmi.cool\/web\/wp-json\/wp\/v2\/media?parent=1580"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}