-
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
3 changed files
with
134 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
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,121 @@ | ||
| <article class="space--after-quadruple bg-black"> | ||
| <article class="space--after-quadruple"> | ||
| <div class="space--after-double"> | ||
| TBD | ||
| <h4>Description</h4> | ||
| <p>This week, we will write our first line of code! We will learn about | ||
| HTML, and how an HTML document turns into a website. We will also | ||
| set up our codebase through GitHub and develop a workflow for | ||
| managing our code throughout the semester. Lastly, we will learn | ||
| more about the nebulous concept of “the user”, and how it informs | ||
| how we write our code. | ||
| </p> | ||
| </div> | ||
|
|
||
| <div class="space--after-double"> | ||
| <h4>Lecture</h4> | ||
| <p><a | ||
| href="https://www.figma.com/proto/4Oadswbihe1kiRsCNQlivJ/Week-2?type=design&node-id=1-74&t=nfS6LVIHUGvvnD9K-0&scaling=min-zoom&page-id=0%3A1">Intro | ||
| to HTML</a> | ||
| </p> | ||
| <p><a | ||
| href="https://www.figma.com/proto/4Oadswbihe1kiRsCNQlivJ/Week-2?type=design&node-id=1-79&t=nfS6LVIHUGvvnD9K-0&scaling=min-zoom&page-id=0%3A1">Environment | ||
| Setup</a> | ||
| </p> | ||
| <p><a | ||
| href="https://www.figma.com/proto/4Oadswbihe1kiRsCNQlivJ/Week-2?type=design&node-id=1-201&t=nfS6LVIHUGvvnD9K-0&scaling=scale-down&page-id=0%3A1">The | ||
| User</a> | ||
| </p> | ||
| </div> | ||
|
|
||
| <div class="space--after-double"> | ||
| <h4>Assignments</h4> | ||
| <p>The assignment is broken into two parts. Please finish the following | ||
| things after choosing an existing piece of text you'd like to work | ||
| with.</p> | ||
|
|
||
| <ul> | ||
| <li class="space--after-double"> | ||
| <h3>Sitemap</h3> | ||
| <p class="space--after-single">Using pen and paper (or figma if | ||
| you like), create a site map: a visualization of the | ||
| structure and navigation of your website. Think about how | ||
| you want to retell the text you’ve chosen and how you can | ||
| take advantage of the non-linear potential of the web to | ||
| create a new experience for the reader. How many pages will | ||
| you need? In what order should the user navigate those | ||
| pages.</p> | ||
| </li> | ||
|
|
||
| <li> | ||
| <h3>Code it in HTML!</h3> | ||
| <p class="space--after-single"> | ||
| Based on your site map, transition from paper to code by | ||
| setting up your code environment and HTML files. Make sure | ||
| to build the hyperlinks so the pages can be linked to one | ||
| another. Build out all the pages you need without having to | ||
| worry about populating them with content yet. Is that too | ||
| many pages? Is the navigation interesting and represents the | ||
| idea of your storytelling structure? | ||
| </p> | ||
| </li> | ||
| </ul> | ||
|
|
||
| <h4>Participation</h4> | ||
| <ul> | ||
| <li class="space--after-double"> | ||
| <h3>Class Website</h3> | ||
| <p class="space--after-single">Finish setting up your class | ||
| website in github, which will serve as an index that links | ||
| out to all of your projects in class.</p> | ||
| </li> | ||
| </ul> | ||
|
|
||
| </div> | ||
|
|
||
| <div class="space--after-quadruple"> | ||
| <h4>Readings</h4> | ||
|
|
||
| <ul> | ||
| <li> | ||
| <h3><a href="https://luckysoap.com/statements/handmadeweb.html">A | ||
| Handmade Webs (J.R. Carpenter)</a></h3> | ||
| </li> | ||
| </ul> | ||
| </div> | ||
|
|
||
| <div class="space--after-quadruple"> | ||
| <h4>Resources</h4> | ||
|
|
||
| <ul> | ||
| <li> | ||
| <h3><a | ||
| href="https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer">Live | ||
| Server</a></h3> | ||
| </li> | ||
| <li> | ||
| <h3><a href="https://www.w3schools.com/tags/">HTML | ||
| Element Reference, W3 Schools</a></h3> | ||
| </li> | ||
| <li> | ||
| <h3><a | ||
| href="https://www.youtube.com/watch?app=desktop&v=CkzbI1Tv_rQ">Basics | ||
| of HTML, Laurel Schwulst</a></h3> | ||
| </li> | ||
| <li> | ||
| <h3><a | ||
| href="https://blog.mozilla.org/en/internet-culture/deep-dives/why-are-hyperlinks-blue/">Why | ||
| are hyperlinks blue?</a></h3> | ||
| </li> | ||
| <li> | ||
| <h3><a | ||
| href="https://www.w3schools.com/html/html_accessibility.asp">HTML | ||
| Accessibility</a></h3> | ||
| </li> | ||
| <li> | ||
| <h3><a | ||
| href="https://www.a11yproject.com/posts/how-to-use-the-tabindex-attribute/">Use | ||
| the tabindex attribute</a></h3> | ||
| </li> | ||
|
|
||
| </ul> | ||
| </div> | ||
| </article> |