-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
Showing
2 changed files
with
151 additions
and
3 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,5 +1,140 @@ | ||
| <article class="space--after-quadruple bg-black"> | ||
| <div class="space--after-double"> | ||
| TBD | ||
| <article class="space--after-quadruple"> | ||
| <div class="space--after-quadruple"> | ||
| <h4>Description</h4> | ||
| <p>This week, we will learn about CSS: its history, syntax, and how it | ||
| is used in conjunction with HTML. Then, we will dive deeper into the | ||
| different selectors of CSS, and how cascading, inheritance and | ||
| specificity work in collaboration to resolve conflict in styling. We | ||
| will also spend some time talking about linking external stylesheets | ||
| and how to use the developer tools in the browser to inspect and | ||
| debug your code.</p> | ||
| </p> | ||
| </div> | ||
|
|
||
| <div class="space--after-quadruple"> | ||
| <h4>Lecture</h4> | ||
| <p><a | ||
| href="https://www.figma.com/proto/1nqtu2OOsOOBVNmM7ChwFb/Week-3?page-id=0%3A1&type=design&node-id=1-114&viewport=1985%2C458%2C0.06&t=rgZRFYVPsYLK2mUq-1&scaling=min-zoom&mode=design">Intro | ||
| to CSS</a> | ||
| </p> | ||
| <p><a | ||
| href="https://www.figma.com/proto/1nqtu2OOsOOBVNmM7ChwFb/Week-3?page-id=0%3A1&type=design&node-id=8-273&viewport=1985%2C458%2C0.06&t=rgZRFYVPsYLK2mUq-1&scaling=min-zoom&mode=design">Cascading</a> | ||
| </p> | ||
| <p><a | ||
| href="https://www.figma.com/proto/1nqtu2OOsOOBVNmM7ChwFb/Week-3?page-id=0%3A1&type=design&node-id=1-120&viewport=1985%2C458%2C0.06&t=rgZRFYVPsYLK2mUq-1&scaling=min-zoom&mode=design">Adding | ||
| Custom Fonts</a> | ||
| </p> | ||
| </div> | ||
|
|
||
| <div class="space--after-quadruple"> | ||
| <h4>Assignments</h4> | ||
| <p class="space--after-single">The assignment is broken into two parts. | ||
| </p> | ||
|
|
||
| <ul> | ||
| <li class="space--after-double"> | ||
| <h5><a href="https://web.dev/learn/html/semantic-html">Semantic | ||
| HTML</a> | ||
| </h5> | ||
| <p class="space--after-single">Continue to refine your content | ||
| and structure in your HTML based on your sitemap and the | ||
| piece of text you've chosen. Make sure to populate your HTML | ||
| with the chosen content. Think about what tag you will be | ||
| using for it? Is it a <code class="html">h1</code> tag? Is | ||
| it a <code class="html">p</code> tag? Why? Think about the | ||
| semantic hierarchy.</p> | ||
| </li> | ||
|
|
||
| <li> | ||
| <h5><a href="https://cssreference.io/">Style with CSS</a></h5> | ||
| <p class="space--after-single"> | ||
| Once your structure is in place, start styling your content | ||
| using CSS. Start with very basic typographic styles, like | ||
| <code>font-family</code>, <code>font-size</code>, | ||
| <code>line-height</code>, and <code>letter-spacing</code>. | ||
| You | ||
| may need to do some of your own research, but we've also | ||
| linked a couple of resources below. | ||
| </p> | ||
| </li> | ||
| </ul> | ||
| </div> | ||
|
|
||
| <div class="space--after-quadruple"> | ||
| <h4>Readings</h4> | ||
|
|
||
| <ul> | ||
| <li> | ||
| <p><a href="https://frankchimero.com/blog/2015/the-webs-grain/">The | ||
| Web's Grain (Frank Chimero)</a></p> | ||
| </li> | ||
| </ul> | ||
| </div> | ||
|
|
||
| <div class="space--after-quadruple"> | ||
| <h4>Resources</h4> | ||
|
|
||
| <div class="space--after-quadruple"> | ||
|
|
||
| <h5>HTML</h5> | ||
| <ul class="space--after-single"> | ||
| <li> | ||
| <p><a | ||
| href="https://www.w3schools.com/html/html_accessibility.asp">HTML | ||
| Accessibility</a></p> | ||
| </li> | ||
| <li> | ||
| <p><a | ||
| href="https://www.w3schools.com/tags/tag_link.asp#:~:text=Definition%20and%20Usage,element%2C%20it%20contains%20attributes%20only.">HTML | ||
| <link> Tag, W3 Schools</a></p> | ||
| </li> | ||
| </ul> | ||
|
|
||
| <h5>CSS</h5> | ||
| <ul class="space--after-single"> | ||
| <li> | ||
| <p><a href="https://cssreference.io/">cssreference.io</a> | ||
| </p> | ||
| </li> | ||
| <li> | ||
| <p><a href="https://www.w3schools.com/css/css_howto.asp">How | ||
| to Add CSS, W3 Schools</a></p> | ||
| </li> | ||
| <li> | ||
| <p><a href="https://caniuse.com/?search=woff">Can I Use?</a> | ||
| </p> | ||
| </li> | ||
| <li> | ||
| <p><a | ||
| href="https://meyerweb.com/eric/tools/css/reset/">reset.css</a> | ||
| </p> | ||
| </li> | ||
| </ul> | ||
|
|
||
| <h5>Custom Fonts</h5> | ||
| <ul class="space--after-single"> | ||
| <li> | ||
| <p><a | ||
| href="https://www.youtube.com/watch?v=eLY5KSXcQ6c&ab_channel=RosemaryBarker">Add | ||
| Google Fonts to a Website</a></p> | ||
| </li> | ||
| <li> | ||
| <p><a | ||
| href="https://www.youtube.com/watch?v=R9O6BXCs1sY&ab_channel=RosemaryBarker">Add | ||
| Adobe Fonts to a Website</a></p> | ||
| </li> | ||
| <li> | ||
| <p><a href="https://www.w3schools.com/css/css3_fonts.asp">Add | ||
| Custom (not Google or Adobe) Fonts to a Website</a> | ||
| </p> | ||
| </li> | ||
| <li> | ||
| <p><a | ||
| href="https://www.youtube.com/watch?v=nw5VqSpP5q8&ab_channel=DesignersLearnCode">Coding | ||
| for Beginners: EOT, TTF, OTF, WOFF, WOFF2, SVG. What | ||
| does it all mean?</a></p> | ||
| </li> | ||
| </ul> | ||
| </div> | ||
| </div> | ||
| </article> |