Skip to content

Commit

Permalink
completed slide updates (#219)
Browse files Browse the repository at this point in the history 
Co-authored-by: Alicia Villegas <[email protected]>
  • Loading branch information
@Silfron @avillegas1717
Silfron and avillegas1717 authored Aug 10, 2024
1 parent 2579296 commit f76b669
Show file tree
Hide file tree
Showing 8 changed files with 102 additions and 57 deletions.
159 changes: 102 additions & 57 deletions 01-glasswork/2023-front-end-html.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -51,8 +51,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 @@ -71,16 +71,37 @@ <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>
</section>
<section>
<h1>The Newest #lil_ladydev...</h1>
<div class="new-team">
<div class="team-member fragment">
<img src="../images/shared/EmmyShultz.jpg" alt="Emmy Shultz" />
<p class="fragment">Emmy Shultz</p>
<br>
<p class="fragment">Arrived: July 31, 2024</p>
<p class="fragment">at 10:51pm</p>
<p class="fragment">7lbs 7oz</p>
<br>
<p class="fragment">Mama and baby are both doing great!</p>
</div>
</div>
</section>
<!-- Host Section -->
<section>
<h1>Our Host this Evening</h1>
Expand Down Expand Up @@ -159,7 +180,7 @@ <h3 class="fragment">This stuff is a challenge!</h3>
<section>
<h1>Tonight's Agenda: <br>HTML &amp; Front-end Architecture</h1>
<br>
<ul style="list-style:disc; margin-left: 80px;">
<ul style="list-style:disc; margin-left: 80px;">
<li class="fragment">What is Web Development &amp; Intro to HTML</li>
<li class="fragment">HTML Content Tags</li>
<li class="fragment">HTML Attributes & the DOM</li>
Expand All @@ -175,17 +196,17 @@ <h1>First, we drink!</h1>
</section>
<!-- SESSION TOPIC: Web Development/HTML -->
<section>
<h1>What is a Web Development?</h1>
<h1>What is Web Development?</h1>
<br><br>
<ul style="list-style:disc; margin-left: 80px;">
<li class="fragment">Stages involved in building a website</li>
<li class="fragment">Tasks involved in creating, building, and maintaining websites and applications that run online on a browser</li>
</ul>
</section>
<section>
<h1>What is a Website?</h1>
<br><br>
<ul style="list-style:disc; margin-left: 80px;">
<li class="fragment">Collection of files understood by the browser</li>
<li class="fragment">Special files that browsers can read and display as the websites we use daily</li>
</ul>
</section>
<section>
Expand All @@ -197,33 +218,41 @@ <h1>Website files include:</h1>
</ul>
</section>
<section>
<h1>The Code Files</h1>
<h1>Code Files Include:</h1>
<br><br>
<ul style="list-style:disc; margin-left: 80px;">
<li class="fragment"><span style="color:#c7bc75">HTML</span> - contains content you see</li>
<ul style="list-style:disc; margin-left: 80px;">
<li class="fragment"><span style="color:#c7bc75">HTML</span> - content you see</li>
<li class="fragment"><span style="color:#c7bc75">CSS</span> - styles for the site</li>
<li class="fragment"><span style="color:#c7bc75">JavaScript</span> - defines behavior of the website</li>
</ul>
</section>
<section>
<h1>HTML</h1>
<h1>HTML | Content</h1>
<br><br>
<ul style="list-style:disc; margin-left: 80px;">
<li class="fragment">Contains content you see</li>
<br>
<li class="fragment">Defines the structure of the content (navigation, header, footer, lists)</li>
<!-- REPEAT | TAKE OUT???
<li class="fragment">Contains content you see</li>
-->
<br>
<li class="fragment">Defines the structure of the content (navigation, header, footer, lists)
<ul style="list-style:disc; margin-left: 80px;">
<li class="fragment">Organizes the content, but it doesn't handle the layout</li>
</ul>
</li>
<!-- Speech note: NOT the layout, but the organization of the content-->
<br>
<li class="fragment">Boring to look at by itself</li>
<li class="fragment">Looks plain on its own</li>
<br>
<li class="fragment">Our focus for today</li>
</ul>
</section>
<section>
<h1>CSS</h1>
<h1>CSS | Styling</h1>
<br><br>
<ul style="list-style:disc; margin-left: 80px;">
<li class="fragment">Styles for the site</li>
<!-- REPEAT | TAKE OUT???
<li class="fragment">Styles for the site</li>
-->
<br>
<li class="fragment">Decorates HTML content by adding visual appeal</li>
<br>
Expand All @@ -233,20 +262,24 @@ <h1>CSS</h1>
</ul>
</section>
<section>
<h1>JavaScript</h1>
<h1>JavaScript | Behavior</h1>
<br><br>
<ul style="list-style:disc; margin-left: 80px;">
<!-- REPEAT | TAKE OUT???
<li class="fragment">Defines behavior of the website</li>
-->
<br>
<li class="fragment">Muscles that power a website</li>
<br>
<li class="fragment">Handles interactions, such as button clicks</li>
<li class="fragment">Handles interactions, such as button clicks, and fetches dynamic content to keep information up to date</li>
<br>
<li class="fragment">Join us later this year when we cover JavaScript</li>
</ul>
</section>
<section>
<img src="../images/front-end-html/html+css+javascript.gif" alt="HTML, CSS, and JavaScript working together" height="85%"/>
<h1>How do they fit together?</h1>
<br><br>
<img src="../images/front-end-html/html+css+javascript.gif" alt="HTML, CSS, and JavaScript working together" height="60%"/>
</section>
<!-- HTML Basics -->
<section>
Expand All @@ -262,18 +295,18 @@ <h1>What is HTML?</h1>
<p class="fragment"><span style="color:#c7bc75">L</span>anguage</p>
</section>
<section>
<h1>What is HTML?</h1>
<h1>HTML continued...</h1>
<br>
<ul style="list-style:disc; margin-left: 80px;">
<li class="fragment">Most fundamental building block of web pages</li>
<li class="fragment">The most essential component of webpages</li>
<br>
<li class="fragment">Syntax that tells the browser how to display the page</li>
<li class="fragment">A language with specific rules that tells the browser how to display the content</li>
<br>
<li class="fragment">Used for the meaning of the content, not how it is formatted</li>
<li class="fragment">Defines the meaning and structure of the content, not its appearance</li>
</ul>
</section>
<section>
<h1>What is HTML?</h1>
<h1>HTML continued...</h1>
<br>
<ul style="list-style:disc; margin-left: 80px;">
<li class="fragment">Type (header, body) versus style (font, color, background)</li>
Expand All @@ -288,6 +321,10 @@ <h1>What is HTML?</h1>
</ul>
</ul>
</section>
<section>
<h1>Where in the World Would You See HTML?</h1>
<img src="../images/front-end-html/carmen-san-diego.gif" alt="Carmen Sandiego" height="75%"/>
</section>
<section>
<h1>Where in the World Would You See HTML?</h1>
<br><br>
Expand Down Expand Up @@ -332,10 +369,10 @@ <h1>Open/Closed Tags</h1>
</p>
<img src="../images/front-end-html/htmlOpeningClosingTag.png" alt="Opening closing tag example" height="auto"/>
</section>
<section>
<!-- <section>
<br><br><br>
<p>My cat is very grumpy.</p>
</section>
</section> -->
<section>
<h1>More About Open and Close Tags</h1>
<br><br>
Expand Down Expand Up @@ -373,10 +410,12 @@ <h1>Self-closing Tags</h1>
<br>
<p class="fragment">
<code style="width: 90%; margin: 0 auto;">&lt;img src="/images/ryan-gosling.gif" height="460px" /&gt;</code>
<br><br>
<p class="fragment">Do NOT need a closing tag</p>
<br>
<p class="fragment">Unable to add more HTML inside of tags</p>
<img class="fragment" src="../images/front-end-html/gosling.gif" alt="Ryan Gosling" height="auto"/>
<br>
<li class="fragment">Do NOT need a closing tag</li>
<br>
<li class="fragment">Unable to add more HTML inside of tags</li>
</p>
</section>
<section>
Expand Down Expand Up @@ -433,14 +472,19 @@ <h1><code>&lt;head&gt;</code></h1>
<li class="fragment"><span style="color:#c7bc75">&lt;title&gt;</span> Text that displays in browser tab</li>
<br>
<li class="fragment">
<span style="color:#c7bc75">&lt;meta charset="utf-8"&gt;</span><br>
Character encoding that can be explicitly set/<strong>UTF-8</strong>
</li>
<br>
<li class="fragment">Metadata for search engines and more</li>
<span style="color:#c7bc75">&lt;meta charset="utf-8"&gt;</span> Character encoding: &nbsp; In HTML5 contains almost all characters & symbols in the world.</li>
</ul>
</p>
</section>
<section>
<br>
<p>
Other valid tags inside of <span style="color:#c7bc75">&lt;head&gt;</span>:
<br><br>
<ul class="fragment">
<li class="fragment"><span style="color:#c7bc75">&lt;meta&gt;</span> Metadata for search engines and more</li>
<br>
<li class="fragment"><span style="color:#c7bc75">&lt;link&gt;</span> Linked files</li>
<br>
</ul>
</p>
</section>
Expand Down Expand Up @@ -500,13 +544,13 @@ <h1>HTML Content Tags</h1>
<li class="fragment">Examples include:</li>
<br>
<ul class="fragment" style="list-style:disc; margin-left: 80px;">
<li>Headings, Paragraphs, Ordered/Unordered Lists</li>
<li class="fragment">Headings, Paragraphs, Ordered/Unordered Lists</li>
<br>
<li>Hyperlinks, Images, Videos, Audio</li>
<li class="fragment">Hyperlinks, Images, Videos, Audio</li>
<br>
<li>Tables, Figures</li>
<li class="fragment">Tables, Figures</li>
<br>
<li>Interactive elements such as Buttons, Inputs, Selects</li>
<li class="fragment">Interactive elements such as Buttons, Inputs, Selects</li>
</ul>
</ul>
</section>
Expand Down Expand Up @@ -539,28 +583,28 @@ <h1>Semantic HTML</h1>
For example, you can quote Malala Yousafzai using a <span style="color:#c7bc75">&lt;span&gt;</span>
or semantically correct <span style="color:#c7bc75">&lt;q&gt;</span> tag:
</p>
<br>
</section>
<section>
<br><br>
<span>We realize the importance of our voices only when we are silenced.</span>
<br><br>
<code class="fragment" style="width:75%;margin: 0 auto;">
&lt;span&gt;<br>
&nbsp;&nbsp;We realize the importance of our voices only <br>&nbsp;&nbsp;when we are silenced.
<br>&lt;/span&gt;
</code>
<br>
<br><br>
<q class="fragment" cite="https://www.goodreads.com/book/show/17851885-i-am-malala">
We realize the importance of our voices only when we are silenced.
</q>
<br><br>
<code class="fragment" style="width: 75%; margin: 0 auto;">
<div>
&lt;q cite="https://www.goodreads.com/book/malala"&gt;<br>
&nbsp;&nbsp;We realize the importance of our voices only <br>&nbsp;&nbsp;when we are silenced.<br></div>
&lt;/q&gt;<br>
</code>
</section>
<section>
<br><br><br><br><br>
<span>We realize the importance of our voices only when we are silenced.</span>
<br><br>
<q cite="https://www.goodreads.com/book/show/17851885-i-am-malala">
We realize the importance of our voices only when we are silenced.
</q>
</section>
<section>
<h1>Semantics Improve:</h1>
<br><br>
Expand Down Expand Up @@ -638,8 +682,7 @@ <h1>HTML Standards &amp; Best Practices</h1>
<!-- Quick check in -->
<section>
<br>
<p>Hey girl</p>
<img src="../images/html-session/gosling.gif" alt="Hey Girl" height="76%"/>
<img src="../images/front-end-html/watermelon_html.gif" alt="Watermelon" height="76%"/>
</section>
<!-- Debugging Tools -->
<section>
Expand Down Expand Up @@ -838,7 +881,7 @@ <h1>src</h1>
</ul>
</section>
<section>
<h1>data-*</h1>
<h1>data</h1>
<br><br>
<ul style="list-style:disc; margin-left: 80px;">
<li class="fragment">Custom attributes specific to a website's needs</li>
Expand Down Expand Up @@ -897,7 +940,8 @@ <h1>Absolute Paths</h1>
<section>
<br>
<p>Hey girl</p>
<img src="../images/html-session/gosling.gif" alt="Hey Girl" height="76%"/>
<br><br>
<img src="../images/front-end-html/gosling.gif" alt="Hey Girl" height="55%"/>
</section>
<!-- DOM -->
<section>
Expand Down Expand Up @@ -1210,6 +1254,7 @@ <h1>Architecture May Include:</h1>
</section>
<section>
<h1>Architecture Examples</h1>
<br><br>
<ul style="list-style:disc; margin-left: 80px;">
<li class="fragment">
Directory namings such as <b><i>imgs</i></b> vs <b><i>images</i></b>
Expand Down Expand Up @@ -1276,7 +1321,7 @@ <h1>Keep up with us</h1>
<img src="../images/shared/meetup.png" width="190"/>
</a>
<a class="fragment" href="https://twitter.com/KCWomeninTech" target="_blank">
<img src="../images/shared/twitter.png" width="150"/>
<img src="../images/shared/x-logo.png" width="150"/>
</a>
<br><br>
<div class="fragment">
Expand Down
Binary file added images/front-end-html/carmen-san-diego.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.
Binary file added images/front-end-html/coding_course_cat.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 images/html-session/gosling.gif → images/front-end-html/gosling.gif
View file
File renamed without changes
Binary file added images/front-end-html/html_outta_here.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.
Binary file added images/front-end-html/watermelon_html.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.
Binary file added images/shared/EmmyShultz.jpg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added images/shared/Tracy.jpg
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 f76b669

Please sign in to comment.