admin/clarkeis.com
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

w3
All checks were successful
ClarkeIS Build / Build-Docker-Image (push) Successful in 25s
Details

Browse Source
This commit is contained in:
Tyler Clarke
2026-01-21 23:30:43 -05:00
parent 0863e932d5
commit 0ce859a50e
7 changed files with 315 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
site/introwebdev/gh-pages.html Normal file
View File

@@ -0,0 +1 @@

14
site/introwebdev/index.html
View File

@@ -5,6 +5,18 @@
<p>
Welcome to the homepage for Trailside's Spring 2026 introduction to web development course!
</p>
<div class="annoy">
<h2>We are doing the personal websites activity on the 23rd!</h2>
<p>
<b>If you don't have permission from your parents, get it!</b>
</p>
<p>
<b>If you don't have a github account, read through <a href="week-3-github-pages.html">the bit on Github Pages</a>!</b>
</p>
<p>
If it goes smoothly we'll have enough time for me to teach you how to replicate the "annoy" style used here, as a little incentive for preparedness!
</p>
</div>
<p>
This page is the source-of-truth for the entire course, so keep it bookmarked and check it often.
There will be no Google Classroom; any information you need will be here, and announcements will be posted via good old fashioned email.
@@ -50,6 +62,7 @@ TBD. Will post an announcement when this is worked out.
<ul>
<li><a href="week-1-homework.html">Week 1 Homework (short, no submission)</a></li>
<li><a href="week-2-homework.html">Week 2 Homework</a></li>
<li><a href="week-3-homework.html">Week 3 Homework</a></li>
</ul>
<h2>Lecture notes</h2>
<p>
@@ -58,6 +71,7 @@ I'll be posting these in advance of lectures, so you can review the material bef
<ul>
<li>Week 1: <a href="week-1-setup.html">Getting Set Up</a></li>
<li>Week 2: <a href="week-2-doctypes.html">Doctypes</a>, <a href="week-2-html-head-body.html">The HTML, Head, and Body tags</a>, <a href="week-2-metadata.html">Metadata</a>, <a href="week-2-web-inspect.html">Web Inspector</a></li>
<li>Week 3: <a href="week-3-gh-pages.html">Github Pages Intro</a>, <a href="week-3-safety.html">Internet Safety</a>, <a href="week-3-link-style.html">Linked Styles</a></li>
</ul>
<h2>Generative AI policy</h2>
<p>

36
site/introwebdev/universe.css
View File

@@ -67,3 +67,39 @@ blockquote {
padding-left: 2em;
margin-left: 0px;
}
@keyframes irritating {
0% {
border-left: 50px solid orange;
border-right: 50px solid salmon;
padding: 0px;
background-position-x: 0px;
}
50% {
border-left: 10px solid orange;
border-right: 10px solid salmon;
padding-left: 40px;
padding-right: 40px;
background-position-x: 50%;
}
100% {
border-left: 50px solid orange;
border-right: 50px solid salmon;
padding: 0px;
background-position-x: 100%;
}
}
.annoy {
animation-name: irritating;
animation-duration: 1s;
animation-iteration-count: infinite;
animation-timing-function: linear;
color: white;
background-color: rgba(0, 0, 0, 0.5);
background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), linear-gradient(45deg, red, orange, yellow, green, blue, purple, red, orange, yellow, green, blue, purple);
background-size: 200%;
}

61
site/introwebdev/week-3-gh-pages.html Normal file
View File

@@ -0,0 +1,61 @@
[!]
[=title "Week 3: Github Pages Intro"]
[=content-]
<p>
To host a personal website, there are a few good options. The one we're using in this course is
Github Pages. Pages is a service offered by <a href="https://github.com/">Github</a> (a free code hosting service)
that hosts <i>static sites</i>: the simple HTML files we've been working with in class.
</p>
<p>
Github is cool for a lot of reasons. To fully understand them, I recommend reading <a href="https://git-scm.com/book/en/v2">Pro Git</a> (free online)
- it's the definitive resource for the software (Git) that makes Github possible. I will not require
reading Pro Git in <i>this</i> course, but I highly recommend it; understanding how to properly use version control
is a big step towards becoming a software wizard.
</p>
<p>
The main reasons that <i>we're</i> using Github are that it's free (all you need to sign up is an email address),
highly configurable for your workflows, and fairly well-reputed (college professors and software projects often use Github pages!)
</p>
<p>
If possible, you should create an account on Github before class. Go to <a href="https://github.com/">the Github homepage</a> and (possibly with the help of a parent)
enter your email and navigate through the signup process. It's pretty quick and easy.
</p>
<p>
<b>Make sure to pick an appropriate username!</b> Your username will be public information and will go on your Pages site. Don't be me
and get stuck with a really dumb username.
</p>
<p>
Once you have access to Github, you'll have an option to create a <i>repository</i>. Read through Pro Git for a detailed
understanding of repositories - in short, a repository is a bundle of files stored in Github. For your website,
you'll want to create a <i>public repository</i>: this is exactly what it sounds like. Anyone will be able to view the contents,
which is what you want! Don't add a README or a LICENSE or anything else - the default options are fine.
</p>
<p>
Make sure to name your repository something like <code>your_username.github.io</code>. For instance, if your username is
"WebDeveloper01765", your repository is <code>WebDeveloper01765.github.io</code>. It's important to be exact about this.
</p>
<p>
If you created your repository correctly, you should be able to visit the "Settings" tab. Look under Settings
for "Pages": this contains the configuration for your public site! It'll be pretty simple. Make sure
"Source" is set to "Deply from a branch" - you definitely don't want to do this the hard way with Actions.
Finally change "Branch" from <code>None</code> to <code>main</code>. Leave the directory at
<code> / (root) </code>, and click "Save".
</p>
<p>
Github will start preparing your page to deploy. But there's nothing to show! Go back to the "Code" tab
and click "creating a new file" - this will bring you to a file editor. Set the name to "index.html" (this is important!)
and add some HTML content - an h1 tag containing "Hello World" is traditional.
</p>
<p>
Click "Commit Changes". Github's AI tool will generate a description for you, but it will most likely be a terrible one -
get in the habit of writing detailed descriptions! Submit by clicking the new "Commit Changes" button.
</p>
<p>
You're online! If you did everything correctly, you'll actually have a public website at <code>https://your_username.github.io/</code>,
which will contain whatever you put in your <code>index.html</code>. We'll talk a bit about why and how this works in class.
</p>
<p>
Seriously, read Pro Git. It's a lifechangingly good book.
</p>
[/]
[#template.html]

95
site/introwebdev/week-3-homework.html Normal file
View File

@@ -0,0 +1,95 @@
[!]
[=title "Week 3 Homework"]
[=content-]
<p>
This homework will require a functioning Github Pages website. If we weren't able to do that activity for some reason or other,
it will be replaced with something else.
</p>
<h2>Part 1: Your Multifile Website</h2>
<p>
At this point you most likely have a simple website with a single HTML page. But that's boring!
<span class="goal">At least 3 pages on your website</span>
Add a few pages - you should have at least 3 pages on your website in the end. Be creative, but here are some possible starting points:
</p>
<ul>
<li>
<code>about.html</code>: for a blurb about yourself (be careful not to include personal information; "I like cats" is good and "I like my cat Fwoofles" is okay but "my name is Johann
Sebastian Bach and I love cats" is bad).
</li>
<li>
<code>contact.html</code>: really, really don't make a real contact page, that would be bad. But a fake one is fine! There's no rule you can't lie on the internet.
+1 (555) 555-5555, +1 867-5309 are the classic fake phone numbers, and John (or Jane) Doe is the classic fake name.
</li>
<li>
<code>books.html</code>: a list of books you really like! Booklists are a fun way to share your literary preferences with others. Some of my favorite
books were found on an internet booklist, so it's not a pointless activity! Make sure not to include the names of local libraries or bookstores.
</li>
<li>
<code>food.html</code>: post recipes here! Don't post pictures of food you've made unless I've shown you how to strip EXIF metadata -
many pictures taken by phone cameras contain information about your location.
</li>
<li>
<code>new.html</code>: a little page listing significant events in your website's history.
</li>
<li>
<code>sitemap.html</code>: a list of pages on your website (note: this is different from the XML sitemaps made for search engine
crawlers - this one is meant for humans to read).
</li>
</ul>
<p>
While I will not literally be grading on creativeness, every boring website makes a baby bird sad. Have fun with it!
</p>
<p>
Ensure there exists at least one inter-page link on each page (like the "back to home" links on this website! but they don't have to lead back home),
and that every page can be navigated to from <code>index.html</code> just by clicking links.
<span class="goal">At least one inter-page link on each page in your site</span> <span class="goal">Every page accessible by some combination of clicks
from index.html</span>
</p>
<h2>Part 2: Conformity</h2>
<p>
While some degree of disorganized can be a design motif, a website that doesn't have any consistency at all is <i>awful</i>.
Go through each page and make sure each one has,
</p>
<ul>
<li>
A standardized title following some universal convention: common is "Website Name | Page Name", so like "Spoopy Website | Books Page" rather than "my books", but you should pick something
you personally like. <span class="goal">Consistent titles</span>
</li>
<li>
Universal navigation: a simple list of links at the top of the page suffices for this. It should be easy to navigate to any page from any page. <span class="goal">Universal navigation</span>
</li>
<li>
Universal icons: your website icon should always be the same on every page, and if you have a header image
or the like, that should also be the same. <span class="goal">Universal icons</span>
</li>
</ul>
<h2>Part 3: Style</h2>
<p>
Add some pizazz! Create a shared <code>style.css</code> file containing universal styles for your website (e.g. the universal font, background, etc)
and add it to <b>all</b> of your pages using a link tag. <span class="goal">CSS file linked in properly to every page</span> <span class="goal">Universal background color</span>
</p>
<h2>Part 4: Double Check</h2>
<p>
I will <b>instantly zero your grade</b> for any assignment that leaks personal information, unless you previously contacted me about it.
Make sure that there is no personal information on your website when you submit it.
If you have an information leak, <b>tell me immediately</b> so I can help you clean it up!
</p>
<h2>Self Study</h2>
<p>
Read through <a href="https://git-scm.com/book/en/v2">Pro Git</a>. I won't require you to use git properly in this course,
but it'll make your life a lot easier if you do!
</p>
<p>
Also, read about <a href="https://jekyllrb.com/">Jekyll</a> and <a href="https://docs.github.com/en/pages/setting-up-a-github-pages-site-with-jekyll">the Pages/Jekyll docs</a>.
Jekyll is an awesome tool that can make running your website much, much easier.
</p>
<h2>Extra Credit</h2>
<p>
No extra credit this week :(
</p>
<h2>Submission</h2>
<p>
Once your site is up and you've verified everything is correct, just email the link to me.
</p>
[/]
[#template.html]

22
site/introwebdev/week-3-link-style.html Normal file
View File

@@ -0,0 +1,22 @@
[!]
[=title "Linked Styles"]
[=content -]
<p>
So far our CSS has been entirely in the <code>style</code> tag.
However, this is very clunky - for larger multipage websites,
you'd have to copy/paste all the styles to all of them! There is a better way.
</p>
<p>
You can actually store all of your styles in a <code>.css</code> file (common names are <code>main.css</code>, <code>style.css</code>, etc, but you can pick whatever!)
and add them to pages with a <i>link</i> - just like a favicon. It looks like this:
</p>
<pre><code>&lt;link rel="stylesheet" href="style.css" /&gt;</code></pre>
<p>
Make sure to put it in your header, because it is metadata.
</p>
<p>
Linked stylesheets are much cleaner than <code>style</code> tags (this is called "separation of concerns")
and can be linked to multiple pages, allowing you to define a single style for the entire website.
</p>
[/]
[#template.html]

86
site/introwebdev/week-3-safety.html Normal file
View File

@@ -0,0 +1,86 @@
[!]
[=title "Week 3: Safety"]
[=content-]
<p>
Building a website is not among the more dangerous activities you can undertake.
Driving to school is actually a much bigger risk, statistically speaking!
However, there are still some things to be aware of.
</p>
<p>
Note that just posting a website <b>cannot</b> leak any information about you! The only information Github provides
to the public is your username, and Github themselves do not know anything compromising. Thus the
easiest way to stay safe is to not tempt fate! Don't put your personal information on a website. Period.
</p>
<p>
You should always operate under the assumption that anything you put online is there for good.
This applies on social media, chat apps, and also your personal website! Archives and Github version control make it
nearly impossible to permanently remove anything. Therefore you should always very carefully check
through anything you post for information that could identify you. This includes,
</p>
<ul>
<li>
E-Mail addresses: Don't put an email address on the public internet! That's just ASKING for spam, and it can
potentially make it much easier for a hacker to break into your accounts elsewhere.
</li>
<li>
Phone numbers: Same with email; spam is annoyingly automated, and a hacker could potentially use your phone number
and guess your password for an account, thereby compromising you.
</li>
<li>
Real names: In the information age it's shockingly easy to find people with their
real name. I would not recommend ever sharing it online under any circumstances.
</li>
<li>
Locations: Don't put your address or an address near you on the internet. You don't want
somebody looking through (often public!) voting and census records and finding you.
</li>
<li>
Location <i>hints</i>: This is really dangerous! It's easy to think
"it's probably fine if I post a review of [some restaurant near me]", but
that is in fact quite dangerous, especially if you live in a smaller area. A clever hacker can
use that to massively narrow down your location and pinpoint you.
There's no general rule for how far away it should be: until you're older
and more capable (and possibly hackers yourselves!) you shouldn't risk it at all.
</li>
</ul>
<p>
Some risks don't exist, and you should not put effort into worrying about them:
</p>
<ul>
<li>
Hackers can't get your IP address from your public website. What would that even <i>mean</i>? Hopefully we'll have time to cover some basic
networking in this course so you all can see how patently ridiculous most of the common concern over IP addresses is.
</li>
<li>
Hackers can't get any information you don't post. You fully control the flow of information to them.
They <i>can</i> take existing information and make further deductions based on publicly available knowledge (e.g. voting records) but
they can't create information out of thin air.
</li>
<li>
Nobody can break into your computer because you're using Github. It's a website. Websites don't do that.
</li>
<li>
Similarly nobody can break in through Git or Github Desktop - these are incredibly well-tested tools
used millions of times every day by millions of developers, and the chances of a security breach are
MUCH lower than the chances of e.g. an angry koala bear trampling all of us in class on Friday.
</li>
<li>
Your home network will not be exposed to anyone: your website will be hosted externally on Microsoft servers
(Microsoft owns Github), and will not in any way communicate back to your local network.
</li>
</ul>
<p>
It is a generally-safe rule of thumb that the only risk here is accident. In the case something
like that happens (e.x. you upload seconds before you realize you included your email address, or somesuch)
the first thing to do is immediately remove it and update again; you really don't want spam crawlers to see it.
Then you need to delete the commit containing your identifying information, and possibly send takedown requests to archives. It's a hassle,
but not an unnavigable one. Don't be afraid to ask me if you need help scrubbing personal information off the web!
</p>
<p>
<b>Warning: images and videos not necessarily safe!</b><br>
Many types of media (predominantly images) taken by phone cameras contain hidden <i>EXIF metadata</i> (like the metadata
in your site, but really annoying) often containing your location. Do not post images taken by your phone camera
unless you've used an editor like GIMP to strip out the identifying metadata. We may go over this in class.
</p>
[/]
[#template.html]