Skip to content

Instantly share code, notes, and snippets.

@techric

techric/Stage2WorkSession1_21Dec15.markdown

Created December 21, 2015 04:34
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save techric/502bf2fd783014b15c7b to your computer and use it in GitHub Desktop.
Save techric/502bf2fd783014b15c7b to your computer and use it in GitHub Desktop.
Download ZIP
Stage2WorkSession1_21Dec15
Raw
index.html
<!DOCTYPE html>
<head>
<link href="style.css" rel="stylesheet">
<!-- The above line of code links this HTML to the CSS file aka stylesheet -->
<title>Techric's Notes for Udacity's Introduction to Programming Nanodegree</title>
</head>
<body>
<!-- BEGIN Section:Table of Contents from now on referred to as "TOC" -->
<div class="toc">
<h1>Table of Contents</h1>
<div class="concept">
<!-- begin website navigation capabilities-->
<ul>
<!-- The <ul> and <li> are used for lists that are NOT ordered. Whereas, <ol> and <li> tags are for ordered lists. They are automatically numbered by the software. Numbers are automatically generated by the code.-->
<!-- I believe this follows the "Nesting List" example provided by the Mozilla Foundation's Developer Network at https://developer.mozilla.org/en-US/docs/Web/HTML/Element/ul -->
<li><a href="#Introduction"> Introduction</a></li>
<li><a href="#Stage_1_Intro_Make_A_Web_Page">Stage 1 Intro Make A Web Page</a></li>
<ul>
<li><a href="#Lesson_1.1:_Basics_of_the_Web_and_HTML"> Lesson 1.1: Basics of the Web and HTML</a></li>
<ul>
<li><a href="#Lesson_1.1.1.:_Tools_for_Learning_HTML5"> Lesson 1.1.1.: Tools for Learning HTML5</a></li>
<li><a href="#Lesson_1.1.2.:_Programmer_Thinking"> Lesson 1.1.2.: Programmer Thinking</a></li>
<li><a href="#Lesson_1.1.3.:_Basics_of_the_World_Wide_Web"> Lesson 1.1.3.: Basics of The World Wide Web</a></li>
<!-- end lesson A-B List -->
</ul>
<li><a href="#Lesson_1.2:_Creating_A_Structured_Document"> Lesson 1.2: Creating A Structured Document</a></li>
<ul>
<li><a href="#Lesson_1.2.1.:_Front_End_Development">Lesson 1.2.1.: Front End Development</a></li>
</ul>
<li><a href="#Lesson_1.3:_Adding_CSS_Style_and_HTML_Structure">Lesson 1.3: Adding CSS Style and HTML Structure</a></li>
<ul>
<li><a href="#Lesson_1.3.1.:_Tree_Like_Structure">Lesson 1.3.1.: Tree Like Structure</a></li>
</ul>
<!-- end forth level of indentation for "Lesson 1.3.1 and beyond" -->
<!-- end first level of indentation - see: "Introduction bullet" -->
</ul>
<!-- end first level of unordered list-->
<!-- end lesson 1 List -->
<li><a href="#Stage_2:_Intro_-_Code_Your_Own_Quiz">Stage 2: Intro - Code Your Own Quiz</a></li>
<ul>
<li><a href="#Lesson_2.1:_Lorem Ipsum"> Lesson 2.1.: Lorem Ipsum</a></li>
<ul>
<li><a href="#Lesson_2.1.1.:_Lorem Ipsum"> Lesson 2.1.1.: Lorem Ipsum</a></li>
<li><a href="#Lesson_2.1.2.:_Lorem Ipsum"> Lesson 2.1.2.: Lorem Ipsum</a></li>
<li><a href="#Lesson_2.1.3.:_Lorem Ipsum"> Lesson 2.1.3.: Lorem Ipsum</a></li>
<!-- end lesson A-B List -->
</ul>
<li><a href="#Lesson_2.2:_Lorem Ipsum"> Lesson 2.2: Lorem Ipsum</a></li>
<ul>
<li><a href="#Lesson_2.2.1.:_Lorem Ipsum">Lesson 2.2.1.: Lorem Ipsum/a></li>
</ul>
<li><a href="#Lesson_2.3:_Adding_CSS_Lorem Ipsum">Lesson 2.3: Lorem Ipsum</a></li>
<ul>
<li><a href="#Lesson_2.3.1.:_Lorem Ipsum">Lesson 2.3.1.: Lorem Ipsum</a></li>
</ul>
<!-- end forth level of indentation for "Lesson 2.3.1 and beyond" -->
</ul>
<!-- end first level of unordered list-->
<!-- end lesson 1 List -->
<li><a href="#Stage_3:_Create_A_Movie_Website">Stage 3: Create A Movie Website</a></li>
<li><a href="#Stage_4:_Allow_Comments">Stage 4: Allow Comments</a></li>
</ul>
<!-- end lesson list -->
</div>
<!-- end class concept-->
</div>
<!-- end class TOC-->
<!-- END Section: TOC -->
<!-- BEGIN Section: Introduction -->
<div class="introduction">
<h2 id="introducton">Introduction</h2>
<div class="concept">
<div class="concept-title">
</div>
<!-- end class "concept-title"-->
<div class="concept-description">
</div>
<!-- end class "concept-description"-->
</div>
<!-- end class "concept"-->
</div>
<!-- end class "introduction"-->
<!-- END Section: Introduction Section-->
<!-- BEGIN Section: Stage 1 Section -->
<div class="stage_border">
<!-- The above id provides the blue outer border.-->
<h1 id="Stage_1_Intro_Make_A_Web_Page"> Stage 1 Intro: Make A Web Page</h1>
<!-- The above line provides the title within the blue border of Stage 1 section. -->
<div class="lesson_1_border" id="lesson_1">
<!-- NOTE: The above id provides the blue outer border.-->
<h2 id="Lesson_1.1:_Basics_of_the_Web_and_HTML">Lesson 1.1: Basics of the Web and HTML</h2>
<!-- NOTE: The above div gives the green border. -->
<!-- BEGIN: Lesson 1.1.1. Tools for Learning HTML5 -->
<div class="concept" id="Lesson_1.1.1">
<h3 id="Lesson_1.1.1.:_Tools_for_Learning_HTML5"> Lesson 1.1.1 Tools for Learning HTML5 </h3>
<div class="concept-title">
Tools for Learning HTML5
</div>
<!-- end class "concept-title" -->
<div class="concept-description">
In this section, I'll add tools such as websites, videos, and documents that can be used for reference purposes.
<ol>
<li> This is an "indy" website that is a really good reference for HTML5.You can find it at:
<a href="http://www.html-5-tutorial.com/"> www.html-5-tutorial.com</a></li>
<li>Codepen is a website that you can build your website on the fly. You can find it at:
<a href="http://www.codepen.io/"> www.codepen.io </a></li>
<li>Udacity has their own style guide for HTML, CSS, Javascript, and Git. You can find it here: <a href="http://udacity.github.io/frontend-nanodegree-styleguide/">Udacity Frontend Nanodegree Style Guide</a></li>
<li>This website will test HTML5 markup for errors. You can find it here: <a href="https://validator.w3.org/#validate_by_input">HTML5 Validator</a></li>
<li>This website will test CSS code for errors. You can find it here: <a href="https://jigsaw.w3.org/css-validator/#validate_by_input">CSS Validator </a></li>
<li>Mozilla, the maker of Firefox and other open source web programs has a great web developer resource page. You can find it here: <a href="https://developer.mozilla.org/en-US/"> Mozilla Developer Network</a></li>
</ol>
</div>
<!-- end class concept-description -->
</div>
<!-- end class stage_title id=stage_title -->
<!-- END Section: Lesson 1.1.1. Tools for Learning HTML5 -->
<!-- BEGIN Section: Lesson 1.1.2. Programmer Thinking -->
<div class="concept">
<h3 id="Lesson_1.1.2.:_Programmer_Thinking"><b> Lesson 1.1.2. Programmer Thinking</b></h3>
<div class="concept-title">
Five (5) Basic Ideas for Thinking Like A Programmer
</div>
<!-- end class concept-title -->
<div>
<ol>
<!-- <ol> and <li> tags are for ordered lists. Numbers will automatically generated by the code. This is in contrast to <ul> and <il> where the lists are NOT ordered and automatically numbered.-->
<li> Procedural Thinking -- Breaking a problem into basic steps </li>
<li> Abstract Thinking -- Generality amongst seemingly unrelated things </li>
<li> Systematic Debugging -- Finding and fixing coding errors in an orderly fashion </li>
<li> Technological Empathy -- Understanding what the computer is doing with your code </li>
<li> Systems Thinking -- Being able to break a large project into smaller pieces and logically solving problems in a stepwise fashion </li>
</ol>
<!-- End "Thinking Like A Programmer Requires Five Basic Ideas"-->
</div>
<!-- end class concept -->
</div>
<!-- end concept-title -->
<!-- END Section: Tools to Help You Learn HTML5 -->
<!-- BEGIN Section: "Lesson 1.1.3. The World Wide Web: A Brief Overview" -->
<div class="concept">
<h3 id="Lesson_1.1.3.:_Basics_of_the_World_Wide_Web"><b> Lesson 1.1.3.: Basics of the World Wide Web</b></h3>
<div class="concept-title">
<b>A Brief Overview</b>
</div>
<!-- end concept title -->
<div>
<ol>
<!-- BEGIN "Basics of The Web: A Brief Overivew" List-->
<li> <a href="#The_World_Wide_Web:_A_Collection_of_HTML_Pages"> The World Wide Web: A Collection of HTML Pages</a></li>
<li> <a href="#HTML-Hypertext_Markup_Language"> HTML-Hypertext Markup Language</a></li>
<li> <a href="#URL-Uniform_Resource_Locator"> URL-Uniform Resource Locator </a></li>
<li> <a href="#HTTP-Hyper_Text_Transfer_Protocol">HTTP-Hyper Text Transfer Protocol</a></li>
<li> <a href="#Web_Applications">Web Applications</a></li>
</ol>
</div>
<!-- end list -->
<!-- END "Lesson 1.1.3. Basics of The Web: A Brief Overivew" List-->
<!-- BEGIN: "The World Wide Web: A Collection of HTML Pages" -->
<div class="concept-description">
<h4 id="The_World_Wide_Web:_A_Collection_of_HTML_Pages">1. The World Wide Web: A Collection of HTML Pages</h4>
<p>The "web" is composed of several key components. The first is what you see as the user. You're using a computer. This computer has a "web browser" - the software you use to access the internet experience. If you're old enough, you might remember
"Netscape" which was esseentially the first modern web browser. We now use Apple's Safari, Google's Chrome, and many others to access the internet.</p>
<p>The next component is the "internet" itself. The internet is composed of computers called servers. These servers are usually in a nondescript building, stacked in "racks", and maintained by some really smart computer IT technicians. These computers
"host" the HTML web pages that we access every time we use browse the internet. <b>The key take away is that the web is a collection of web pages.</b></p>
</div>
<!-- END: The World Wide Web -->
<!-- BEGIN: Hypertext Markup Language -->
<div>
<h4 id="HTML-Hypertext_Markup_Language">2. HTML-Hypertext Markup Language</h4>
<ul>
<li> Text - Basically, refers to the data that you see in your web browser</li>
<li> Markup - Arrangement of the content</li>
<li> Hyperlinks - "Links" your current page to other pages and information sources.</li>
</ul>
HTML is made up of <b>"tags"</b>. These tags are used to form <b>"elements"</b>. Elements are used to infuence the behavior, look, and feel of web pages. For example, a generic element might look liks this:
<br>
<br><b> &lt;tag&gt; contents &lt;/tag&gt; </b>
<br>
<br> The &lt;tag&gt; is the "opening tag"
<br> The &lt;/tag&gt; is the "closing tag" So if you want to display the words "Run like the wind!" using bold letters, you simply enclose the statement within open and closed &lt;bold&gt; tags to create an element that looks like the following.
<br>
<br><b>&lt;bold&gt;Run like the wind!&lt;/bold&gt;</b>
<br>
<br> For the end user, the HTML code will look like this: <b>Run like the wind!</b>
<br>
<br>
<h5><b> Anchor Tag</b></h5> Another HTML tag is the "anchor tag" denoted by "a". The anchor tag allows you to create links to other pages or data sources on the web. The pseudocode for an anchor tag looks like this:
<br><b>&lt;a href = attribute &gt; contents &lt;/a&gt;</b>
<br>
<br> In this example, the "href" stands for "hypertext reference".
<br>
<br> So let's say you wanted to create a hyperlink that would take you to <em>www.usatoday.com</em>. It would look something like the following.
<br>
<br><b>&lt;a href = www.usatoday.com &gt; usatoday.com &lt;/a&gt;</b>
<br>
<br>
<h5><b> Break Tag</b></h5> Not all elements use a closing tag. Tags that do not require a closing tag are called <b>void tags</b>. For example, the tag to create a line break or to push text to the next line on the page is called the "break" tag. The break tag is denoted
by "br". So, all you would need to write in the HTML5 code is the following.
<br>
<br>
<b>&lt; br &gt; </b>
<br> One last point about "br". The break tag is considered "inline" versus "block". The difference between the two will be discussed later in this lesson.
<h5><b> Image Tag</b></h5> The image "img" tag, only uses the opening tag plus a source attribute. This source reference is denoted by "src". The source is usually the location of the image file for its associated element. The element also needs to designate a value
for the source. This is noted below by "url". Hence, an image element might look something like this
<br>
<br>
<b>&lt; img src = url &gt; or &lt; img src = alt &gt;</b>
<br>
<br> where the "alt" corresponds to some form of text. Remember, image elements do not have a closing tag.
<br>
<br> Let's say you wanted to put a line break into your webpage's text, then you would use the break tag &lt; br &gt;. This tag is also a void tag. Hence, using multiple &lt; br &gt; after a particular piece of text will lead to multiple line breaks.
<h5><b> Paragraph Tag </b></h5> As discussed before, the "br" tag creates line breaks. It is considered an "inline" element. Inline elements are usually for modifying short lines of code. In contrast, the paragraph tag denoted by "p" creates an invisible boundary arond the
code that you're working on. This kind of element is considered a "block" element. Block elements are used for groups of code or text.
<h5><b> Span (Inline) vs Div (Block)</b></h5> These tags do not do anything specifically like say the bold tag. However, they allow a specific piece of information to be modified by CSS code. Similar to "br" tag, the "span" tag is inline. Hence, it's used for small chunks of code. Just
like "paragraph" tag that created an invisible border around the code or text, you can use the "div" tag to do the same. Div is a block element used for large chunks of html code.
</div>
<!-- end div named "Hypertext Markup Language" -->
<div>
<!-- BEGIN:"URL-Uniform Resource Locator" -->
<h4 id="URL-Uniform_Resource_Locator">3. URL-Uniform Resource Locator</h4>
</div>
<!-- END: "URL-Uniform Resource Locator" -->
<div>
<!-- BEGIN:"HTTP-Hyper Text Transfer Protocol" -->
<h4 id="HTTP-Hyper_Text_Transfer_Protocol">4. HTTP-Hyper Text Transfer Protocol</h4>
</div>
<!-- END: "HTTP-Hyper Text Transfer Protocol" -->
<div>
<!-- BEGIN:"Web Applications" -->
<h4 id="Web_Applications">5. Web Applications</h4>
</div>
<!-- END: "Web Applications" -->
</div>
<!-- END "Lesson 1.1.3. Basics of The Web: A Brief Overivew" List-->
</div>
<!-- end class lesson_1.1-->
<!-- END Section: Lesson 1.1-->
<!-- BEGIN Section: Lesson 1.2-->
<div class="lesson_1_border">
<h2 id="Lesson_1.2:_Creating_A_Structured_Document">Lesson 1.2 Creating A Structured Document</h2>
<div class="concept" id="Lesson_1.2.1">
<h3 id="Lesson_1.2.1.:_Front_End_Development">Lesson 1.2.1: Front End Development</h3>
<div class="concept-title">The Big Picture of HTML, CSS, and JS.
</div>
<div class="concept-description">
<p>Learning "Front End Development" with HTML,CSS, and Javascript (learned later) you learn how to construct a webpage and get immediate feedback. This sets the foundation for learning actual programming.
</p>
<p>To get a general understanding of what HTML, CSS, and Javascript are used for, let's use compare building webpages to building a house. HTML will provide the structure of the house. CSS will give us the "style"! The decorations, the carpet,
pictures, etc. While Javascript will provide how we interact with the house. Think of the doorknobs, the alarm system, plumbing, eletrical, etc. </p>
<p>Another key concept to understand is the "Document Object Model" or "DOM" for short. This is basically describing the tree-like structure of HTML. Things move from a high to lower order. </p>
<p>
The HTML language is composed of syntax + rules. Much like any spoken language. However, HTML tags lead to html elements based on the DOM concept. Much like an essay is composed of paragraphs that are composed of sentences, that are composed of words.
<p> Another concept tied to DOM is something called "Inheritance". Inheritance basically describes how lower order elements in HTML are tied to higher order attributes. According to Wikipedia, "Inheritance is the mechanism by which properties
are applied not only to a specified element, but also to its descendants.". This is something that is used every day in computing. For Example, when you go into yoru compute rto look for a word file. You might go through several folders
to find the actual file. Those folders are tied to each other by an inheritance of sorts.
</p>
</div>
<div class="concept-title">Boxes Everywhere
</div>
<div class="concept-description">
<p>Web pages are essentially a series of boxes within boxes. If you look at a webpage using developers tools this will become more evident. CSS provides syntax and rules for how these boxes within boxes will appear in an html webpage. </p>
<p>
For this course, we'll be using Google Chrome. (refer to course videos for more information.)
</p>
<p>Going deeper into the idea that HTML webpages are composed of boxes. Let's imagine we use a grid to align web page elements. Now, you can imagine that web page elements can be layed out much like buildings on a city street grid. (This concept
will be discussed later in more detail.)
</p>
</div>
</div>
<!-- END: "Lesson 1.2 Creating A Structered Element" -->
<!-- BEGIN: "Lesson 1.3 Adding CSS Style and HTML Structure" -->
<div class="lesson 1">
<h2 id="Lesson_1.3:_Adding_CSS_Style_and_HTML_Structure">Lesson 1.3 Adding CSS Style and HTML Structure</h2>
<div class="concept" id="Lesson_1.3.1">
<h3 id="Lesson_1.3.1.:_Tree_Like_Structure">Lesson 1.3.1: Tree Like Structure</h3>
<div class="concept-title"> More On CSS
</div>
<!-- end class concept-title-->
<div class="concept-description">
<p>
At this point in Stage 1, we're going to discuss Sublime 2 to construct the basic building blocks of our webpage. For now, we'll focus on the two files types known as .html and .css files. Using Sublime or another simple text editor, one can create very
basic web pages by creating both an .html file and pointing it to a .css file.</p>
<p>
Assuming we already have our basic html code written, let's dive into CSS. In CSS, we first write a "selector". A selector allows the CSS to point towards an element in the HTML code in the HTML file.
</p>
<p>
The best way not to repeat ourselves is to use a "selector" associated with a class of elements. For example, the generic code would look something like this: selector { Declaration } where the "declaration" is composed of a property and value. Real world, it might look like this. Let's assume you want to make the class "description" black and bold, then the CSS code would look something like this ... .description { background color: black font: bold } This allows you to provide style to all
of the code that is related to any one class. The obvious benefit of not repeating yourself is that: it saves time and energy; it allows you to work more efficiently by just copy/pasting work that you've already done in the past; and it allows your work to be more concise. A real world example of this would be our cell phones. In the not too distant past, you had to dial someone's phone number every time you wanted to call them. Now, we can just press a button and ask Siri or Cortana to dial the number for us.
</p>
<p>
It's important to remember, that no one can or should try to memorize everything that CSS can do. Hence, go to a CSS reference site such as the one provided by Mozilla Foundation's developer page.
</p>
<div class="concept-title"> Tree Like Structure
</div>
<!-- end class concept-title-->
<div class="concept-description">
<p>
As we discussed before in the previous section, the best way to understand the "tree like structure" of webpages is to think of it as a system of boxes within boxes. So, like actual "trees" there is a hierarchal structure to HTML markup.</p>
<p>If we were to look at a real tree, we would see below and sometimes above the soil, a root system. This woudl be followed by the tree trunk. As we move upwards, we see major branches. Even further, we see smaller branches. And on those branches, we may see leaves that have their own systematic construct. Now, back to wwebpages and boxes within boxes relative to the "tree like structure. A simple webpage will have "div" elements or "p" elements where information can be further stored within them. They can also have image elements that can also be a "box" within the overall all webpage as a "box".
</p>
</div>
<!-- end class concept-description-->
</div>
<!-- end class description-->
</div>
<!-- end class title -->
</div>
<!-- end class concept -->
</div>
<!-- end class lesson 1 -->
<!-- END: "Lesson 1.3 Adding CSS Style and HTML Structure" -->
</div>
<!-- End Stage 1 -->
<!-- BEGIN Stage 2 ... In Progress! -->
<div class="stage_border">
<h2 id="Stage_2:_Intro_-_Code_Your_Own_Quiz">Stage 2: Intro: Code Your Own Quiz</h2>
<div class="lesson_2_border" id="lesson_2:">
<h2 id="Lesson_2.1:">Lesson 2.1:</h2>
<!-- The above two div (above two lines of code) gives the green border. -->
<div class="concept">
<div class="concept-title">
<div class ="concept-description">
At this stage, we're going to dive into actual programming using the latest iteration of Python. We'll also cover how to setting up your workspace environment.
First, we need to follow these directions taken directly from Udacity's Frontend Web Development Nanodegree course.
1. Open Sublime
2. Select File > New File this will create a tab with the name "Untitled"
3. Select File > Save As
4. Navigate to the folder where you want to save your file.
5. Give your file a name like my_code.py Note: your code must end with the .py extension
6. Write your Python code in the tab which now has the name of your file (my_code.py for example)
7. Download python her <a href="https://www.python.org/downloads/"> Download Python </a>
</div>
<!-- end class concept-description-->
</div>
<!-- end class concept-title-->
</div>
<!-- end class concept-->
</div>
<!-- end class "lesson_2" id="lesson_2">-->
</div>
<!-- end class stage_title-->
<!-- END Stage 2 - In Progress! -->
<!-- BEGIN Stage 3 - Coming Soon! -->
<div class="stage_border">
<h2 id="Stage_3:_Create_A_Movie_Website">Stage 3: Create A Movie Website</h2>
<div class="lesson_3_border">
<h2 id="Lesson_3.1:_Basics_of_Video_Websites">Lesson 3.1: Basics of Video Website Development</h2>
<!-- The above two div (above two lines of code) gives the green border. -->
<div class="concept">
<div class="concept-title">
</div>
<!-- end class concept_title-->
</div>
<!-- end concept-->
</div>
<!-- end class Lesson 3.1-->
</div>
<!-- end class stage_title-->
<!-- END Stage 3 - Coming Soon! -->
<!-- BEGIN Stage 4 - Coming Soon! -->
<div class="stage_border">
<h2 id="Stage_4:_Allow_Comments">Stage 4: Allow Comments - In Progress</h2>
<div class="lesson_4_border">
<div class="lesson_4.1">
<h2 id="Lesson_4.1:_TBD">Lesson 4.1: TBD</h2>
<!-- The above two div (above two lines of code) gives the green border. -->
<div class="concept">
<div class="concept-title">
</div>
<!-- end class concept-title-->
</div>
<!-- end class concept-->
</div>
<!-- class lesson_4.1 -->
</div>
<!--end lesson_4_border -->
</div>
<!-- end class stage_border -->
<!-- END Stage 4 - coming soon! -->
</body>
<!-- END BODY -->
</html>
Raw
Stage2WorkSession1_21Dec15.markdown
Raw
style.css
/*My first stab at CSS*/
/*The below text provides the overall font style within the Body of the HTML document*/
body {
font-family: avenir;
}
h1 {
text-align: center;
color: white;
}
h2 {
text-align: center;
color: white
}
h3 {
text-align: center;
color: black;
}
h4 {
text-align: left;
color: black;
}
h5 {
text-align: left;
color: black;
}
/*The below text provides the dark grey border in the Table of Contents*/
.toc {
background-color: grey;
border-radius: 20px;
color: white;
padding: 10px;
}
/*The below text provides the light grey border in the Introduction*/
.introduction {
background-color: #a8a8a8;
border-radius: 20px;
color: white;
padding: 10px;
}
/*BEGIN: Section controlling hyperlink behavior */
/*unvisited link think about "#00FF00" */
a:link {
color: blue;
}
/* visited link */
a:visited {
color: red;
}
/* mouse over link */
a:hover {
color: green;
}
/*END: Section controlling hyperlink behavior */
/*BEGIN: Lesson styling ...
I provided a style for each lesson because I wanted them to be color coded. It seemed intuitive that each lesson should be colored coded to help with quick navigation - I know exactly what lesson I'm on based on the color coding
I also used the underscore for the class name for each lesson. Versus the titles without underscores that will serve as id names.*/
/* The above provides the blue border for each stage.*/
.stage_border {
background-color: #152960;
border-radius: 20px;
color: black;
padding: 15px;
}
/*I'm having trouble iwth this because if I try to change the id in the HTML AND correspondingly in the CSS, the blue border disappears completely and will not return with the new name. */
/*The below text provides the green border in Lesson 1*/
.lesson_1_border {
background-color: green;
border-radius: 20px;
color: white;
padding: 10px;
}
/*The below text provides the pink border in Lesson 2*/
.lesson_2_border {
background-color: #ff00ff;
border-radius: 20px;
color: white;
padding: 10px;
}
/*The below text provides the purple border in Lesson 3*/
.lesson_3_border {
background-color: #ffbf00;
border-radius: 20px;
color: white;
padding: 10px;
}
/*The below text provides the purple border in Lesson 4*/
.lesson_4_border {
background-color: #660099;
border-radius: 20px;
color: white;
padding: 10px;
}
/*END*/
/*BEGIN*/
.concept {
background-color: #dfeaf1;
padding: 30px;
margin: 15px;
border-radius: 4px;
color: black;
}
.concept-title {
font-size: 17px;
margin: 8px;
text-align: left;
color: black;
font-weight: bold;
}
.concept-description {
font-size: 15px;
margin: 8px;
text-align: left;
color: black;
}
/*END*/
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment