{"id":4484,"date":"2024-02-20T22:15:38","date_gmt":"2024-02-20T22:15:38","guid":{"rendered":"https:\/\/nmi.cool\/web\/?page_id=4484"},"modified":"2024-02-20T22:15:38","modified_gmt":"2024-02-20T22:15:38","slug":"getting-started-with-project-two_emuel_version","status":"publish","type":"page","link":"https:\/\/nmi.cool\/web\/getting-started-with-project-two_emuel_version\/","title":{"rendered":"Getting started with Project Two_Emuel_Version"},"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, create three folders:  <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 (images, custom css, 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\">Grab the Starter Template<\/h2>\n\n\n\n<p><\/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 href=\"https:\/\/getbootstrap.com\" target=\"_blank\" rel=\"noreferrer noopener\">Bootstrap<\/a> to copy the Bootstrap Starter Template with CDN links to both the Bootstrap css and js files (you have done this before). <\/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<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-1-4484\" id=\"note-1-4484\" rel=\"footnote\">1<\/a>. You might even include some custom <a href=\"https:\/\/nmi.cool\/web\/media-queries\/\">media queries<\/a>!<a href=\"#footnote-2-4484\" id=\"note-2-4484\" rel=\"footnote\">2<\/a><\/p>\n<div class=\"footnotes\"><hr \/><ol><li id=\"footnote-1-4484\" class=\"footnote\"><p> Remember, your custom.css will be added to your HTML document right under the bootstrap.css stylesheet<a href=\"#note-1-4484\" class=\"footnote-return\">&#8617;<\/a><\/p><\/li><!--\/#footnote-1.footnote--><li id=\"footnote-2-4484\" 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-2-4484\" class=\"footnote-return\">&#8617;<\/a><\/p><\/li><!--\/#footnote-2.footnote--><\/ol><\/div><!--\/#footnotes-->","protected":false},"excerpt":{"rendered":"<p>Project Two Folder and File Structure To get started, create three folders: 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, each should be entirely separate from the other. Each should contain: This is an important &hellip; <a href=\"https:\/\/nmi.cool\/web\/getting-started-with-project-two_emuel_version\/\" class=\"more-link\">Continue reading <span class=\"screen-reader-text\">Getting started with Project Two_Emuel_Version<\/span><\/a><\/p>\n","protected":false},"author":13,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-4484","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/nmi.cool\/web\/wp-json\/wp\/v2\/pages\/4484","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\/13"}],"replies":[{"embeddable":true,"href":"https:\/\/nmi.cool\/web\/wp-json\/wp\/v2\/comments?post=4484"}],"version-history":[{"count":2,"href":"https:\/\/nmi.cool\/web\/wp-json\/wp\/v2\/pages\/4484\/revisions"}],"predecessor-version":[{"id":4487,"href":"https:\/\/nmi.cool\/web\/wp-json\/wp\/v2\/pages\/4484\/revisions\/4487"}],"wp:attachment":[{"href":"https:\/\/nmi.cool\/web\/wp-json\/wp\/v2\/media?parent=4484"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}