DreamFreely/Library
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
ff88990fc73317fdd393f2d29eeac2c9d2cb5727
Library/docs/.vitepress/dist/rebel_coding/step1.html

83 lines
55 KiB
HTML
Raw Blame History

This file contains invisible Unicode characters
This file contains invisible Unicode characters that are indistinguishable to humans but may be processed differently by a computer. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
<!DOCTYPE html>
<html lang="en-US" dir="ltr">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>HTML &amp; CSS | DreamFreely Library</title>
<meta name="description" content="Community Conscious Creations">
<meta name="generator" content="VitePress v2.0.0-alpha.15">
<link rel="preload stylesheet" href="/assets/style.tE5om2fv.css" as="style">
<link rel="preload stylesheet" href="/vp-icons.css" as="style">
<script type="module" src="/assets/app.D2von411.js"></script>
<link rel="preload" href="/assets/inter-roman-latin.Di8DUHzh.woff2" as="font" type="font/woff2" crossorigin="">
<link rel="modulepreload" href="/assets/chunks/theme.CAK4ts65.js">
<link rel="modulepreload" href="/assets/chunks/framework.j4Nev8bF.js">
<link rel="modulepreload" href="/assets/rebel_coding_step1.md.UGFgpiDv.lean.js">
<script id="check-dark-mode">(()=>{const e=localStorage.getItem("vitepress-theme-appearance")||"auto",a=window.matchMedia("(prefers-color-scheme: dark)").matches;(!e||e==="auto"?a:e==="dark")&&document.documentElement.classList.add("dark")})();</script>
<script id="check-mac-os">document.documentElement.classList.toggle("mac",/Mac|iPhone|iPod|iPad/i.test(navigator.platform));</script>
</head>
<body>
<div id="app"><div class="Layout" data-v-1df9f90f><!--[--><!--]--><!--[--><span tabindex="-1" data-v-331ec75c></span><a href="#VPContent" class="VPSkipLink visually-hidden" data-v-331ec75c>Skip to content</a><!--]--><!----><header class="VPNav" data-v-1df9f90f data-v-da52a441><div class="VPNavBar" data-v-da52a441 data-v-70946a35><div class="wrapper" data-v-70946a35><div class="container" data-v-70946a35><div class="title" data-v-70946a35><div class="VPNavBarTitle has-sidebar" data-v-70946a35 data-v-1e38c6bc><a class="title" href="/" data-v-1e38c6bc><!--[--><!--]--><!----><span data-v-1e38c6bc>DreamFreely Library</span><!--[--><!--]--></a></div></div><div class="content" data-v-70946a35><div class="content-body" data-v-70946a35><!--[--><!--]--><div class="VPNavBarSearch search" data-v-70946a35><!----></div><nav aria-labelledby="main-nav-aria-label" class="VPNavBarMenu menu" data-v-70946a35 data-v-39714824><span id="main-nav-aria-label" class="visually-hidden" data-v-39714824> Main Navigation </span><!--[--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/welcome/" tabindex="0" data-v-39714824 data-v-52a1d768><!--[--><span data-v-52a1d768>Welcome</span><!--]--></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/welcome/support.html" tabindex="0" data-v-39714824 data-v-52a1d768><!--[--><span data-v-52a1d768>Support</span><!--]--></a><!--]--><!--]--></nav><!----><div class="VPNavBarAppearance appearance" data-v-70946a35 data-v-6c893767><button class="VPSwitch VPSwitchAppearance" type="button" role="switch" title aria-checked="false" data-v-6c893767 data-v-5337faa4 data-v-1d5665e3><span class="check" data-v-1d5665e3><span class="icon" data-v-1d5665e3><!--[--><span class="vpi-sun sun" data-v-5337faa4></span><span class="vpi-moon moon" data-v-5337faa4></span><!--]--></span></span></button></div><div class="VPSocialLinks VPNavBarSocialLinks social-links" data-v-70946a35 data-v-0394ad82 data-v-d07f11e6><!--[--><a class="VPSocialLink no-icon" href="https://canin.dreamfreely.org" aria-label="org" target="_blank" rel="me noopener" data-v-d07f11e6 data-v-591a6b30><span class="vpi-social-org"></span></a><a class="VPSocialLink no-icon" href="https://shop.dreamfreely.org" aria-label="kitsu" target="_blank" rel="me noopener" data-v-d07f11e6 data-v-591a6b30><span class="vpi-social-kitsu"></span></a><a class="VPSocialLink no-icon" href="https://appdeveloperone.com/DreamFreely" aria-label="zcool" target="_blank" rel="me noopener" data-v-d07f11e6 data-v-591a6b30><span class="vpi-social-zcool"></span></a><!--]--></div><div class="VPFlyout VPNavBarExtra extra" data-v-70946a35 data-v-bf2fac68 data-v-42cb505d><button type="button" class="button" aria-haspopup="true" aria-expanded="false" aria-label="extra navigation" data-v-42cb505d><span class="vpi-more-horizontal icon" data-v-42cb505d></span></button><div class="menu" data-v-42cb505d><div class="VPMenu" data-v-42cb505d data-v-25a6cce8><!----><!--[--><!--[--><!----><div class="group" data-v-bf2fac68><div class="item appearance" data-v-bf2fac68><p class="label" data-v-bf2fac68>Appearance</p><div class="appearance-action" data-v-bf2fac68><button class="VPSwitch VPSwitchAppearance" type="button" role="switch" title aria-checked="false" data-v-bf2fac68 data-v-5337faa4 data-v-1d5665e3><span class="check" data-v-1d5665e3><span class="icon" data-v-1d5665e3><!--[--><span class="vpi-sun sun" data-v-5337faa4></span><span class="vpi-moon moon" data-v-5337faa4></span><!--]--></span></span></button></div></div></div><div class="group" data-v-bf2fac68><div class="item social-links" data-v-bf2fac68><div class="VPSocialLinks social-links-list" data-v-bf2fac68 data-v-d07f11e6><!--[--><a class="VPSocialLink no-icon" href="https://canin.dreamfreely.org" aria-label="org" target="_blank" rel="me noopener" data-v-d07f11e6 data-v-591a6b30><span class="vpi-social-org"></span></a><a class="VPSocialLink no-icon" href="https://shop.dreamfreely.org" aria-label="kitsu" target="_blank" rel="me noopener" data-v-d07f11e6 data-v-591a6b30><span class="vpi-social-kitsu"></span></a><a class="VPSocialLink no-icon" href="https://appdeveloperone.com/DreamFreely" aria-label="zcool" target="_blank" rel="me noopener" data-v-d07f11e6 data-v-591a6b30><span class="vpi-social-zcool"></span></a><!--]--></div></div></div><!--]--><!--]--></div></div></div><!--[--><!--]--><button type="button" class="VPNavBarHamburger hamburger" aria-label="mobile navigation" aria-expanded="false" aria-controls="VPNavScreen" data-v-70946a35 data-v-e5dd9c1c><span class="container" data-v-e5dd9c1c><span class="top" data-v-e5dd9c1c></span><span class="middle" data-v-e5dd9c1c></span><span class="bottom" data-v-e5dd9c1c></span></span></button></div></div></div></div><div class="divider" data-v-70946a35><div class="divider-line" data-v-70946a35></div></div></div><!----></header><div class="VPLocalNav has-sidebar empty" data-v-1df9f90f data-v-db738f89><div class="container" data-v-db738f89><button class="menu" aria-expanded="false" aria-controls="VPSidebarNav" data-v-db738f89><span class="vpi-align-left menu-icon" data-v-db738f89></span><span class="menu-text" data-v-db738f89>Menu</span></button><div class="VPLocalNavOutlineDropdown" style="--vp-vh:0px;" data-v-db738f89 data-v-0bf0e06f><button data-v-0bf0e06f>Return to top</button><!----></div></div></div><aside class="VPSidebar" data-v-1df9f90f data-v-af661f50><div class="curtain" data-v-af661f50></div><nav class="nav" id="VPSidebarNav" aria-labelledby="sidebar-aria-label" tabindex="-1" data-v-af661f50><span class="visually-hidden" id="sidebar-aria-label" data-v-af661f50> Sidebar Navigation </span><!--[--><!--]--><!--[--><div class="no-transition group" data-v-8d50c081><section class="VPSidebarItem level-0" data-v-8d50c081 data-v-d81de50c><div class="item" role="button" tabindex="0" data-v-d81de50c><div class="indicator" data-v-d81de50c></div><h2 class="text" data-v-d81de50c>Welcome</h2><!----></div><div class="items" data-v-d81de50c><!--[--><div class="VPSidebarItem level-1 is-link" data-v-d81de50c data-v-d81de50c><div class="item" data-v-d81de50c><div class="indicator" data-v-d81de50c></div><a class="VPLink link link" href="/welcome/" data-v-d81de50c><!--[--><p class="text" data-v-d81de50c>Chibu / Hola / Hello</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-d81de50c data-v-d81de50c><div class="item" data-v-d81de50c><div class="indicator" data-v-d81de50c></div><a class="VPLink link link" href="/welcome/dreamfreely.html" data-v-d81de50c><!--[--><p class="text" data-v-d81de50c>About DreamFreely</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-d81de50c data-v-d81de50c><div class="item" data-v-d81de50c><div class="indicator" data-v-d81de50c></div><a class="VPLink link link" href="/welcome/canin.html" data-v-d81de50c><!--[--><p class="text" data-v-d81de50c>About Canin Carlos</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="no-transition group" data-v-8d50c081><section class="VPSidebarItem level-0" data-v-8d50c081 data-v-d81de50c><div class="item" role="button" tabindex="0" data-v-d81de50c><div class="indicator" data-v-d81de50c></div><h2 class="text" data-v-d81de50c>EXO-CTO</h2><!----></div><div class="items" data-v-d81de50c><!--[--><div class="VPSidebarItem level-1 is-link" data-v-d81de50c data-v-d81de50c><div class="item" data-v-d81de50c><div class="indicator" data-v-d81de50c></div><a class="VPLink link link" href="/exocto/" data-v-d81de50c><!--[--><p class="text" data-v-d81de50c>Welcome</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-d81de50c data-v-d81de50c><div class="item" data-v-d81de50c><div class="indicator" data-v-d81de50c></div><a class="VPLink link link" href="/exocto/puters.html" data-v-d81de50c><!--[--><p class="text" data-v-d81de50c>Computers</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-d81de50c data-v-d81de50c><div class="item" data-v-d81de50c><div class="indicator" data-v-d81de50c></div><a class="VPLink link link" href="/exocto/oses.html" data-v-d81de50c><!--[--><p class="text" data-v-d81de50c>OSes</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-d81de50c data-v-d81de50c><div class="item" data-v-d81de50c><div class="indicator" data-v-d81de50c></div><a class="VPLink link link" href="/exocto/websites.html" data-v-d81de50c><!--[--><p class="text" data-v-d81de50c>Websites</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-d81de50c data-v-d81de50c><div class="item" data-v-d81de50c><div class="indicator" data-v-d81de50c></div><a class="VPLink link link" href="/exocto/socialmedia.html" data-v-d81de50c><!--[--><p class="text" data-v-d81de50c>Social Media</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-d81de50c data-v-d81de50c><div class="item" data-v-d81de50c><div class="indicator" data-v-d81de50c></div><a class="VPLink link link" href="/exocto/automation.html" data-v-d81de50c><!--[--><p class="text" data-v-d81de50c>Automation</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-d81de50c data-v-d81de50c><div class="item" data-v-d81de50c><div class="indicator" data-v-d81de50c></div><a class="VPLink link link" href="/exocto/appendices.html" data-v-d81de50c><!--[--><p class="text" data-v-d81de50c>Appendices</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="no-transition group" data-v-8d50c081><section class="VPSidebarItem level-0 has-active" data-v-8d50c081 data-v-d81de50c><div class="item" role="button" tabindex="0" data-v-d81de50c><div class="indicator" data-v-d81de50c></div><h2 class="text" data-v-d81de50c>Rebel Coding 101</h2><!----></div><div class="items" data-v-d81de50c><!--[--><div class="VPSidebarItem level-1 is-link" data-v-d81de50c data-v-d81de50c><div class="item" data-v-d81de50c><div class="indicator" data-v-d81de50c></div><a class="VPLink link link" href="/rebel_coding/" data-v-d81de50c><!--[--><p class="text" data-v-d81de50c>Intro to Coding</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-d81de50c data-v-d81de50c><div class="item" data-v-d81de50c><div class="indicator" data-v-d81de50c></div><a class="VPLink link link" href="/rebel_coding/orientation.html" data-v-d81de50c><!--[--><p class="text" data-v-d81de50c>Orientation</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-d81de50c data-v-d81de50c><div class="item" data-v-d81de50c><div class="indicator" data-v-d81de50c></div><a class="VPLink link link" href="/rebel_coding/termintro.html" data-v-d81de50c><!--[--><p class="text" data-v-d81de50c>Intro to CLI</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-d81de50c data-v-d81de50c><div class="item" data-v-d81de50c><div class="indicator" data-v-d81de50c></div><a class="VPLink link link" href="/rebel_coding/step1.html" data-v-d81de50c><!--[--><p class="text" data-v-d81de50c>Step 1: HTML & CSS</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-d81de50c data-v-d81de50c><div class="item" data-v-d81de50c><div class="indicator" data-v-d81de50c></div><a class="VPLink link link" href="/rebel_coding/step2.html" data-v-d81de50c><!--[--><p class="text" data-v-d81de50c>Step 2: JavaScript</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-d81de50c data-v-d81de50c><div class="item" data-v-d81de50c><div class="indicator" data-v-d81de50c></div><a class="VPLink link link" href="/rebel_coding/step3.html" data-v-d81de50c><!--[--><p class="text" data-v-d81de50c>Step 3: Python Scrapers</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-d81de50c data-v-d81de50c><div class="item" data-v-d81de50c><div class="indicator" data-v-d81de50c></div><a class="VPLink link link" href="/rebel_coding/step4.html" data-v-d81de50c><!--[--><p class="text" data-v-d81de50c>Step 4: The Full Stack</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-d81de50c data-v-d81de50c><div class="item" data-v-d81de50c><div class="indicator" data-v-d81de50c></div><a class="VPLink link link" href="/rebel_coding/appendices.html" data-v-d81de50c><!--[--><p class="text" data-v-d81de50c>Appendices</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="no-transition group" data-v-8d50c081><section class="VPSidebarItem level-0" data-v-8d50c081 data-v-d81de50c><div class="item" role="button" tabindex="0" data-v-d81de50c><div class="indicator" data-v-d81de50c></div><h2 class="text" data-v-d81de50c>Rebel Coding 102</h2><!----></div><div class="items" data-v-d81de50c><!--[--><div class="VPSidebarItem level-1 is-link" data-v-d81de50c data-v-d81de50c><div class="item" data-v-d81de50c><div class="indicator" data-v-d81de50c></div><a class="VPLink link link" href="/rebel_coding/v2.html" data-v-d81de50c><!--[--><p class="text" data-v-d81de50c>Reviewing the Full-Stack</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-d81de50c data-v-d81de50c><div class="item" data-v-d81de50c><div class="indicator" data-v-d81de50c></div><a class="VPLink link link" href="/rebel_coding/v2Orient.html" data-v-d81de50c><!--[--><p class="text" data-v-d81de50c>Planning Our App</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-d81de50c data-v-d81de50c><div class="item" data-v-d81de50c><div class="indicator" data-v-d81de50c></div><a class="VPLink link link" href="/rebel_coding/step5.html" data-v-d81de50c><!--[--><p class="text" data-v-d81de50c>Step 1: Server</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-d81de50c data-v-d81de50c><div class="item" data-v-d81de50c><div class="indicator" data-v-d81de50c></div><a class="VPLink link link" href="/rebel_coding/step6.html" data-v-d81de50c><!--[--><p class="text" data-v-d81de50c>Step 2: Client</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-d81de50c data-v-d81de50c><div class="item" data-v-d81de50c><div class="indicator" data-v-d81de50c></div><a class="VPLink link link" href="/rebel_coding/step7.html" data-v-d81de50c><!--[--><p class="text" data-v-d81de50c>Step 3: Deployment</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-d81de50c data-v-d81de50c><div class="item" data-v-d81de50c><div class="indicator" data-v-d81de50c></div><a class="VPLink link link" href="/rebel_coding/step8.html" data-v-d81de50c><!--[--><p class="text" data-v-d81de50c>Step 4: Scaling, etc</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-d81de50c data-v-d81de50c><div class="item" data-v-d81de50c><div class="indicator" data-v-d81de50c></div><a class="VPLink link link" href="/rebel_coding/more-appendices.html" data-v-d81de50c><!--[--><p class="text" data-v-d81de50c>More Appendices</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="no-transition group" data-v-8d50c081><section class="VPSidebarItem level-0" data-v-8d50c081 data-v-d81de50c><div class="item" role="button" tabindex="0" data-v-d81de50c><div class="indicator" data-v-d81de50c></div><h2 class="text" data-v-d81de50c>Manifesting Empathy</h2><!----></div><div class="items" data-v-d81de50c><!--[--><div class="VPSidebarItem level-1 is-link" data-v-d81de50c data-v-d81de50c><div class="item" data-v-d81de50c><div class="indicator" data-v-d81de50c></div><a class="VPLink link link" href="/mempath/" data-v-d81de50c><!--[--><p class="text" data-v-d81de50c>Welcome</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-d81de50c data-v-d81de50c><div class="item" data-v-d81de50c><div class="indicator" data-v-d81de50c></div><a class="VPLink link link" href="/mempath/egg.html" data-v-d81de50c><!--[--><p class="text" data-v-d81de50c>The Egg (0-5)</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-d81de50c data-v-d81de50c><div class="item" data-v-d81de50c><div class="indicator" data-v-d81de50c></div><a class="VPLink link link" href="/mempath/hatchling.html" data-v-d81de50c><!--[--><p class="text" data-v-d81de50c>The Hatchling (5-12)</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-d81de50c data-v-d81de50c><div class="item" data-v-d81de50c><div class="indicator" data-v-d81de50c></div><a class="VPLink link link" href="/mempath/flight.html" data-v-d81de50c><!--[--><p class="text" data-v-d81de50c>Flight (12-18)</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-d81de50c data-v-d81de50c><div class="item" data-v-d81de50c><div class="indicator" data-v-d81de50c></div><a class="VPLink link link" href="/mempath/flying.html" data-v-d81de50c><!--[--><p class="text" data-v-d81de50c>Flying (18-25)</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-d81de50c data-v-d81de50c><div class="item" data-v-d81de50c><div class="indicator" data-v-d81de50c></div><a class="VPLink link link" href="/mempath/learning.html" data-v-d81de50c><!--[--><p class="text" data-v-d81de50c>Learning (25-35)</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-d81de50c data-v-d81de50c><div class="item" data-v-d81de50c><div class="indicator" data-v-d81de50c></div><a class="VPLink link link" href="/mempath/building.html" data-v-d81de50c><!--[--><p class="text" data-v-d81de50c>Building (35-45)</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-d81de50c data-v-d81de50c><div class="item" data-v-d81de50c><div class="indicator" data-v-d81de50c></div><a class="VPLink link link" href="/mempath/helping.html" data-v-d81de50c><!--[--><p class="text" data-v-d81de50c>Helping (45-60)</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-d81de50c data-v-d81de50c><div class="item" data-v-d81de50c><div class="indicator" data-v-d81de50c></div><a class="VPLink link link" href="/mempath/enjoying.html" data-v-d81de50c><!--[--><p class="text" data-v-d81de50c>Enjoying (60+)</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-d81de50c data-v-d81de50c><div class="item" data-v-d81de50c><div class="indicator" data-v-d81de50c></div><a class="VPLink link link" href="/mempath/onward.html" data-v-d81de50c><!--[--><p class="text" data-v-d81de50c>Outro</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-d81de50c data-v-d81de50c><div class="item" data-v-d81de50c><div class="indicator" data-v-d81de50c></div><a class="VPLink link link" href="/mempath/appendices.html" data-v-d81de50c><!--[--><p class="text" data-v-d81de50c>Appendices</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="no-transition group" data-v-8d50c081><section class="VPSidebarItem level-0" data-v-8d50c081 data-v-d81de50c><div class="item" role="button" tabindex="0" data-v-d81de50c><div class="indicator" data-v-d81de50c></div><h2 class="text" data-v-d81de50c>Diversity Inverted</h2><!----></div><div class="items" data-v-d81de50c><!--[--><div class="VPSidebarItem level-1 is-link" data-v-d81de50c data-v-d81de50c><div class="item" data-v-d81de50c><div class="indicator" data-v-d81de50c></div><a class="VPLink link link" href="/divinv/" data-v-d81de50c><!--[--><p class="text" data-v-d81de50c>Welcome</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-d81de50c data-v-d81de50c><div class="item" data-v-d81de50c><div class="indicator" data-v-d81de50c></div><a class="VPLink link link" href="/divinv/1-whiteness.html" data-v-d81de50c><!--[--><p class="text" data-v-d81de50c>Whiteness</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-d81de50c data-v-d81de50c><div class="item" data-v-d81de50c><div class="indicator" data-v-d81de50c></div><a class="VPLink link link" href="/divinv/2-native.html" data-v-d81de50c><!--[--><p class="text" data-v-d81de50c>Indigeneity</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-d81de50c data-v-d81de50c><div class="item" data-v-d81de50c><div class="indicator" data-v-d81de50c></div><a class="VPLink link link" href="/divinv/3-latinx.html" data-v-d81de50c><!--[--><p class="text" data-v-d81de50c>Latinx</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-d81de50c data-v-d81de50c><div class="item" data-v-d81de50c><div class="indicator" data-v-d81de50c></div><a class="VPLink link link" href="/divinv/4-Black.html" data-v-d81de50c><!--[--><p class="text" data-v-d81de50c>Blackness</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-d81de50c data-v-d81de50c><div class="item" data-v-d81de50c><div class="indicator" data-v-d81de50c></div><a class="VPLink link link" href="/divinv/5-onward.html" data-v-d81de50c><!--[--><p class="text" data-v-d81de50c>Onwards</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-d81de50c data-v-d81de50c><div class="item" data-v-d81de50c><div class="indicator" data-v-d81de50c></div><a class="VPLink link link" href="/divinv/appendices.html" data-v-d81de50c><!--[--><p class="text" data-v-d81de50c>Appendices</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="no-transition group" data-v-8d50c081><section class="VPSidebarItem level-0" data-v-8d50c081 data-v-d81de50c><!----><div class="items" data-v-d81de50c><!--[--><div class="VPSidebarItem level-1" data-v-d81de50c data-v-d81de50c><div class="item" role="button" data-v-d81de50c><div class="indicator" data-v-d81de50c></div><p class="text" data-v-d81de50c>The Guidebook</p><!----></div><!----></div><!--]--></div></section></div><div class="no-transition group" data-v-8d50c081><section class="VPSidebarItem level-0" data-v-8d50c081 data-v-d81de50c><div class="item" role="button" tabindex="0" data-v-d81de50c><div class="indicator" data-v-d81de50c></div><h2 class="text" data-v-d81de50c>Manifesting Empathy (archived)</h2><!----></div><div class="items" data-v-d81de50c><!--[--><div class="VPSidebarItem level-1 is-link" data-v-d81de50c data-v-d81de50c><div class="item" data-v-d81de50c><div class="indicator" data-v-d81de50c></div><a class="VPLink link link" href="/mempath.bak/" data-v-d81de50c><!--[--><p class="text" data-v-d81de50c>Welcome</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-d81de50c data-v-d81de50c><div class="item" data-v-d81de50c><div class="indicator" data-v-d81de50c></div><a class="VPLink link link" href="/mempath.bak/sexism.html" data-v-d81de50c><!--[--><p class="text" data-v-d81de50c>Sexism</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-d81de50c data-v-d81de50c><div class="item" data-v-d81de50c><div class="indicator" data-v-d81de50c></div><a class="VPLink link link" href="/mempath.bak/racism.html" data-v-d81de50c><!--[--><p class="text" data-v-d81de50c>Racism</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-d81de50c data-v-d81de50c><div class="item" data-v-d81de50c><div class="indicator" data-v-d81de50c></div><a class="VPLink link link" href="/mempath.bak/able-ism.html" data-v-d81de50c><!--[--><p class="text" data-v-d81de50c>Able-ism</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-d81de50c data-v-d81de50c><div class="item" data-v-d81de50c><div class="indicator" data-v-d81de50c></div><a class="VPLink link link" href="/mempath.bak/power-dynamics.html" data-v-d81de50c><!--[--><p class="text" data-v-d81de50c>Power Dynamics</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-d81de50c data-v-d81de50c><div class="item" data-v-d81de50c><div class="indicator" data-v-d81de50c></div><a class="VPLink link link" href="/mempath.bak/onward.html" data-v-d81de50c><!--[--><p class="text" data-v-d81de50c>Onwards</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-d81de50c data-v-d81de50c><div class="item" data-v-d81de50c><div class="indicator" data-v-d81de50c></div><a class="VPLink link link" href="/mempath.bak/appendices.html" data-v-d81de50c><!--[--><p class="text" data-v-d81de50c>Appendices</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><!--]--><!--[--><!--]--></nav></aside><div class="VPContent has-sidebar" id="VPContent" data-v-1df9f90f data-v-c87f25bf><div class="VPDoc has-sidebar has-aside" data-v-c87f25bf data-v-7011f0d8><!--[--><!--]--><div class="container" data-v-7011f0d8><div class="aside" data-v-7011f0d8><div class="aside-curtain" data-v-7011f0d8></div><div class="aside-container" data-v-7011f0d8><div class="aside-content" data-v-7011f0d8><div class="VPDocAside" data-v-7011f0d8 data-v-3f215769><!--[--><!--]--><!--[--><!--]--><nav aria-labelledby="doc-outline-aria-label" class="VPDocAsideOutline" data-v-3f215769 data-v-60d5052e><div class="content" data-v-60d5052e><div class="outline-marker" data-v-60d5052e></div><div aria-level="2" class="outline-title" id="doc-outline-aria-label" role="heading" data-v-60d5052e>On this page</div><ul class="VPDocOutlineItem root" data-v-60d5052e data-v-1ce71065><!--[--><!--]--></ul></div></nav><!--[--><!--]--><div class="spacer" data-v-3f215769></div><!--[--><!--]--><!----><!--[--><!--]--><!--[--><!--]--></div></div></div></div><div class="content" data-v-7011f0d8><div class="content-container" data-v-7011f0d8><!--[--><!--]--><main class="main" data-v-7011f0d8><div style="position:relative;" class="vp-doc _rebel_coding_step1" data-v-7011f0d8><div><h1 id="html-css" tabindex="-1">HTML &amp; CSS <a class="header-anchor" href="#html-css" aria-label="Permalink to “HTML &amp; CSS”">​</a></h1><hr><p>HTML &amp; CSS are the basic building blocks for most web-pages, and dare I say mobile applications. In the following example we compare building a webpage to building a house or similar structure.</p><p>HTML code determines the structural look of a web page. This is the layout, walls, stairs, and open spaces for doors, windows, outlets, and the like. CSS is the paint colors, motifs and patterns that will decorate our structure, while also able to influence structural aspects (think mobile designs).</p><p>HTML also introduces us to our first basic pattern in coding.</p><p><code>&lt;html&gt;&lt;head&gt;&lt;/head&gt;&lt;body&gt;&lt;/body&gt;&lt;/html&gt;</code></p><p>HTML uses <em>tags</em>, enclosed by arrows (&lt;&gt;), to contain information. Notice how each tag has an explicit beginning and an explicit end. We gotta make sure we finish what we start!</p><p>Below is a code example containing, <em>nearly</em>, the least amount of code needed to display a webpage using HTML.</p><div class="language-"><button title="Copy Code" class="copy"></button><span class="lang"></span><pre class="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><span class="line"><span> &lt;html&gt;</span></span>
<span class="line"><span> &lt;head&gt;</span></span>
<span class="line"><span> &lt;title&gt;Home&lt;/title&gt;</span></span>
<span class="line"><span> &lt;/head&gt;</span></span>
<span class="line"><span> &lt;body&gt;</span></span>
<span class="line"><span> &lt;h1&gt;Welcome to Rebel Coding&lt;/h1&gt;</span></span>
<span class="line"><span> &lt;/body&gt;</span></span>
<span class="line"><span> &lt;/html&gt;</span></span></code></pre></div><p>That&#39;s it! It’s our little dollhouse of a webpage!</p><p>Granted ... all the webpage has, is a headline that says &quot;Welcome to Rebel Coding&quot;.</p><h2 id="html-page-structure" tabindex="-1"><a href="#html-page-structure">#</a> HTML Page Structure <a class="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>&lt;html&gt;&lt;head&gt;&lt;/head&gt;&lt;body&gt;&lt;/body&gt;&lt;/html&gt;</code></p><p><strong>HTML:</strong> Declarative containers to announce what language we&#39;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>&lt;head&gt;</code> tag you’ll see a bunch of <code>&lt;link&gt;</code> tags that have links to other files. This is like the brain gathering all the information the <code>&lt;body&gt;</code> below will need to carry out its prescribed operations.</p><p><strong>Body:</strong> Where all the visible action happens!</p><h2 id="nested-properties-attributes" tabindex="-1"><a href="#nested-properties-attributes">#</a> Nested Properties / Attributes <a class="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>&lt;h1&gt;</code> tags with this topic.</p><div class="language-"><button title="Copy Code" class="copy"></button><span class="lang"></span><pre class="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><span class="line"><span> &lt;h1&gt;Header 1&lt;/h1&gt;</span></span>
<span class="line"><span> </span></span>
<span class="line"><span> &lt;h2&gt;Header 2&lt;/h2&gt;</span></span>
<span class="line"><span> </span></span>
<span class="line"><span> &lt;h3&gt;Header 3&lt;/h3&gt;</span></span></code></pre></div><p>But what if I want Header 1 to be the color green??</p><p><code>&lt;h1 style=”color: green;”&gt;Header 1&lt;/h1&gt;</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><h2 id="basic-html-tags" tabindex="-1"><a href="#basic-html-tags">#</a> Basic HTML Tags <a class="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><div class="language-"><button title="Copy Code" class="copy"></button><span class="lang"></span><pre class="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><span class="line"><span> &lt;title&gt;Home: Rebel Coding&lt;/title&gt;</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>&lt;a&gt;</code> tag, or anchor tag.</p><p>The HTML tag is what connects the web, using its <em>property</em> ‘href’.</p><div class="language-"><button title="Copy Code" class="copy"></button><span class="lang"></span><pre class="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><span class="line"><span> &lt;a href=”http://www.duckduckgo.com”&gt;DuckDuckGo&lt;/a&gt;</span></span></code></pre></div><p>And tags can have more than one attribute, or property; an important one is the class property:</p><div class="language-"><button title="Copy Code" class="copy"></button><span class="lang"></span><pre class="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><span class="line"><span> &lt;table class=”table”&gt;&lt;/table&gt;</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><div class="language-"><button title="Copy Code" class="copy"></button><span class="lang"></span><pre class="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><span class="line"><span> &lt;ul&gt;&lt;li&gt;&lt;/li&gt;&lt;/ul&gt;</span></span>
<span class="line"><span> </span></span>
<span class="line"><span> &lt;ol&gt;&lt;li&gt;&lt;/li&gt;&lt;/ol&gt;</span></span></code></pre></div><p>These HTML tags don’t seem to end, or do they?</p><div class="language-"><button title="Copy Code" class="copy"></button><span class="lang"></span><pre class="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><span class="line"><span> &lt;img/&gt;</span></span>
<span class="line"><span> </span></span>
<span class="line"><span> &lt;br/&gt;</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>&lt;link/&gt;</code> tags within the <code>&lt;head&gt;</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><h2 id="css-cascading-style-sheets" tabindex="-1"><a href="#css-cascading-style-sheets">#</a> CSS - Cascading Style Sheets <a class="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&#39;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><div class="language-"><button title="Copy Code" class="copy"></button><span class="lang"></span><pre class="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><span class="line"><span> &lt;h1 style=”color: #FE23DD;”&gt;Rebel Coding&lt;/h1&gt;</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><h3 id="inline" tabindex="-1"><a href="#inline">#</a> Inline <a class="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>&lt;h1&gt;</code> text.</p><div class="language-"><button title="Copy Code" class="copy"></button><span class="lang"></span><pre class="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><span class="line"><span> &lt;html&gt;</span></span>
<span class="line"><span> &lt;head&gt;</span></span>
<span class="line"><span> &lt;title&gt;Home&lt;/title&gt;</span></span>
<span class="line"><span> &lt;/head&gt;</span></span>
<span class="line"><span> &lt;body&gt;</span></span>
<span class="line"><span> &lt;h1 style=&quot;color: #42FD23; font-size: 5em;&quot;&gt;Welcome to SF&lt;/h1&gt;</span></span>
<span class="line"><span> &lt;/body&gt;</span></span>
<span class="line"><span> &lt;/html&gt;</span></span></code></pre></div><h3 id="embedded" tabindex="-1"><a href="#embedded">#</a> Embedded <a class="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>&lt;h1&gt;</code> tag, we use the <code>&lt;style&gt;</code> tag up in the header! Now we are able to list the tags we want to affect, and define our preferences.</p><div class="language-"><button title="Copy Code" class="copy"></button><span class="lang"></span><pre class="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><span class="line"><span> &lt;html&gt;</span></span>
<span class="line"><span> &lt;head&gt;</span></span>
<span class="line"><span> &lt;title&gt;Home&lt;/title&gt;</span></span>
<span class="line"><span> &lt;style&gt;</span></span>
<span class="line"><span> h1 {</span></span>
<span class="line"><span> color: #42FD23;</span></span>
<span class="line"><span> }</span></span>
<span class="line"><span> &lt;/style&gt;</span></span>
<span class="line"><span> &lt;/head&gt;</span></span>
<span class="line"><span> &lt;body&gt;</span></span>
<span class="line"><span> &lt;h1&gt;Welcome to Rebel Coding&lt;/h1&gt;</span></span>
<span class="line"><span> &lt;/body&gt;</span></span>
<span class="line"><span> &lt;/html&gt;</span></span></code></pre></div><h3 id="embedded-class" tabindex="-1"><a href="#embedded-class">#</a> Embedded + Class <a class="header-anchor" href="#embedded-class" aria-label="Permalink to “# Embedded + Class”">​</a></h3><p>What if you don&#39;t want to affect every <code>&lt;h1&gt;</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><div class="language-"><button title="Copy Code" class="copy"></button><span class="lang"></span><pre class="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><span class="line"><span> &lt;html&gt;</span></span>
<span class="line"><span> &lt;head&gt;</span></span>
<span class="line"><span> &lt;title&gt;Home&lt;/title&gt;</span></span>
<span class="line"><span> &lt;style&gt;</span></span>
<span class="line"><span> h1 {</span></span>
<span class="line"><span> color: #42FD23;</span></span>
<span class="line"><span> }</span></span>
<span class="line"><span> .headline {</span></span>
<span class="line"><span> text-decoration: underline;</span></span>
<span class="line"><span> }</span></span>
<span class="line"><span> &lt;/style&gt;</span></span>
<span class="line"><span> &lt;/head&gt;</span></span>
<span class="line"><span> &lt;body&gt;</span></span>
<span class="line"><span> &lt;h1 class=&quot;headline other-class&quot;&gt;Welcome to SF&lt;/h1&gt;</span></span>
<span class="line"><span> &lt;/body&gt;</span></span>
<span class="line"><span> &lt;/html&gt;</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><h3 id="imported" tabindex="-1"><a href="#imported">#</a> Imported <a class="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>&lt;link&gt;</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><div class="language-"><button title="Copy Code" class="copy"></button><span class="lang"></span><pre class="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><span class="line"><span> &lt;html&gt;</span></span>
<span class="line"><span> &lt;head&gt;</span></span>
<span class="line"><span> &lt;title&gt;Home&lt;/title&gt;</span></span>
<span class="line"><span> &lt;link rel=&quot;stylesheet&quot; href=&quot;./style.css&quot;/&gt;</span></span>
<span class="line"><span> &lt;/head&gt;</span></span>
<span class="line"><span> &lt;body&gt;</span></span>
<span class="line"><span> &lt;h1&gt;Welcome to Rebel Coding&lt;/h1&gt;</span></span>
<span class="line"><span> &lt;/body&gt;</span></span>
<span class="line"><span> &lt;/html&gt;</span></span></code></pre></div><h3 id="so-what-does-cascading-styles-sheets-mean" tabindex="-1"><a href="#so-what-does-cascading-styles-sheets-mean">#</a> So what does Cascading Styles Sheets Mean ? <a class="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>&lt;h1&gt;</code> tags should all be green, but a style property on the page specifies that this specific <code>&lt;h1&gt;</code> tag should be blue?? Which will take precedence?</p><p>And what if a style attribute is on a specific <code>&lt;h1&gt;</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>&lt;head&gt;</code> tag</li><li>Imported Scripts in descending order (last to load take precedence.)</li></ol><h2 id="wireframing" tabindex="-1"><a href="#wireframing">#</a> WireFraming <a class="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><h2 id="your-website-build-out" tabindex="-1"><a href="#your-website-build-out">#</a> Your Website Build-Out <a class="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><h3 id="basic" tabindex="-1"><a href="#basic">#</a> Basic <a class="header-anchor" href="#basic" aria-label="Permalink to “# Basic”">​</a></h3><p>Displays paragraphs, links, lists and tables.</p><h3 id="basic-1" tabindex="-1"><a href="#basic-2">#</a> Basic + <a class="header-anchor" href="#basic-1" aria-label="Permalink to “# Basic +”">​</a></h3><p>Implements JavaScript</p><h2 id="templating-with-bootstrap" tabindex="-1"><a href="#templating-with-bootstrap">#</a> Templating with Bootstrap <a class="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>&lt;div&gt;</code> &amp; <code>&lt;span&gt;</code> tags; while it being important to note, tags can have multiple classes.</p><pre><code>&lt;div class=”col-lg-6 col-md-8 col-sm-12 col-xs-12”&gt;&lt;/div&gt;
</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>&lt;div&gt;</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><h2 id="css-more-in-depth-sass-less" tabindex="-1"><a href="#css-more-in-depth-sass-less">#</a> CSS More In-Depth (SASS/LESS) <a class="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><a href="https://en.wikipedia.org/wiki/Sass*(stylesheet_language)" target="_blank" rel="noreferrer">https://en.wikipedia.org/wiki/Sass_(stylesheet_language)</a></p><p><a href="https://en.wikipedia.org/wiki/Less*(stylesheet_language)" target="_blank" rel="noreferrer">https://en.wikipedia.org/wiki/Less_(stylesheet_language)</a></p><h1 id="looking-ahead-to-mobile" tabindex="-1">Looking Ahead to Mobile <a class="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><footer class="VPDocFooter" data-v-7011f0d8 data-v-e257564d><!--[--><!--]--><!----><nav class="prev-next" aria-labelledby="doc-footer-aria-label" data-v-e257564d><span class="visually-hidden" id="doc-footer-aria-label" data-v-e257564d>Pager</span><div class="pager" data-v-e257564d><a class="VPLink link pager-link prev" href="/rebel_coding/termintro.html" data-v-e257564d><!--[--><span class="desc" data-v-e257564d>Previous page</span><span class="title" data-v-e257564d>Intro to CLI</span><!--]--></a></div><div class="pager" data-v-e257564d><a class="VPLink link pager-link next" href="/rebel_coding/step2.html" data-v-e257564d><!--[--><span class="desc" data-v-e257564d>Next page</span><span class="title" data-v-e257564d>Step 2: JavaScript</span><!--]--></a></div></nav></footer><!--[--><!--]--></div></div></div><!--[--><!--]--></div></div><!----><!--[--><!--]--></div></div>
<script>window.__VP_HASH_MAP__=JSON.parse("{\"api-examples.md\":\"x63WI4Pt\",\"df_guide_1_basic_psych.md\":\"CeMcMmuh\",\"df_guide_2_medi_vibes.md\":\"DXqrKVuP\",\"df_guide_3_with_loneliness.md\":\"CCm6CpFp\",\"df_guide_4_enter_alchemy.md\":\"C_rmpGLw\",\"df_guide_5_test_ethic.md\":\"CLeadJfH\",\"df_guide_6_social_physics.md\":\"DLXBEao5\",\"df_guide_7_quantum_realm.md\":\"DLdBPsJT\",\"df_guide_8_topol.md\":\"Ba9e4UzJ\",\"df_guide_appendices.md\":\"B6_t-HyW\",\"df_guide_index.md\":\"CEtKw1LU\",\"divinv_1-whiteness.md\":\"Gp4URLax\",\"divinv_2-native.md\":\"Vv8EGUun\",\"divinv_3-latinx.md\":\"BM4bdmUR\",\"divinv_4-black.md\":\"CUehWxOs\",\"divinv_5-onward.md\":\"CEQkr_Yq\",\"divinv_appendices.md\":\"Bmbs9w04\",\"divinv_index.md\":\"Bqo_SiH4\",\"exocto_analytics.md\":\"BKJsN1AA\",\"exocto_appendices.md\":\"Dni294_f\",\"exocto_automation.md\":\"CN2PTACp\",\"exocto_comphist.md\":\"DjMbLIzP\",\"exocto_cooltools.md\":\"BTNgrA0k\",\"exocto_index.md\":\"BXZZ5OdR\",\"exocto_licences.md\":\"DzIeU3HF\",\"exocto_mailinglists.md\":\"CnM_HnlB\",\"exocto_oses.md\":\"BCY-PpoW\",\"exocto_payments.md\":\"CrBxLlhh\",\"exocto_puters.md\":\"B4Y0cwIr\",\"exocto_seo101.md\":\"DviR7H5g\",\"exocto_socialmedia.md\":\"C39W_iye\",\"exocto_websites.md\":\"q-QXL0De\",\"index.1.md\":\"BirqA0z4\",\"index.md\":\"CpG2gthS\",\"markdown-examples.md\":\"CUSHEXel\",\"mempath.bak_able-ism.md\":\"DEEoY8Vi\",\"mempath.bak_appendices.md\":\"CmQnH-55\",\"mempath.bak_gender-studies.md\":\"Bm3aYqIc\",\"mempath.bak_index.md\":\"CjZxMHAK\",\"mempath.bak_notes.huggingface.md\":\"Khx3__Av\",\"mempath.bak_onward.md\":\"BVZnlB_v\",\"mempath.bak_openai.playground.md\":\"DWJTSwWP\",\"mempath.bak_outline.huggingface.md\":\"rtMna0fM\",\"mempath.bak_power-dynamics.md\":\"BpdS-0SU\",\"mempath.bak_racism.md\":\"DZ9tBx6B\",\"mempath.bak_sexism.md\":\"BEBA033J\",\"mempath_appendices.md\":\"Czbekzrn\",\"mempath_building.md\":\"DiuxWTcR\",\"mempath_egg.md\":\"CisKm_IF\",\"mempath_enjoying.md\":\"B4curKmU\",\"mempath_flight.md\":\"CVDxb1-C\",\"mempath_flying.md\":\"B6DOnD8x\",\"mempath_hatchling.md\":\"VVGsZ3N1\",\"mempath_helping.md\":\"P__Igwr5\",\"mempath_index.md\":\"Cvas8zRV\",\"mempath_learning.md\":\"BgKY3mQI\",\"mempath_onward.md\":\"QQAwPgA6\",\"rebel_coding_appendices.md\":\"hih51f2p\",\"rebel_coding_index.md\":\"C9eQ2DYw\",\"rebel_coding_orientation.md\":\"DBUP6Scl\",\"rebel_coding_step1.md\":\"UGFgpiDv\",\"rebel_coding_step2.md\":\"g93kTiCg\",\"rebel_coding_step3.md\":\"CFJMlHnF\",\"rebel_coding_step4.md\":\"cGlIZ8RL\",\"rebel_coding_step5.md\":\"D7qbvCYY\",\"rebel_coding_step6.md\":\"KTPIgYna\",\"rebel_coding_step7.md\":\"D0XOrhEO\",\"rebel_coding_step8.md\":\"K9SkXD8n\",\"rebel_coding_termintro.md\":\"FZ5Hz2Ty\",\"rebel_coding_v2.md\":\"BQnisPze\",\"rebel_coding_v2orient.md\":\"Cv5u-Osk\",\"welcome_canin.md\":\"CHq_tepX\",\"welcome_dreamfreely.md\":\"Bxqk9nt5\",\"welcome_index.md\":\"C9JoO6Kb\",\"welcome_support.md\":\"CYUo6QRX\"}");window.__VP_SITE_DATA__=JSON.parse("{\"lang\":\"en-US\",\"dir\":\"ltr\",\"title\":\"DreamFreely Library\",\"description\":\"Community Conscious Creations\",\"base\":\"/\",\"head\":[],\"router\":{\"prefetchLinks\":true},\"appearance\":true,\"themeConfig\":{\"nav\":[{\"text\":\"Welcome\",\"link\":\"/welcome/\"},{\"text\":\"Support\",\"link\":\"/welcome/support\"}],\"sidebar\":[{\"text\":\"Welcome\",\"items\":[{\"text\":\"Chibu / Hola / Hello\",\"link\":\"/welcome/\"},{\"text\":\"About DreamFreely\",\"link\":\"/welcome/dreamfreely\"},{\"text\":\"About Canin Carlos\",\"link\":\"/welcome/canin\"}]},{\"text\":\"EXO-CTO\",\"items\":[{\"text\":\"Welcome\",\"link\":\"/exocto/\"},{\"text\":\"Computers\",\"link\":\"/exocto/puters\"},{\"text\":\"OSes\",\"link\":\"/exocto/oses\"},{\"text\":\"Websites\",\"link\":\"/exocto/websites\"},{\"text\":\"Social Media\",\"link\":\"/exocto/socialmedia\"},{\"text\":\"Automation\",\"link\":\"/exocto/automation\"},{\"text\":\"Appendices\",\"link\":\"/exocto/appendices\"}]},{\"text\":\"Rebel Coding 101\",\"items\":[{\"text\":\"Intro to Coding\",\"link\":\"/rebel_coding/\"},{\"text\":\"Orientation\",\"link\":\"/rebel_coding/orientation\"},{\"text\":\"Intro to CLI\",\"link\":\"/rebel_coding/termintro\"},{\"text\":\"Step 1: HTML & CSS\",\"link\":\"/rebel_coding/step1\"},{\"text\":\"Step 2: JavaScript\",\"link\":\"/rebel_coding/step2\"},{\"text\":\"Step 3: Python Scrapers\",\"link\":\"/rebel_coding/step3\"},{\"text\":\"Step 4: The Full Stack\",\"link\":\"/rebel_coding/step4\"},{\"text\":\"Appendices\",\"link\":\"/rebel_coding/appendices\"}]},{\"text\":\"Rebel Coding 102\",\"items\":[{\"text\":\"Reviewing the Full-Stack\",\"link\":\"/rebel_coding/v2\"},{\"text\":\"Planning Our App\",\"link\":\"/rebel_coding/v2Orient\"},{\"text\":\"Step 1: Server\",\"link\":\"/rebel_coding/step5\"},{\"text\":\"Step 2: Client\",\"link\":\"/rebel_coding/step6\"},{\"text\":\"Step 3: Deployment\",\"link\":\"/rebel_coding/step7\"},{\"text\":\"Step 4: Scaling, etc\",\"link\":\"/rebel_coding/step8\"},{\"text\":\"More Appendices\",\"link\":\"/rebel_coding/more-appendices\"}]},{\"text\":\"Manifesting Empathy\",\"items\":[{\"text\":\"Welcome\",\"link\":\"/mempath/\"},{\"text\":\"The Egg (0-5)\",\"link\":\"/mempath/egg\"},{\"text\":\"The Hatchling (5-12)\",\"link\":\"/mempath/hatchling\"},{\"text\":\"Flight (12-18)\",\"link\":\"/mempath/flight\"},{\"text\":\"Flying (18-25)\",\"link\":\"/mempath/flying\"},{\"text\":\"Learning (25-35)\",\"link\":\"/mempath/learning\"},{\"text\":\"Building (35-45)\",\"link\":\"/mempath/building\"},{\"text\":\"Helping (45-60)\",\"link\":\"/mempath/helping\"},{\"text\":\"Enjoying (60+)\",\"link\":\"/mempath/enjoying\"},{\"text\":\"Outro\",\"link\":\"/mempath/onward\"},{\"text\":\"Appendices\",\"link\":\"/mempath/appendices\"}]},{\"text\":\"Diversity Inverted\",\"items\":[{\"text\":\"Welcome\",\"link\":\"/divinv/\"},{\"text\":\"Whiteness\",\"link\":\"/divinv/1-whiteness\"},{\"text\":\"Indigeneity\",\"link\":\"/divinv/2-native\"},{\"text\":\"Latinx\",\"link\":\"/divinv/3-latinx\"},{\"text\":\"Blackness\",\"link\":\"/divinv/4-Black\"},{\"text\":\"Onwards\",\"link\":\"/divinv/5-onward\"},{\"text\":\"Appendices\",\"link\":\"/divinv/appendices\"}]},{\"text\":\"The Guidebook\"},{\"text\":\"Manifesting Empathy (archived)\",\"items\":[{\"text\":\"Welcome\",\"link\":\"/mempath.bak/\"},{\"text\":\"Sexism\",\"link\":\"/mempath.bak/sexism\"},{\"text\":\"Racism\",\"link\":\"/mempath.bak/racism\"},{\"text\":\"Able-ism\",\"link\":\"/mempath.bak/able-ism\"},{\"text\":\"Power Dynamics\",\"link\":\"/mempath.bak/power-dynamics\"},{\"text\":\"Onwards\",\"link\":\"/mempath.bak/onward\"},{\"text\":\"Appendices\",\"link\":\"/mempath.bak/appendices\"}]}],\"socialLinks\":[{\"icon\":\"org\",\"link\":\"https://canin.dreamfreely.org\"},{\"icon\":\"kitsu\",\"link\":\"https://shop.dreamfreely.org\"},{\"icon\":\"zcool\",\"link\":\"https://appdeveloperone.com/DreamFreely\"}]},\"locales\":{},\"scrollOffset\":134,\"cleanUrls\":false,\"additionalConfig\":{}}");</script>
</body>
</html>
Reference in New Issue View Git Blame Copy Permalink