Skip to content

Commit

Permalink
Merge pull request #221 from KansasCityWomeninTechnology/css-2024
Browse files Browse the repository at this point in the history 
Updating CSS slides
  • Loading branch information
@avillegas1717
avillegas1717 authored Sep 12, 2024
2 parents 5f477ca + bd04c34 commit 295c439
Show file tree
Hide file tree
Showing 3 changed files with 82 additions and 62 deletions.
144 changes: 82 additions & 62 deletions css-series/2023-css.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -55,8 +55,8 @@ <h1>Meet the C&amp;C #LadyDevs</h1>
</div>
<!-- Curriculum Director -->
<div class="team-member fragment">
<img src="../images/shared/lulu.png" alt="Lulu Coa" />
<p>Lulu Coa</p>
<img src="../images/shared/Julie.jpg" alt="Julie Batson" height="350px" />
<p>Julie Batson</p>
<p>Curriculum Director</p>
</div>
<!-- Mentor Director -->
Expand All @@ -75,12 +75,18 @@ <h1>Meet the C&amp;C #LadyDevs</h1>
<div class="team-member fragment">
<img src="../images/shared/nessa.jpg" alt="Vanessa Shultz" />
<p>Vanessa Shultz</p>
<p>Presentation Director</p>
<p>Co-Presentation Director</p>
</div>
<!-- Presentation Director -->
<div class="team-member fragment">
<img src="../images/shared/Alicia.png" alt="Alicia Villegas" />
<p>Alicia Villegas</p>
<p>Co-Presentation Director</p>
</div>
<!-- Technical Materials Director -->
<div class="team-member fragment">
<img src="../images/shared/eyebrows.gif" alt="eyebrows" height="350"/>
<p><i>TBD</i></p>
<img src="../images/shared/Tracy.jpg" alt="Tracy Hockenhull" height="350px"/>
<p>Tracy Hockenhull</p>
<p>Technical Materials Director</p>
</div>
</div>
Expand Down Expand Up @@ -182,24 +188,6 @@ <h1>Tonight's Agenda:</h1>
<h1>First, we drink!</h1>
<br>
<img src="../images/shared/girls-drinking.jpg" alt="girls drinking" height="70%" />
<ul>
<h6>WiFI access:</h6>
<!-- TODO: add in wifi password below -->
<li></li>
<br>
<h6>Presentation Link</h6>
<li>
<a href="https://bit.ly/kcwit-cc-css" target="_blank">
https://bit.ly/kcwit-cc-css
</a>
</li>
<br>
<h6>Worksheet Link</h6>
<li>
<a href="https://bit.ly/cc-worksheets" target="_blank">
https://bit.ly/cc-worksheets
</a>
</ul>
</section>
<!-- Presentation Slides -->
<!-- TOP TOPIC: CSS Basics-->
Expand All @@ -211,53 +199,71 @@ <h1>Getting Started</h1>
<section>
<h1>What Is CSS?</h1>
<br><br>
<ul style="list-style:disc; margin-left: 80px;">
<li class="fragment">Cascading Style Sheets</li>
<br>
<li class="fragment">Controls how elements:</li>
<br>
<p class="fragment"><span style="color:#c7bc75">C</span>ascading</p>
<p class="fragment"><span style="color:#c7bc75">S</span>tyle</p>
<p class="fragment"><span style="color:#c7bc75">S</span>heet</p>
</section>
<section>
<h1>Controls HTML element's:</h1>
<br><br>
<ul style="list-style:disc; margin-left: 80px;">
<li class="fragment">Look</li>
<li class="fragment">Appearance</li>
<br>
<li class="fragment">Are positioned</li>
<li class="fragment">Layout</li>
</ul>
</ul>
</section>
<section>
<h1>CSS Controls How Elements Look</h1>
<h1>Appearance...</h1>
<br><br>
<ul style="list-style:disc; margin-left: 80px;">
<li class="fragment">Font, color, size of HTML elements</li>
</ul>
<li class="fragment">CSS is similar to styling tools in MS Word. </li>
<br>
<li class="fragment">Just as you can set the font color, size, and style for headings in Word, CSS lets you define these for elements on a webpage.</li>
</ul>

</section>
<section>
<h1>CSS Controls Layout</h1>
<h1>Layout...</h1>
<br><br>
<ul style="list-style:disc; margin-left: 80px;">
<li class="fragment">Text alignment</li>
<li class="fragment">CSS also controls how elements are arranged on the page, similar to how Word lets you organize text and images.</li>
<br>
<li class="fragment">Placement of elements</li>
<li class="fragment">With CSS, you can decide the number of columns, how items are aligned (horizontally or vertically), the size of images, and where image captions are placed, just like you would in Word.</li>
</ul>
</section>
<section>
<h1>Why Do We Care About CSS?</h1>
<br><br>
<ul style="list-style:disc; margin-left: 80px;">
<li class="fragment">Makes your webpages look pretty!</li>
<br>
<li class="fragment">Default styling vs. styled page</li>
<br><br>
</ul>
<img class="fragment" src="../images/CSS-session/so_pretty.gif" alt="It's so pretty" height="40%" />
</section>
<section>
<br>
<img src="../images/CSS-session/bbc-css.webp" alt="bbc no css vs css" height="90%" />
<h1>CSS continued...</h1>
<br><br>
<ul style="list-style:disc; margin-left: 80px;">
<li class="fragment">Makes a web page look attractive by styling and arranging element's colors, fonts, and layout to create a visually appealing design</li>
</ul>
</section>
<section>
<h1>Awesome Stuff Done Through CSS</h1>
<br>
<a href="http://codepen.io/mariareneepc/pen/NGEaxX">Wolf animation</a>
<br>
<a href="https://codepen.io/gxash/pen/YqmxWg">Circus Animation</a>
<h1>CSS vs. no CSS:</h1>
<br><br>
<img class="fragment" src="../images/CSS-session/gitHubCSS.webp" alt="GitHub no css vs css" height="auto" />
</section>
<section>
<h1>Examples of awesome animations using CSS:</h1>
<br><br>
<ul style="list-style:disc; margin-left: 80px;">
<li class="fragment">NOTE: This session will not discuss animations</li>
</ul>
<br><br>
<a class="fragment" href="http://codepen.io/jaysalvat/pen/HaqBf">Mona Lisa Animation</a>
<br><br>
<a class="fragment" href="http://codepen.io/mariareneepc/pen/NGEaxX">Wolf animation</a>
<br><br>
<a class="fragment" href="https://codepen.io/gxash/pen/YqmxWg">Circus Animation</a>
</section>
<section>
<h1>How To Include CSS in Your Project</h1>
Expand Down Expand Up @@ -288,18 +294,29 @@ <h1>External CSS File</h1>
<h1>Linking HTML &amp; CSS File</h1>
<br><br>
<ul style="list-style:disc; margin-left: 80px;">
<li class="fragment">Link to CSS file in HTML head section</li>
<br>
<li class="fragment"><span style="color: #c7bc75;">&lt;link&gt;</span> tag connects an external file (our stylesheet)</li>
<br>
<li class="fragment">Link to CSS file goes in HTML head section</li>
<br><br>
<code class="fragment" style="width:75%;margin: 0 auto;">
&lt;link rel="stylesheet" href="../styles/styles.css" /&gt;
</code>
</code>
</section>
<section>
<h1>Linking HTML &amp; CSS File</h1>
<br>
<li class="fragment"><span style="color: #c7bc75;">&lt;link&gt;</span> tag links external file (our stylesheet)</li>
<ul style="list-style:disc; margin-left: 80px;">
<li class="fragment"><span style="color: #c7bc75;">rel</span> attribute describes the relationship between the current and linked file to the browser (indicates that the linked file is a stylesheet)</li>
<br>
<li class="fragment"><span style="color: #c7bc75;">rel</span> attribute describes the relationship between the current and linked file to the browser (in this case, styles)</li>
<li class="fragment"><span style="color: #c7bc75;">href</span> attribute specifies the file's path, which can be either relative or absolute</li>
<br>
<ul style="list-style:disc; margin-left: 80px;">
<li class="fragment">Relative: refers to a page in the same folder as the current HTML file</li>
<br>
<li class="fragment"><span style="color: #c7bc75;">href</span> attribute tells browser the location of the file</li>
<li class="fragment">Absolute: includes the entire URL</li>
</ul>
</ul>
</section>
<section>
<h1>Note about CSS files:</h1>
Expand Down Expand Up @@ -327,18 +344,21 @@ <h1>How to Write CSS</h1>
</code>
<br>
<li class="fragment">Property: color property</li>
<br>
<li class="fragment">Value: red value</li>
</ul>
</section>
<section>
<h1>Selectors</h1>
<br><br>
<ul style="list-style:disc; margin-left: 80px;">
<li class="fragment">How you target the HTML to style</li>
<br>
<li class="fragment">Element selector</li>
<li class="fragment">How you target the HTML to style:</li>
<br>
<li class="fragment">Class selector</li>
<ul style="list-style:disc; margin-left: 80px;">
<li class="fragment">Element selector</li>
<br>
<li class="fragment">Class selector</li>
</ul>
</ul>
</section>
<section>
Expand All @@ -351,19 +371,19 @@ <h1>Element Selector</h1>
<br>
<li class="fragment">Selects and styles all <span style="color: #c7bc75;">h1</span> elements</li>
<br>
<li class="fragment">Good for base styles</li>
<li class="fragment">Good for base\templated styles</li>
</ul>
</section>
<section>
<h1>Element Selector Example</h1>
<br><br>
<p>html</p>
<code>
<p class="fragment">HTML:</p>
<code class="fragment">
&lt;h1&gt;Hello World&lt;/h1&gt;
</code>
<br>
<p>css</p>
<code>
<p class="fragment">CSS:</p>
<code class="fragment">
h1 {<br>
&nbsp;&nbsp;&nbsp;&nbsp;color: rebeccapurple;<br>
}
Expand Down Expand Up @@ -394,13 +414,13 @@ <h1>Class Selector</h1>
<section>
<h1>Class Selector Example</h1>
<br><br>
<p class="fragment">html</p>
<p class="fragment">HTML:</p>
<br>
<code class="fragment">
&lt;h1 class="cocktail"&gt;Cosmopolitan&lt;/h1&gt;
</code>
<br><br>
<p class="fragment">css</p>
<p class="fragment">CSS:</p>
<br>
<code class="fragment">
.cocktail {<br>
Expand Down
Binary file added images/CSS-session/gitHubCSS.webp
View file
Binary file not shown.
Binary file added images/CSS-session/so_pretty.gif
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.

0 comments on commit 295c439

Please sign in to comment.