Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix broken link, small spelling errors and spacing #45

Open
wants to merge 1 commit into
base: gh-pages
Choose a base branch
from
Open

fix broken link, small spelling errors and spacing #45

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
36 changes: 18 additions & 18 deletions class1.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -153,7 +153,7 @@ <h3>Tools</h3>
<a href="https://atom.io/" target="_blank">Atom</a> - Windows, Mac<br />
<a href="https://notepad-plus-plus.org/" target="_blank">Notepad++</a> - Windows<br />
<a href="http://www.sublimetext.com/" target="_blank">Sublime Text</a> - Windows, Mac, Linux<br />
<a href="http://www.barebones.com/products/textwrangler/TextWrangler" target="_blank">TextWrangler</a> - Mac</li>
<a href="http://www.barebones.com/products/TextWrangler/" target="_blank">TextWrangler</a> - Mac</li>
</ul>
</section>

Expand Down Expand Up @@ -342,7 +342,7 @@ <h3>Head and Body Tags</h3>

<!-- Develop it -->
<section>
<h3>Let's develop it!</h3>
<h3>Let's Develop It!</h3>
<p>Let's get our web page set up with a doctype, head, title and body.</p>
<p>Later we'll add some content.</p>
</section>
Expand Down Expand Up @@ -461,7 +461,7 @@ <h3>Formatted text</h3>

<!--develop it!-->
<section >
<h3>Let's Develop it!</h3>
<h3>Let's Develop It!</h3>
<p class="left-align">Let's add some content to our site!</p>
<p class="left-align">Add one of each level of heading with 1-2 short paragraphs of text below each heading. </p>
<p class="left-align">Use &lt;strong&gt; and &lt;em&gt; within a few paragraphs.</p>
Expand Down Expand Up @@ -576,13 +576,13 @@ <h3>Element: Unordered and ordered lists</h3>
<div>
<div class="halfblock">
<pre><code class="html">&lt;ul&gt;
&lt;li&gt;List Item&lt;/li&gt;
&lt;li&gt;AnotherList Item&lt;/li&gt;
&lt;li&gt;List Item&lt;/li&gt;
&lt;li&gt;AnotherList Item&lt;/li&gt;
&lt;/ul&gt;
</code></pre>
<pre><code class="html">&lt;ol&gt;
&lt;li&gt;List Item&lt;/li&gt;
&lt;li&gt;AnotherList Item&lt;/li&gt;
&lt;li&gt;List Item&lt;/li&gt;
&lt;li&gt;AnotherList Item&lt;/li&gt;
&lt;/ol&gt;
</code></pre>
</div>
Expand Down Expand Up @@ -612,7 +612,7 @@ <h3>Lists: Examples</h3>

<!-- Develop it!-->
<section>
<h3>Let's Develop it!</h3>
<h3>Let's Develop It!</h3>
<p>Let's add one of each ordered and unordered lists to our page.</p>
<p>We can make a list of links or even a list of images!</p>
</section>
Expand All @@ -630,8 +630,8 @@ <h3>Comments</h3>

&lt;!--
&lt;ol&gt;
&lt;li&gt;List Item&lt;/li&gt;
&lt;li&gt;Another List Item&lt;/li&gt;
&lt;li&gt;List Item&lt;/li&gt;
&lt;li&gt;Another List Item&lt;/li&gt;
&lt;/ol>
-->
</code></pre>
Expand All @@ -645,14 +645,14 @@ <h3>Tables</h3>
<div>
<div class="halfblock">
<pre><code class="html">&lt;table&gt;
&lt;tr&gt;
&lt;th&gt;Head&lt;/th&gt;
&lt;th&gt;Head&lt;/th&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;Data&lt;/td&gt;
&lt;td&gt;Data&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;th&gt;Head&lt;/th&gt;
&lt;th&gt;Head&lt;/th&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;Data&lt;/td&gt;
&lt;td&gt;Data&lt;/td&gt;
&lt;/tr&gt;
&lt;/table&gt;
</code></pre>
</div>
Expand Down
50 changes: 25 additions & 25 deletions class2.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -145,7 +145,7 @@ <h3>Connecting CSS to HTML</h3>
<!-- Inline -->
<section>
<h3>Connecting CSS to HTML: Inline</h3>
<pre><code class = "html">&lt;p style="color:red"&gt;Some text.&lt;/p&gt;
<pre><code class = "html">&lt;p style="color:red;"&gt;Some text.&lt;/p&gt;
</code></pre>
<p>Uses the HTML attribute style.</p>
<p>Difficult to use in large projects</p>
Expand Down Expand Up @@ -186,9 +186,9 @@ <h3>Connecting CSS to HTML: Linked</h3>

<!-- Exercise-->
<section>
<h3>Let's develop it</h3>
<h3>Let's Develop It</h3>
<ul>
<li>In the same foolder you used last week, create a new file called style.css</li>
<li>In the same folder you used last week, create a new file called style.css</li>
<li>Add a link to the file in the head of your HTML file</li>
<li>Add the CSS rule below to the CSS file:</li>
</ul>
Expand Down Expand Up @@ -282,7 +282,7 @@ <h3>Property: Background-color</h3>

<!-- Exercise-->
<section>
<h3>Let's develop it</h3>
<h3>Let's Develop It</h3>
<ul>
<li>Add some rules to your css file</li>
<li>Change the font color and background color of different types of elements</li>
Expand All @@ -294,7 +294,7 @@ <h3>Let's develop it</h3>
<section>
<h3>Property Values</h3>
<p>Each property can have one or more comma separated values.</p>
<pre><code class = "css">p{
<pre><code class = "css">p {
color: white;
background-color: red;
font-family: Arial, sans-serif;
Expand Down Expand Up @@ -351,7 +351,7 @@ <h3>Property: Fonts (shorthand)</h3>

<!-- Exercise-->
<section>
<h3>Let's develop it</h3>
<h3>Let's Develop It</h3>
<ul>
<li>Change the fonts of your page</li>
<li>Try changing the font sizes and styles for different elements</li>
Expand All @@ -375,13 +375,13 @@ <h3>Selector: Position</h3>
<ul>
<li>Position selectors are more specific</li>
<li>They look for elements <em>inside</em> other elements</li>
<li>We seperate nested elements with a space</li>
<li>We separate nested elements with a space</li>
</ul>
</section>
<section>
<h3>Selector: Position</h3>
<p>So this code:</p>
<pre><code class = "css">ul li a strong{
<pre><code class = "css">ul li a strong {
color: purple;
}
</code></pre>
Expand All @@ -392,7 +392,7 @@ <h3>Selector: Position</h3>
</code></pre>
</section>
<section>
<h3>Let's develop it</h3>
<h3>Let's Develop It</h3>
<ul>
<li>In your CSS file, try a position selector</li>
<li>Remember, you need to look for an element <em>inside</em> another element</li>
Expand All @@ -416,34 +416,34 @@ <h3>IDs vs. Classes</h3>
</section>
<section>
<h3>Selector: ID</h3>
<pre><code class = "css">#footer {
<pre><code class="css">#footer {
property: value;
}
</code></pre>
<p>Selects all elements with an id of "footer".</p>

<pre><code class="html">&lt;p id="footer"&gt;Copyright 2011&lt;/p&gt;
<pre><code class="html">&lt;p id="footer"&gt;Copyright 2017&lt;/p&gt;
</code></pre>
<p>The associated HTML.</p>
</section>

<!-- Selectors Class-->
<section>
<h3>Selector: Class</h3>
<pre><code class = "css">.warning {
<pre><code class="css">.warning {
color: red;
}
</code></pre>
<p>Selects all elements with a class of "warning".</p>

<pre><code class = "html">&lt;p class="warning"&gt;Run away!&lt;/p&gt;
<pre><code class="html">&lt;p class="warning"&gt;Run away!&lt;/p&gt;
</code></pre>
<p>The associated HTML.</p>
</section>

<!-- Exercise-->
<section>
<h3>Let's develop it</h3>
<h3>Let's Develop It</h3>
<ul>
<li>Add an ID and class to a your HTML</li>
<li>Add CSS rules to target these elements</li>
Expand All @@ -454,8 +454,8 @@ <h3>Let's develop it</h3>
<section>
<h3>Cascading</h3>
<p>Styles "cascade" down until changed</p>
<pre><code class = "css">p{
color:blue;
<pre><code class = "css">p {
color: blue;
font-family: 'Helvetica';
}
.red {
Expand All @@ -466,15 +466,15 @@ <h3>Cascading</h3>
}
</code></pre>
<pre><code class = "html">&lt;p&gt;Paragraph&lt;/p&gt;
&lt;p class ="red"&gt;Paragraph&lt;/p&gt;
&lt;p class = "red" id ="special"&gt;Paragraph&lt;/p&gt;
&lt;p class="red"&gt;Paragraph&lt;/p&gt;
&lt;p class="red" id="special"&gt;Paragraph&lt;/p&gt;
</code></pre>
</section>
<section>
<h3>Cascading priority</h3>
<p>Your browser assigns different priorities to CSS depending on the type of selector.</p>
<ol>
<li>Important! - <strong>Most Important</strong></li>
<li>!important - <strong>Most Important</strong></li>
<li>In line CSS</li>
<li>ID</li>
<li>Class</li>
Expand All @@ -484,27 +484,27 @@ <h3>Cascading priority</h3>
<section>
<h3>Cascading priority</h3>
<p>Your browser also assigns priority based on the specificity of the selection. More specific selectors have higher priority.</p>
<pre><code class = "css">.main .sale .clearance p{ //Most specific
<pre><code class = "css">.main .sale .clearance p { /*Most specific*/
color: red;
}
.header .title p{
.header .title p {
color: green;
}
.footer p{ //Least specific
.footer p { /*Least specific*/
color: blue;
}
</code></pre>
</section>
<section>
<h3>Cascading priority</h3>
<p>The tie-breaker is position. Rules lower in the file overwrite rules higher in the file</p>
<pre><code class = "css">a{
<pre><code class = "css">a {
background-color: yellow;
}
a{
a {
background-color: teal;
}
a{ //This rule wins
a { /*This rule wins*/
background-color: black;
}
</code></pre>
Expand Down
38 changes: 19 additions & 19 deletions class3.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -125,16 +125,16 @@ <h3>Element: Div</h3>
<section>
<h3>Div Examples</h3>
<pre><code class="html">&lt;div&gt;
&lt;p&gt;Content&lt;p&gt;
&lt;p&gt;Content&lt;p&gt;
&lt;p&gt;Content&lt;/p&gt;
&lt;p&gt;Content&lt;/p&gt;
&lt;/div&gt;
</code></pre>
<pre><code class="html">&lt;div id="header"&gt;
&lt;h1&gt;Main Heading&lt;h1&gt;
&lt;h1&gt;Main Heading&lt;/h1&gt;
&lt;/div&gt;
</code></pre>
<pre><code class="html">&lt;div class="sub-content"&gt;
&lt;p&gt;Some more content&lt;p&gt;
&lt;p&gt;Some more content&lt;/p&gt;
&lt;/div&gt;
</code></pre>
</section>
Expand All @@ -149,8 +149,8 @@ <h3>Grouping elements with div</h3>

<section>
<h3>Grouping elements with div, cont.</h3>
<pre><code class="css">.align-right{
text-align:right;
<pre><code class="css">.align-right {
text-align: right;
color: purple;
font-weight: bold;
}
Expand Down Expand Up @@ -258,8 +258,8 @@ <h3>Element: Span</h3>
<h3>Span</h3>
<p>Span is used to apply a specific style inline</p>

<pre><code class="css">.highlight{
color:teal;
<pre><code class="css">.highlight {
color: teal;
}
</code></pre>
<pre><code class="html">&lt;p&gt;Paragraph with &lt;span class="highlight"&gt;teal&lt;/span&gt; text.&lt;/p&gt;
Expand All @@ -274,20 +274,20 @@ <h3>Let's Develop It</h3>

<!-- Pseudo class-->
<section>
<h3>Pseudo-classess</h3>
<h3>Pseudo-classes</h3>
<div class="halfblock">
<p>Changing the format of a link when you hover over it is accomplished by using pseudo-classes.</p>
<p>CSS pseudo-classes are used to add special effects to some selectors.</p>
</div>

<div class="halfblock">
<p>Syntax:</p>
<pre><code class="css">selector:pseudo-class{
property:value;
<pre><code class="css">selector:pseudo-class {
property: value;
}
</code></pre>
<p>Example:</p>
<pre><code class="css">a:link{
<pre><code class="css">a:link {
text-decoration: none;
}
</code></pre>
Expand Down Expand Up @@ -425,7 +425,7 @@ <h3>Auto Margin</h3>
<section>
<h3>Wrappers</h3>
<p>Wrappers are a good way to center content if the screen width is wider than your content.</p>
<pre><code class="css">div.wrapper{
<pre><code class="css">div.wrapper {
width: 100%;
max-width: 1400px;
margin: 0 auto;
Expand All @@ -435,7 +435,7 @@ <h3>Wrappers</h3>

<!-- Exercise -->
<section>
<h3>Let's Develop it!</h3>
<h3>Let's Develop It!</h3>
<p>Let's add some padding, borders, and margins to our divs.</p>
<p>Let's center our entire document in the browser.</p>
</section>
Expand All @@ -446,10 +446,10 @@ <h3>Let's Develop it!</h3>
<h3>Property: Width</h3>
<p>Sets the width of an element.</p>
<p>Does not include padding or borders. Remember to add these to the width.</p>
<pre><code class="css">div#sidebar{
<pre><code class="css">div#sidebar {
width: 31%;
padding: 1%;
border: none; //Total width is 33%
border: none; /*Total width is 33%*/
}
</code></pre>
</section>
Expand All @@ -459,17 +459,17 @@ <h3>Property: Width</h3>
<h3>Property: Height</h3>
<p>Sets the height of an element.</p>
<p>Does not include padding or borders. Remember to add these to the height.</p>
<pre><code class="css">p.alert{
<pre><code class="css">p.alert {
height: 50px;
padding: 5px;
border: 2px solid red; //Total height is 64px
border: 2px solid red; /*Total height is 64px*/
}
</code></pre>
</section>

<!-- Exercise -->
<section>
<h3>Let's develop it!</h3>
<h3>Let's Develop It!</h3>
<div>
<p>Add a width &amp; height to our divs.</p>
<p>Use IDs to target each div with CSS</p>
Expand Down
Loading