<spanclass="line"><span></html></span></span></code></pre></div><p>That's it! It’s our little dollhouse of a webpage!</p><p>Granted ... all the webpage has, is a headline that says "Welcome to Rebel Coding".</p><h2id="html-page-structure"tabindex="-1"><ahref="#html-page-structure">#</a> HTML Page Structure <aclass="header-anchor"href="#html-page-structure"aria-label="Permalink to “# HTML Page Structure”"></a></h2><p>So what’s going on with these first HTML tags?</p><p><code><html><head></head><body></body></html></code></p><p><strong>HTML:</strong> Declarative containers to announce what language we're using; you might also you see a DOCHTML tag.</p><p><strong>Head:</strong> Unseen information, pulling in files.</p><p>Later on we’ll be getting our own set of files to start with; and in the <code><head></code> tag you’ll see a bunch of <code><link></code> tags that have links to other files. This is like the brain gathering all the information the <code><body></code> below will need to carry out its prescribed operations.</p><p><strong>Body:</strong> Where all the visible action happens!</p><h2id="nested-properties-attributes"tabindex="-1"><ahref="#nested-properties-attributes">#</a> Nested Properties / Attributes <aclass="header-anchor"href="#nested-properties-attributes"aria-label="Permalink to “# Nested Properties / Attributes”"></a></h2><p><strong>Basic coding concept #2:</strong> nested properties, attributes and objects.</p><p>Let’s introduce the <code><h1></code> tags with this topic.</p><divclass="language-"><buttontitle="Copy Code"class="copy"></button><spanclass="lang"></span><preclass="shiki shiki-themes github-light github-dark"style="--shiki-light:#24292e;--shiki-dark:#e1e4e8;--shiki-light-bg:#fff;--shiki-dark-bg:#24292e;"tabindex="0"dir="ltr"><code><spanclass="line"><span><h1>Header 1</h1></span></span>
<spanclass="line"><span><h3>Header 3</h3></span></span></code></pre></div><p>But what if I want Header 1 to be the color green??</p><p><code><h1 style=”color: green;”>Header 1</h1></code></p><p>Important to notice how deeply nested structures can become.</p><p>Here we have a property <code>color</code> within a property <code>style</code> within a tag <code>h1</code>!!</p><p>And this is just the beginning of the idea; how objects can contain other objects, be they variables, functions or entirely other objects themselves ~ in JavaScript everything is an object though ~~ eeks, more later!</p><h2id="basic-html-tags"tabindex="-1"><ahref="#basic-html-tags">#</a> Basic HTML Tags <aclass="header-anchor"href="#basic-html-tags"aria-label="Permalink to “# Basic HTML Tags”"></a></h2><p>As we’ve just noted, HTML tags have a beginning and an end:</p><divclass="language-"><buttontitle="Copy Code"class="copy"></button><spanclass="lang"></span><preclass="shiki shiki-themes github-light github-dark"style="--shiki-light:#24292e;--shiki-dark:#e1e4e8;--shiki-light-bg:#fff;--shiki-dark-bg:#24292e;"tabindex="0"dir="ltr"><code><spanclass="line"><span><title>Home: Rebel Coding</title></span></span></code></pre></div><p>This title tag is an excellent example; it defines the title of our webpage.</p><p>HTML tags also have properties, or attributes, of their own.</p><p>Another common HTML tag is the <code><a></code> tag, or anchor tag.</p><p>The HTML tag is what connects the web, using its <em>property</em>‘href’.</p><divclass="language-"><buttontitle="Copy Code"class="copy"></button><spanclass="lang"></span><preclass="shiki shiki-themes github-light github-dark"style="--shiki-light:#24292e;--shiki-dark:#e1e4e8;--shiki-light-bg:#fff;--shiki-dark-bg:#24292e;"tabindex="0"dir="ltr"><code><spanclass="line"><span><a href=”http://www.duckduckgo.com”>DuckDuckGo</a></span></span></code></pre></div><p>And tags can have more than one attribute, or property; an important one is the class property:</p><divclass="language-"><buttontitle="Copy Code"class="copy"></button><spanclass="lang"></span><preclass="shiki shiki-themes github-light github-dark"style="--shiki-light:#24292e;--shiki-dark:#e1e4e8;--shiki-light-bg:#fff;--shiki-dark-bg:#24292e;"tabindex="0"dir="ltr"><code><spanclass="line"><span><table class=”table”></table></span></span></code></pre></div><p>As we’ll see later, classes (and id’s) can be used to modify a group of components in our webpage/application.</p><p>Lists are just good to go over; both ordered, and unordered lists; can you tell the difference?</p><divclass="language-"><buttontitle="Copy Code"class="copy"></button><spanclass="lang"></span><preclass="shiki shiki-themes github-light github-dark"style="--shiki-light:#24292e;--shiki-dark:#e1e4e8;--shiki-light-bg:#fff;--shiki-dark-bg:#24292e;"tabindex="0"dir="ltr"><code><spanclass="line"><span><ul><li></li></ul></span></span>
<spanclass="line"><span></span></span>
<spanclass="line"><span><ol><li></li></ol></span></span></code></pre></div><p>These HTML tags don’t seem to end, or do they?</p><divclass="language-"><buttontitle="Copy Code"class="copy"></button><spanclass="lang"></span><preclass="shiki shiki-themes github-light github-dark"style="--shiki-light:#24292e;--shiki-dark:#e1e4e8;--shiki-light-bg:#fff;--shiki-dark-bg:#24292e;"tabindex="0"dir="ltr"><code><spanclass="line"><span><img/></span></span>
<spanclass="line"><span></span></span>
<spanclass="line"><span><br/></span></span></code></pre></div><p>That’s because the ending is embedded at the tailing slash :0)</p><p>Some tags have no information to include between a start and end point, such as images or line breaks. And so, the exception is mended by placing an end slash as such.</p><p>Remember our <code><link/></code> tags within the <code><head></code> tag? Same thing; no info needed to be included between the tags; all of the info is gathered through the tag’s properties.</p><h2id="css-cascading-style-sheets"tabindex="-1"><ahref="#css-cascading-style-sheets">#</a> CSS - Cascading Style Sheets <aclass="header-anchor"href="#css-cascading-style-sheets"aria-label="Permalink to “# CSS - Cascading Style Sheets”"></a></h2><p><strong>Cascading Style Scripts</strong> are <em>scripts that style our code</em>; we'll explain the cascading part in a moment.</p><p>If I want to change the color of an item, I would use CSS; utilizing the style attribute of the header HTML tag. We saw this earlier.</p><divclass="language-"><buttontitle="Copy Code"class="copy"></button><spanclass="lang"></span><preclass="shiki shiki-themes github-light github-dark"style="--shiki-light:#24292e;--shiki-dark:#e1e4e8;--shiki-light-bg:#fff;--shiki-dark-bg:#24292e;"tabindex="0"dir="ltr"><code><spanclass="line"><span><h1 style=”color: #FE23DD;”>Rebel Coding</h1></span></span></code></pre></div><p>There are many different ways to use CSS, and like JavaScript, the number of CSS libraries seems to always be growing.</p><p>Regardless, the basics are as follows:</p><h3id="inline"tabindex="-1"><ahref="#inline">#</a> Inline <aclass="header-anchor"href="#inline"aria-label="Permalink to “# Inline”"></a></h3><p>Here we add the styling code directly within the tag to which it is to be applied; as shown above.</p><p>We add a <em>style</em> property to the tag we’re modifying, and then include our preferred augmentation. We are changing the color, and size of our <code><h1></code> text.</p><divclass="language-"><buttontitle="Copy Code"class="copy"></button><spanclass="lang"></span><preclass="shiki shiki-themes github-light github-dark"style="--shiki-light:#24292e;--shiki-dark:#e1e4e8;--shiki-light-bg:#fff;--shiki-dark-bg:#24292e;"tabindex="0"dir="ltr"><code><spanclass="line"><span><html></span></span>
<spanclass="line"><span></html></span></span></code></pre></div><h3id="embedded"tabindex="-1"><ahref="#embedded">#</a> Embedded <aclass="header-anchor"href="#embedded"aria-label="Permalink to “# Embedded”"></a></h3><p>As we alluded to earlier, what makes CSS so useful is how we can use it to make adjustments to a whole groups of tags!</p><p>Instead of including a <em>style</em> property on the <code><h1></code> tag, we use the <code><style></code> tag up in the header! Now we are able to list the tags we want to affect, and define our preferences.</p><divclass="language-"><buttontitle="Copy Code"class="copy"></button><spanclass="lang"></span><preclass="shiki shiki-themes github-light github-dark"style="--shiki-light:#24292e;--shiki-dark:#e1e4e8;--shiki-light-bg:#fff;--shiki-dark-bg:#24292e;"tabindex="0"dir="ltr"><code><spanclass="line"><span><html></span></span>
<spanclass="line"><span></html></span></span></code></pre></div><h3id="embedded-class"tabindex="-1"><ahref="#embedded-class">#</a> Embedded + Class <aclass="header-anchor"href="#embedded-class"aria-label="Permalink to “# Embedded + Class”"></a></h3><p>What if you don't want to affect every <code><h1></code> tag?</p><p>We use classes! Classes are heavily used in CSS and styling libraries.</p><p>Notice how the <em>class</em> attribute, in an HTML tag, allows for more than one parameter, separated by a space. Notice that the class attribute can contain more than one class.</p><divclass="language-"><buttontitle="Copy Code"class="copy"></button><spanclass="lang"></span><preclass="shiki shiki-themes github-light github-dark"style="--shiki-light:#24292e;--shiki-dark:#e1e4e8;--shiki-light-bg:#fff;--shiki-dark-bg:#24292e;"tabindex="0"dir="ltr"><code><spanclass="line"><span><html></span></span>
<spanclass="line"><span></html></span></span></code></pre></div><p>Within our <code>style</code> tag, we use the <code>.</code> notation to indicate that an item is a class; <code>#</code> is used to denote ids.</p><h3id="imported"tabindex="-1"><ahref="#imported">#</a> Imported <aclass="header-anchor"href="#imported"aria-label="Permalink to “# Imported”"></a></h3><p>Lastly we must realize that for an entire application there will be a whole heap of CSS code. And having it all in the same file as the base index file would be ridiculous!</p><p>So, we are going to write a completely separate file, and <em>import</em> it into our index file.</p><p>We do this using a <code><link></code> tag, that contains two properties, <em>rel</em> and <em>href</em>. <em>rel</em> defines the relationship of the file being consumed; and <em>href</em> provides the address at which the file can be found, <em>hyperlink-reference</em>.</p><divclass="language-"><buttontitle="Copy Code"class="copy"></button><spanclass="lang"></span><preclass="shiki shiki-themes github-light github-dark"style="--shiki-light:#24292e;--shiki-dark:#e1e4e8;--shiki-light-bg:#fff;--shiki-dark-bg:#24292e;"tabindex="0"dir="ltr"><code><spanclass="line"><span><html></span></span>
<spanclass="line"><span></html></span></span></code></pre></div><h3id="so-what-does-cascading-styles-sheets-mean"tabindex="-1"><ahref="#so-what-does-cascading-styles-sheets-mean">#</a> So what does Cascading Styles Sheets Mean ? <aclass="header-anchor"href="#so-what-does-cascading-styles-sheets-mean"aria-label="Permalink to “# So what does Cascading Styles Sheets Mean ?”"></a></h3><p><strong>Cascading</strong> refers to how instructions are interpreted.</p><p>What if the <em>style.css</em> scripts says <code><h1></code> tags should all be green, but a style property on the page specifies that this specific <code><h1></code> tag should be blue?? Which will take precedence?</p><p>And what if a style attribute is on a specific <code><h1></code> tag, saying it should be yellow?</p><p><em>Most of the time</em> the page, or component, specific parameter/property/attribute will take precedence in styling the tag. And this is attributed to the cascading nature of style scripts 😃</p><ol><li>Inline CSS modifications</li><li>Mods in the <code><head></code> tag</li><li>Imported Scripts in descending order (last to load take precedence.)</li></ol><h2id="wireframing"tabindex="-1"><ahref="#wireframing">#</a> WireFraming <aclass="header-anchor"href="#wireframing"aria-label="Permalink to “# WireFraming”"></a></h2><p>Now you need to start designing your website!! And the first step is to draw a picture.</p><p>Yup, you heard me -- bust out the crayon and markers, we gotta draw!</p><p>That’s what wireframing is -- drawing a rough outline of how you want your webpage to look -- deciding where you want certain sections to appear; heck deciding what sections you want to have in the first place!</p><p>How do you want your menu to operate?</p><p>Are you wanting to make a single, or multi-, page site?</p><p>These are the questions wireframing helps us to answer; and when we’re ready, we simply transcribe our drawings into an HTML/CSS structure.</p><h2id="your-website-build-out"tabindex="-1"><ahref="#your-website-build-out">#</a> Your Website Build-Out <aclass="header-anchor"href="#your-website-build-out"aria-label="Permalink to “# Your Website Build-Out”"></a></h2><p>You’ve got a few options to start with - you can start with a blank page or use one of the templates provided!</p><h3id="basic"tabindex="-1"><ahref="#basic">#</a> Basic <aclass="header-anchor"href="#basic"aria-label="Permalink to “# Basic”"></a></h3><p>Displays paragraphs, links, lists and tables.</p><h3id="basic-1"tabindex="-1"><ahref="#basic-2">#</a> Basic + <aclass="header-anchor"href="#basic-1"aria-label="Permalink to “# Basic +”"></a></h3><p>Implements JavaScript</p><h2id="templating-with-bootstrap"tabindex="-1"><ahref="#templating-with-bootstrap">#</a> Templating with Bootstrap <aclass="header-anchor"href="#templating-with-bootstrap"aria-label="Permalink to “# Templating with Bootstrap”"></a></h2><p>One of the first CSS libraries was called Bootstrap which uses a grid system to create mobile-friendly web pages.</p><p>Let’s dig into how it does that.</p><p>After pulling in our necessary libraries, Bootstrap uses a collection of classes to define various parameters. The grid-specific classes are best paired with <code><div></code>&<code><span></code> tags; while it being important to note, tags can have multiple classes.</p><pre><code><div class=”col-lg-6 col-md-8 col-sm-12 col-xs-12”></div>
</code></pre><p>Bootstrap operates off of a 12 block grid system with four adjustable display size categories: large, medium, small, extra-small.</p><p>In the previous line of code we said that we wanted the contents of that <code><div></code> tag to occupy six blocks on a large screen, eight blocks on a medium-sized screen, and 12 blocks, or the entire page, on smaller screens.</p><h2id="css-more-in-depth-sass-less"tabindex="-1"><ahref="#css-more-in-depth-sass-less">#</a> CSS More In-Depth (SASS/LESS) <aclass="header-anchor"href="#css-more-in-depth-sass-less"aria-label="Permalink to “# CSS More In-Depth (SASS/LESS)”"></a></h2><p>What is this all about? CSS Preprocessor language that is compiled into CSS.</p><p>Variables, mixins, etc --</p><p><ahref="https://en.wikipedia.org/wiki/Sass*(stylesheet_language)"target="_blank"rel="noreferrer">https://en.wikipedia.org/wiki/Sass_(stylesheet_language)</a></p><p><ahref="https://en.wikipedia.org/wiki/Less*(stylesheet_language)"target="_blank"rel="noreferrer">https://en.wikipedia.org/wiki/Less_(stylesheet_language)</a></p><h1id="looking-ahead-to-mobile"tabindex="-1">Looking Ahead to Mobile <aclass="header-anchor"href="#looking-ahead-to-mobile"aria-label="Permalink to “Looking Ahead to Mobile”"></a></h1><hr><p>Back to the grid structure --- what are apps?</p><p><strong>Using an inspector.</strong> If you’re using Firefox or Chrome, right click on any browser window and choose the Inspect Element option.</p><p>In the upper bar of the new window that appears will be an option to toggle between full-screen and alternate view.</p><p>You can do this to see how the mobile friendly design you created using Bootstrap, will appear on various-sized screens.</p></div></div></main><footerclass="VPDocFooter"data-v-7011f0d8data-v-e257564d><!--[--><!--]--><!----><navclass="prev-next"aria-labelledby="doc-footer-aria-label"data-v-e257564d><spanclass="visually-hidden"id="doc-footer-aria-label"data-v-e257564d>Pager</span><divclass="pager"data-v-e257564d><aclass="VPLink link pager-link prev"href="/rebel_coding/termintro.html"data-v-e257564d><!--[--><spanclass="desc"data-v-e257564d>Previous page</span><spanclass="title"data-v-e257564d>Intro to CLI</span><!--]--></a></div><divclass="pager"data-v-e257564d><aclass="VPLink link pager-link next"href="/rebel_coding/step2.html"data-v-e257564d><!--[--><spanclass="desc"data-v-e257564d>Next page</span><spanclass="title"data-v-e257564d>Step 2: JavaScript</span><!--]--></a></div></nav></footer><!--[--><!--]--></div></div></div><!--[--><!--]--></div></div><!----><!--[--><!--]--></div></div>
