Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
Branch: master
Fetching contributors…

Cannot retrieve contributors at this time

450 lines (396 sloc) 14.413 kB
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Class 2 ~ HTML/CSS ~ Girl Develop IT</title>
<meta name="description" content="This is the official Girl Develop It Core HTML/CSS curriculum. It was developed through the contributions of Pamela Fox, Alexis Goldstein, Erin M. Kidwell, Izzy Johnston, and Jen Myers.
The course is meant to be taught in 4 or 6 two-hour sections. If you are teaching a 4 section course, you can ignore classes 5 and 6 without losing any impact or information. Each of the slides and practice files are customizable according to the needs of a given class or audience.">
<meta name="author" content="Girl Develop It">
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
<link rel="stylesheet" href="reveal/css/reveal.css">
<link rel="stylesheet" href="reveal/css/theme/gdidefault.css" id="theme">
<!-- For syntax highlighting -->
<!-- light editor<link rel="stylesheet" href="lib/css/light.css">-->
<!-- dark editor--><link rel="stylesheet" href="reveal/lib/css/dark.css">
<!-- If use the PDF print sheet so students can print slides-->
<link rel="stylesheet" href="reveal/css/print/pdf.css" type="text/css" media="print">
<!--[if lt IE 9]>
<script src="lib/js/html5shiv.js"></script>
<![endif]-->
</head>
<body>
<div class="reveal">
<!-- Any section element inside of this container is displayed as a slide-->
<div class="slides">
<!-- Opening slide -->
<section>
<img src = "images/gdi_logo_badge.png">
<h3>Beginning HTML and CSS</h3>
<h4>Class 2</h4>
</section>
<!-- Welcome-->
<section class="hide-pdf">
<h3>Welcome!</h3>
<div class = "left-align">
<p>Girl Develop It is here to provide affordable and accessible programs to learn software through mentorship and hands-on instruction.</p>
<p class ="green">Some "rules"</p>
<ul>
<li>We are here for you!</li>
<li>Every question is important</li>
<li>Help each other</li>
<li>Have fun</li>
</ul>
</div>
</section>
<!-- Role of HTML v. CSS-->
<section>
<h3>Anatomy of a website</h3>
<div class = "blue"> Your Content</div>
<div><span class = "blue">+ HTML: </span>Structure</div>
<div><span class = "blue">+ CSS: </span>Presentation</div>
<div class = "blue">= Your Website</div>
<p>A website is a way to present your content to the world, using HTML and CSS to present that content &amp; make it look good.</p>
</section>
<!-- What is CSS-->
<section>
<h3>CSS: What is it?</h3>
<p>CSS = <span class="green">C</span>ascading <span class="green">S</span>tyle <span class="green">S</span>heets</p>
<p>CSS is a "style sheet language" that lets you style the elements on your page.</p>
<p>CSS works in conjunction with HTML, but is not HTML itself.</p>
</section>
<section>
<h3>CSS: What can it do?</h3>
<p>All colored text, position, and size</p>
<img src = "images/homepage-view.png">
</section>
<section>
<h3>CSS: What does it look like?</h3>
<img src = "images/homepage-css.png">
</section>
<!-- The CSS Rule-->
<section>
<h3>The CSS Rule</h3>
<img src="images/cssrule.png" alt="The CSS Rule" style="border: none; box-shadow: none;"/>
</section>
<section>
<h3>The CSS Rule</h3>
<pre><code class = "html">
selector {
property: value;
}
</code></pre>
<div class = "left-align">
<p>A block of CSS code is a rule.</p>
<p>The rule starts with a selector.</p>
<p>It has sets of properties and values.</p>
<p>A property-value pair is a declaration.</p>
</div>
</section>
<!-- CSS Syntax -->
<section>
<h3>CSS Syntax</h3>
<div class = "left-align">
<p>Declarations: Property and value of style you plan use on HTML element. </p>
<p>Declarations end with a semicolon</p>
<p>Declaration groups are surrounded by curly brackets.</p>
</div>
<pre><code class = "html">
selector {
property: value;
property: value;
property: value;
}
</code></pre>
</section>
<!-- Selectors elements-->
<section>
<h3>Selector: Element</h3>
<pre><code class = "html">
p {
property: value;
}
</code></pre>
<p>Selects all paragraph elements.</p>
<pre><code class = "html">
img {
property: value;
}
</code></pre>
<p>Selects all image elements.</p>
</section>
<!-- Selectors ID-->
<section>
<h3>Selector: ID</h3>
<pre><code class = "html">
#footer {
property: value;
}
</code></pre>
<p>Selects all elements with an id of "footer".</p>
<pre><code class = "html">
&lt;p id="footer">Copyright 2011&lt;/p>
</code></pre>
<p>The associated HTML.</p>
</section>
<!-- Selectors Class-->
<section>
<h3>Selector: Class</h3>
<pre><code class = "html">
.warning {
color: red;
}
</code></pre>
<p>Selects all elements with a class of "warning".</p>
<pre><code class = "html">
&lt;p class="warning">Run away!&lt;/p>
</code></pre>
<p>The associated HTML.</p>
</section>
<!-- ID vs Class-->
<section>
<h3>IDs vs. Classes</h3>
<div class = "left-align">
<span class = "yellow">ID</span> -- Should only apply to one element on a webpage. I.E. A webpage only has one footer.
<p>The "#" is how you tell CSS "this is an id."</p>
</div>
<div class = "left-align">
<span class = "yellow">Class</span> -- Many elements can have the same class. I.E. There can be many warnings on one webpage.
<p>The "." is how you tell CSS "this is a class name."</p>
</div>
</section>
<!-- Selector descendant-->
<section>
<h3>Selector: Descendant</h3>
<pre><code class = "html">
p em {
color: yellow;
}
</code></pre>
<p>Selects all em elements that are within a paragraph</p>
<pre><code class = "html">
&lt;p>This is &lt;em>important.&lt;/em>&lt;/p>
</code></pre>
<p>The associated HTML.</p>
</section>
<!-- Multiple values -->
<section>
<h3>Property Values</h3>
<p>Each property can have one or more comma separated values.</p>
<pre><code class = "html">
p{
color: white;
background-color: red;
font-family: Arial, sans-serif;
}
</code></pre>
</section>
<!-- Color-->
<section>
<h3>Property: Color</h3>
<p>The color property changes the color of the text.</p>
<pre><code class = "html">
p {
color: red;
color: #ff0000;
color: rgb(255, 0, 0);
}
</code></pre>
<p>Color name</p>
<p>Hexadecimal value</p>
<p>RGB value</p>
<p><small>The 17 standard colors are: <font color="aqua" style="background:black;">aqua</font>, <font color="black">black</font>, <font color="blue">blue</font>, <font color="fuchsia">fuchsia</font>, <font color="gray">gray</font>, <font color="grey">grey</font>, <font color="green">green</font>, <font color="lime">lime</font>, <font color="maroon">maroon</font>, <font color="navy">navy</font>, <font color="olive">olive</font>, <font color="purple">purple</font>, <font color="red">red</font>, <font color="silver" style="background:black;">silver</font>, <font color="teal">teal</font>, <font color="white" style="background:black;">white</font>, and <font color="yellow" style="background:black;">yellow</font>.</small></p>
</section>
<!-- Background color-->
<section>
<h3>Property: Background-color</h3>
<p>The background-color property changes the color of the background.</p>
<pre><code class = "html">
p {
background-color: black;
background-color: #000000;
background-color: rgb(0,0,0);
}
</code></pre>
</section>
<!-- Font family-->
<section>
<h3>Property: Font-family</h3>
<p>The font-family property defines which font is used.</p>
<pre><code class = "html">
p {
font-family: "Times New Roman";
font-family: serif;
font-family: "Arial", sans-serif;
}
</code></pre>
<p>Specific font name</p>
<p>Generic name</p>
<p>Comma-separated list</p>
</section>
<!-- Font size -->
<section>
<h3>Property: Font-size</h3>
<p>The font-size property specifies the size of the font.</p>
<pre><code class = "html">
p {
font-size: 12px;
font-size: 1.5em;
font-size: 100%;
}
</code></pre>
<p>Pixels</p>
<p>"em"</p>
<p>Percentage</p>
</section>
<!-- Fonts-->
<section>
<h3>Property: Fonts (shorthand)</h3>
<pre><code class = "html">
p {
font-style: italic;
font-weight: bold;
font-size: 10px;
font-family: sans-serif;
}
</code></pre>
OR
<pre><code class = "html">
p {
font: italic bold 10px sans-serif;
}
</code></pre>
</section>
<!-- Connecting HTML to CSS-->
<section>
<h3>Connecting CSS to HTML</h3>
<p class = "green">3 ways</p>
<p>"Inline"</p>
<p>"Embedded"</p>
<p>"External"</p>
</section>
<!-- Inline -->
<section>
<h3>Connecting CSS to HTML: Inline</h3>
<pre><code class = "html">
&lt;p style="color:red">Some text.&lt;/p>
</code></pre>
<p>Uses the HTML attribute style.</p>
<p>Difficult to use in large projects</p>
<p>Not preferred.</p>
</section>
<!-- Embedded -->
<section>
<h3>Connecting CSS to HTML: Embedded</h3>
<pre><code class = "html">
&lt;head>
&lt;style type="text/css">
p {
color: blue;
font-size: 12px;
}
&lt;/style>
&lt;/head>
</code></pre>
<p>Inside &lt;head> element.</p>
<p>Uses &lt;style> tag.</p>
<p>Can only be used in one html file</p>
</section>
<!-- External-->
<section>
<h3>Connecting CSS to HTML: Linked</h3>
<pre><code class = "html">
&lt;head>
&lt;link rel="stylesheet" type="text/css" href="style.css">
&lt;/head>
</code></pre>
<p>Shared resource for several pages.</p>
<p>Reduced file size &amp; bandwidth</p>
<p>Easy to maintain in larger projects.</p>
<p>Preferred by developers everywhere!</p>
</section>
<!-- Exercise-->
<section class="hide-pdf">
<h3>Let's develop it</h3>
<ul>
<li>Create a new .css file</li>
<li>Add a link to the file in the head of the portfolio made last time</li>
<li>Add styles to change the colors, background colors or fonts of different parts of the content</li>
<li>Try using ids and classes to change specific elements</li>
</ul>
</section>
<!-- Cascading-->
<section>
<h3>Cascading</h3>
<p>Styles "cascade" down until changed</p>
<pre><code class = "html">
p{
color:blue;
font-family: 'Helvetica';
}
.red{
color:red;
}
#special{
font-family: Arial;
}
</code></pre>
<pre><code class = "html">
&lt;p>Paragraph&lt;/p>
&lt;p class ="green">Paragraph&lt;/p>
&lt;p class ="red">Paragraph&lt;/p>
&lt;p class = "red" id ="special">Paragraph&lt;/p>
</code></pre>
</section>
<!-- Properties-->
<section>
<h3>CSS Properties</h3>
<p>Many CSS properties have self-explanatory names:</p>
<ul>
<li>background-color</li>
<li>font-family</li>
<li>font-size</li>
<li>color</li>
<li>width</li>
<li>height</li>
</ul>
<p><a href = "https://developer.mozilla.org/en-US/docs/CSS/CSS_Reference">Comprehensive list of all CSS properties</a></p>
</section>
<!-- Question-->
<section>
<h2>Questions?</h2>
<div style = "font-size:1200%; height:100%; margin-top:30%" class ="blue">?
<div class ="clear"></div></div>
</section>
</div>
<footer>
<div class="copyright">
HTML/CSS ~ Girl Develop It ~
<a rel="license" href="http://creativecommons.org/licenses/by-nc/3.0/deed.en_US"><img alt="Creative Commons License" style="border-width:0" src="http://i.creativecommons.org/l/by-nc/3.0/80x15.png" /></a>
</div>
</footer>
</div>
<script src="reveal/lib/js/head.min.js"></script>
<script src="reveal/js/reveal.min.js"></script>
<script>
// Full list of configuration options available here:
// https://github.com/hakimel/reveal.js#configuration
Reveal.initialize({
controls: true,
progress: true,
history: true,
theme: Reveal.getQueryHash().theme, // available themes are in /css/theme
transition: Reveal.getQueryHash().transition || 'linear', // default/cube/page/concave/zoom/linear/none
// Optional libraries used to extend on reveal.js
dependencies: [
{ src: 'reveal/lib/js/classList.js', condition: function() { return !document.body.classList; } },
{ src: 'reveal/plugin/markdown/showdown.js', condition: function() { return !!document.querySelector( '[data-markdown]' ); } },
{ src: 'reveal/plugin/markdown/markdown.js', condition: function() { return !!document.querySelector( '[data-markdown]' ); } },
{ src: 'reveal/plugin/highlight/highlight.js', async: true, callback: function() { hljs.initHighlightingOnLoad(); } },
{ src: 'reveal/plugin/zoom-js/zoom.js', async: true, condition: function() { return !!document.body.classList; } },
{ src: 'reveal/plugin/notes/notes.js', async: true, condition: function() { return !!document.body.classList; } }
]
});
</script>
</body>
</html>
Jump to Line
Something went wrong with that request. Please try again.