Skip to content

Commit

Permalink
feat: more labs
Browse files Browse the repository at this point in the history
  • Loading branch information
@khoa-l
khoa-l committed Sep 14, 2023
1 parent 6283fd4 commit f81b95c
Show file tree
Hide file tree
Showing 14 changed files with 108 additions and 339 deletions.
7 changes: 3 additions & 4 deletions js/ui.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -108,14 +108,13 @@ const labs = [
"On the Web",
"Cascading Style Sheets",
"Selectors",
"Pseudo Classes and Pseudo Elements",
"Grouping and Nesting",
"Specificity",
"Colors and Text",
"Margins and Padding",
"Borders",
"Shorthand Properties",
"Rounded Corners",
"Shadows",
"Grouping and Nesting",
"Specificity",
"Display",
"Page Layout",
"Flexbox",
Expand Down
2 changes: 1 addition & 1 deletion lab_018.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -94,7 +94,7 @@ <h2>Section Other Pages</h2>
<code class="language-html">&lt;footer&gt;</code> to each page's
<code class="language-html">&lt;body&gt;</code> the same way you did for <code>index.html</code>
</li>
<li>In every <code class="language-html">&lt;footer&gt;</code>, put the following text: "© 2023 &lt;Personal Website Name&gt; | All Rights Reserved | Made with love ♥"</li>
<li>In every <code class="language-html">&lt;footer&gt;</code>, put the following text: "© 2023 &lt;Personal Website Name&gt; | All Rights Reserved"</li>
<p class="note"><strong>Note:</strong> All these tags have an opening and a closing tag. Also, your
<code class="language-html">&lt;body&gt;</code> tag should still enclose everything.
</p>
Expand Down
2 changes: 1 addition & 1 deletion lab_019.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -96,7 +96,7 @@ <h2>Headings</h2>
class="language-html">&lt;p&gt;</code> paragraphs, put an <code class="language-html">&lt;h1&gt;</code> tag.
Inside, give your home page an appropriate heading. We'll put "hello world!"</p>
<img class="image" src="assets/1904.png" alt="A description or about me about Hack4Impact">
<p>The <code class="language-html">&lt;h1&gt;</code> headings is used once as the main heading of a page.
<p>The <code class="language-html">&lt;h1&gt;</code> heading is used once as the main heading of a page.
The other headings can be used as many times as necessary, but always in order. <code
class="language-html">&lt;h3&gt;</code> should be a sub-heading of <code
class="language-html">&lt;h2&gt;</code> and <code class="language-html">&lt;h6&gt;</code> should be the
Expand Down
6 changes: 3 additions & 3 deletions lab_029.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -69,9 +69,9 @@ <h3 class="file-heading"><em>index.html</em></h3>
commit your changes. You don't need to push as often to the remote repository, but when you're happy with
something it might be a good idea to also push.</p>
<h2>Make It Your Own</h2>
<p>CSS is very flexible and has a lot of capabilities. Instead of describing what everything you need to do like
with HTML, we'll outline the necessary CSS versus the optional CSS that you are free to change as much or as little
as you'd like.</p>
<p>CSS is very flexible and has a lot of capabilities. Instead of describing everything you need to do like
with HTML, we'll go over the most important CSS concepts, outline what the necessary CSS is, and <strong>leave all
the rest of the styling up to you</strong>!</p>
<p>If you just follow our stylings and keep everything the same, you'll get a very specific looking website so
we encourage you to make it our own!</p>

Expand Down
86 changes: 16 additions & 70 deletions lab_031.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@

<head>
<title>
Lab 31 - Colors and Text
Lab 31 - Pseudo Classes and Pseudo Elements
</title>
<meta charset="UTF-8" />
<meta content="IE=edge,chrome=1" http-equiv="X-UA-Compatible" />
Expand Down Expand Up @@ -38,81 +38,27 @@
<div id="content" tabindex="-1">
<h1 class="lab_title">
<em>Lab 31</em>
Colors and Text
Pseudo Classes and Pseudo Elements
</h1>

<h2>Goals</h2>
<ul>
<li>Learn about colors and text in CSS</li>
<li>Learn about pseudo classes and pseudo elements in CSS</li>
</ul>
<h2>Color</h2>
<p>Some CSS properties take a color as its value. CSS comes with a few keywords which define built-in colors.
You can use <code class="language-css">red</code>,
<code class="language-css">aqua</code>, <code class="language-css">antiquewhite</code>,
<code class="language-css">blue</code>, <code class="language-css">silver</code>, <code
class="language-css">transparent</code>, and more to reference colors.
</p>
<p>CSS also accepts <strong>RGB</strong>, <strong>HSL</strong>, and <strong>hexadecimal</strong> colors as well.
If you've ever used a digital art program or Photoshop you probably know what these are, but if you don't here's
a quick rundown.
<p>
<ul>
<li><strong>RGB</strong> stands for <em>red</em>, <em>green</em>, <em>blue</em> and describes the amount of
each color used in combination to make other colors. Defined in CSS as
<code class="language-css">rgb(0, 0, 255)</code> with each number between 0 and 255.
</li>
<p class="note"><strong>Note:</strong> You can also use <strong>RGBa</strong> as <code
class="language-css">rgba(0, 0, 255, 0.5)</code>to define an <em>alpha</em> or transparency value between
0 and 1.</p>
<li><strong>HSL</strong> stands for <em>hue</em>, <em>saturation</em>, <em>lightness</em> and describes the
color in terms of these values. Defined in CSS as <code class="language-css">hsl(240, 100%, 50%)</code>
with the first number being the hue angle on a color wheel between 0 and 360, the second being the saturation
between 0% and 100%, and the third being the lightness between 0% and 100%.
</li>
<p class="note"><strong>Note:</strong> You can also use <strong>HSLa</strong> as <code
class="language-css">hsla(240, 100%, 50%, 0.5)</code>.</p>
<h2>Pseudo Classes</h2>
<p><em>Pseudo classes</em> are an extra add-on to CSS selectors that make selections
that much more specific. They target an element's state or interaction.
The ones we will talk about are <code class="language-css">link</code>,
<code class="language-css">visited</code>, <code class="language-css">active</code>,
<code class="language-css">hover</code>, and <code class="language-css">focus</code>.</p>
<pre class="file line-numbers" data-range="1,8" data-src="prism/css/3101.css"></pre>

<li><strong>Hexadecimal</strong> colors are a way of representing RGB colors in a more compact way. Defined in
CSS as <code class="language-css">#0000ff</code> with the first two characters representing the amount of
red, the second two characters representing the amount of green, and the last two characters representing the
amount of blue. Each character is a hexadecimal (base-16) digit between 0 and f.</li>
<p class="note"><strong>Note:</strong> If the pairs share a letter it can be shortened even further to three
characters.
<code class="language-css">#0000ff</code> can be shortened to <code class="language-css">#00f</code>.
</p>
</ul>
<h2>Text</h2>
<p>The different text properties that we will consider are <code class="language-css">font-size</code>, <code
class="language-css">font-family</code>, <code class="language-css">font-weight</code>, <code
class="language-css">font-style</code>, <code class="language-css">text-decoration</code>, <code
class="language-css">text-transform</code>, and <code class="language-css">text-align</code>.
</p>
<p>Some of these are pretty self-explanatory, but we'll go over them!</p>
<ul>
<li><code class="language-css">font-size</code> changes the size of the font. Common units are <code>px</code> or
pixels and <code>pt</code> or point like in word processing programs.</li>
<p class="note"><strong>Note:</strong> Make sure you don't use <code class="language-css">font-size</code>
as a crutch instead of proper semantic HTML e.g. headings. Headings should use the proper tags and not be
large font paragraphs.</p>
<li><code class="language-css">font-family</code> affects the actual font itself. In order to load fonts, browsers
will need the font to be on a website visitor's computer. There are a few <em>web-safe</em> fonts that are generally
available across most browsers and systems. You can define multiple comma-separated fonts as a backup in case a font
is not found.</li>
<pre><code class="language-css">font-family: Helvetica, Arial, sans-serif;</code></pre>
<p class="note"><strong>Note:</strong> If you want to use a font that's not a standard font,
we highly recommend using Google's Web Fonts. Their tutorial on how to import them is here:
<a href="https://developers.google.com/fonts/docs/css2" target="_blank" rel="noopener">https://developers.google.com/fonts/docs/css2</a></p>
<li><code class="language-css">font-weight</code> determines whether a font is <code>bold</code> or <code>normal</code>. You can also
specify weights in numbers e.g. (100, 200, 500) but we suggest sticking with <code>bold</code> or <code>normal</code>.</li>
<li><code class="language-css">font-style</code> determines whether a text is <code>italic</code> or not.</li>
<li><code class="language-css">text-decoration</code> describes lines above, through, or below text. It can take the following
values: <code>underline</code>, <code>overline</code>, <code>line-through</code> and <code>none</code>.</li>
<li><code class="language-css">text-transform</code> will change the case of the text. It can take the following
values: <code>capitalize</code>, <code>lowercase</code>, <code>uppercase</code>, and <code>none</code>.</li>
<li><code class="language-css">text-align</code> will align text within it's parent container. It can take the following
values: <code>left</code>, <code>right</code>, <code>center</code>, and <code>justify</code>.</li>

</ul>
<h2>Pseudo Elements</h2>
<p><em>Pseudo elements</em> are attached in the exact same way as pseudo classes,
but instead of targeting an element's state, it targets some part of the element's content
that doesn't necessarily exist in the HTML structure. We'll cover <code class="language-css">first-letter</code>,
<code class="language-css">first-line</code>, <code class="language-css">before</code>, and
<code class="language-css">after</code>.</p>


</div>
Expand Down
6 changes: 3 additions & 3 deletions lab_032.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@

<head>
<title>
Lab 32 - Margins and Padding
Lab 32 - Grouping and Nesting
</title>
<meta charset="UTF-8" />
<meta content="IE=edge,chrome=1" http-equiv="X-UA-Compatible" />
Expand Down Expand Up @@ -37,8 +37,8 @@
</nav>
<div id="content" tabindex="-1">
<h1 class="lab_title">
<em>Lab </em>
Margins and Padding
<em>Lab 32</em>
Grouping and Nesting
</h1>

<h2>Goals</h2>
Expand Down
4 changes: 2 additions & 2 deletions lab_033.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@

<head>
<title>
Lab 33 - Borders
Lab 33 - Specificity
</title>
<meta charset="UTF-8" />
<meta content="IE=edge,chrome=1" http-equiv="X-UA-Compatible" />
Expand Down Expand Up @@ -38,7 +38,7 @@
<div id="content" tabindex="-1">
<h1 class="lab_title">
<em>Lab 33</em>
Borders
Specificity
</h1>

<h2>Goals</h2>
Expand Down
74 changes: 71 additions & 3 deletions lab_034.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@

<head>
<title>
Lab 34 - Shorthand Properites
Lab 34 - Colors and Text
</title>
<meta charset="UTF-8" />
<meta content="IE=edge,chrome=1" http-equiv="X-UA-Compatible" />
Expand Down Expand Up @@ -38,12 +38,80 @@
<div id="content" tabindex="-1">
<h1 class="lab_title">
<em>Lab 34</em>
Shorthand Properties
Colors and Text
</h1>

<h2>Goals</h2>
<ul>
<li>Learn about <code>Git</code></li>
<li>Learn about colors and text in CSS</li>
</ul>
<h2>Color</h2>
<p>Some CSS properties take a color as its value. CSS comes with a few keywords which define built-in colors.
You can use <code class="language-css">red</code>,
<code class="language-css">aqua</code>, <code class="language-css">antiquewhite</code>,
<code class="language-css">blue</code>, <code class="language-css">silver</code>, <code
class="language-css">transparent</code>, and more to reference colors.
</p>
<p>CSS also accepts <strong>RGB</strong>, <strong>HSL</strong>, and <strong>hexadecimal</strong> colors as well.
If you've ever used a digital art program or Photoshop you probably know what these are, but if you don't here's
a quick rundown.
<p>
<ul>
<li><strong>RGB</strong> stands for <em>red</em>, <em>green</em>, <em>blue</em> and describes the amount of
each color used in combination to make other colors. Defined in CSS as
<code class="language-css">rgb(0, 0, 255)</code> with each number between 0 and 255.
</li>
<p class="note"><strong>Note:</strong> You can also use <strong>RGBa</strong> as <code
class="language-css">rgba(0, 0, 255, 0.5)</code>to define an <em>alpha</em> or transparency value between
0 and 1.</p>
<li><strong>HSL</strong> stands for <em>hue</em>, <em>saturation</em>, <em>lightness</em> and describes the
color in terms of these values. Defined in CSS as <code class="language-css">hsl(240, 100%, 50%)</code>
with the first number being the hue angle on a color wheel between 0 and 360, the second being the saturation
between 0% and 100%, and the third being the lightness between 0% and 100%.
</li>
<p class="note"><strong>Note:</strong> You can also use <strong>HSLa</strong> as <code
class="language-css">hsla(240, 100%, 50%, 0.5)</code>.</p>

<li><strong>Hexadecimal</strong> colors are a way of representing RGB colors in a more compact way. Defined in
CSS as <code class="language-css">#0000ff</code> with the first two characters representing the amount of
red, the second two characters representing the amount of green, and the last two characters representing the
amount of blue. Each character is a hexadecimal (base-16) digit between 0 and f.</li>
<p class="note"><strong>Note:</strong> If the pairs share a letter it can be shortened even further to three
characters.
<code class="language-css">#0000ff</code> can be shortened to <code class="language-css">#00f</code>.
</p>
</ul>
<h2>Text</h2>
<p>The different text properties that we will consider are <code class="language-css">font-size</code>, <code
class="language-css">font-family</code>, <code class="language-css">font-weight</code>, <code
class="language-css">font-style</code>, <code class="language-css">text-decoration</code>, <code
class="language-css">text-transform</code>, and <code class="language-css">text-align</code>.
</p>
<p>Some of these are pretty self-explanatory, but we'll go over them!</p>
<ul>
<li><code class="language-css">font-size</code> changes the size of the font. Common units are <code>px</code> or
pixels and <code>pt</code> or point like in word processing programs.</li>
<p class="note"><strong>Note:</strong> Make sure you don't use <code class="language-css">font-size</code>
as a crutch instead of proper semantic HTML e.g. headings. Headings should use the proper tags and not be
large font paragraphs.</p>
<li><code class="language-css">font-family</code> affects the actual font itself. In order to load fonts, browsers
will need the font to be on a website visitor's computer. There are a few <em>web-safe</em> fonts that are generally
available across most browsers and systems. You can define multiple comma-separated fonts as a backup in case a font
is not found.</li>
<pre><code class="language-css">font-family: "Helvetica", "Arial", "sans-serif";</code></pre>
<p class="note"><strong>Note:</strong> If you want to use a font that's not a standard font,
we highly recommend using Google's Web Fonts. Their tutorial on how to import them is here:
<a href="https://developers.google.com/fonts/docs/css2" target="_blank" rel="noopener">https://developers.google.com/fonts/docs/css2</a></p>
<li><code class="language-css">font-weight</code> determines whether a font is <code>bold</code> or <code>normal</code>. You can also
specify weights in numbers e.g. (100, 200, 500) but we suggest sticking with <code>bold</code> or <code>normal</code>.</li>
<li><code class="language-css">font-style</code> determines whether a text is <code>italic</code> or not.</li>
<li><code class="language-css">text-decoration</code> describes lines above, through, or below text. It can take the following
values: <code>underline</code>, <code>overline</code>, <code>line-through</code> and <code>none</code>.</li>
<li><code class="language-css">text-transform</code> will change the case of the text. It can take the following
values: <code>capitalize</code>, <code>lowercase</code>, <code>uppercase</code>, and <code>none</code>.</li>
<li><code class="language-css">text-align</code> will align text within it's parent container. It can take the following
values: <code>left</code>, <code>right</code>, <code>center</code>, and <code>justify</code>.</li>

</ul>


Expand Down
60 changes: 0 additions & 60 deletions lab_035.html
View file

This file was deleted.

Loading

0 comments on commit f81b95c

Please sign in to comment.