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

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

Browse Source
This commit is contained in:
Tyler Clarke
2026-01-11 20:26:27 -05:00
parent 9ca745114f
commit 58f6593887
4 changed files with 246 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

63
site/introwebdev/index.html Normal file
View File

@@ -0,0 +1,63 @@
<!DOCTYPE html>
<html>
<head>
<title>Intro Webdev</title>
</head>
<body>
<h1>Introduction to Web Development</h1>
<p>
Welcome to the homepage for Trailside's Spring 2026 introduction to web development course!
</p>
<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.
</p>
<p>
If you ever have any questions about web development, feel free to email me at <a href="mailto:plupy44@gmail.com">plupy44@gmail.com</a> (bonus if you can figure out how I made that clickable...)
</p>
<p>
Some parts of this course are intended to be self-study - you can always ask me for help about these, of course, but I recommend first checking out <a href="https://www.w3schools.com/">W3Schools</a>
and <a href="https://www.khanacademy.org/">Khan Academy</a>, because they have some pretty great resources for web development.
</p>
<h2>Grading</h2>
<p>
This is a graded course! The weights are as follows:
</p>
<ul>
<li>Homeworks (14 I think - maybe 13?) - 35% total</li>
<li>Exams (2) - 50% total</li>
<li>Participation Activities - 15% total (this will be pop quizzes and such)</li>
</ul>
<p>
If you want to know your grades, just email me - I'll also tell you your running grades after each exam.
</p>
<p>
Note that your grade doesn't matter too much. The real point of grading is so that <i>I</i> know how well you're doing - you shouldn't really
assign much personal weight to the grades you get; they won't be on any permanent transcripts or anything.
</p>
<h2>Course Schedule</h2>
<p>
TBD. Will post an announcement when this is worked out.
</p>
<h2>Homework</h2>
<p>
Homework will drop every week on the Wednesday before class, and be due the following Wednesday. Your homework submissions will be entirely
in website form - you'll be emailing me your HTML files.
</p>
<ul>
<li><a href="week-1-homework.html">Week 1 Homework (short, no submission)</a></li>
</ul>
<h2>Lecture notes</h2>
<p>
I'll be posting these in advance of lectures, so you can review the material before class.
</p>
<ul>
<li>Week 1: <a href="week-1-setup.html">Getting Set Up</a></li>
</ul>
<h2>Generative AI policy</h2>
<p>
Don't use AI to do your assignments. You're here to learn web development, not to learn AI prompting. I will assign a 0 grade to any assignment
that I suspect was written by AI.
</p>
</body>
</html>

51
site/introwebdev/public-site-consent-form.html Normal file
View File

@@ -0,0 +1,51 @@
<!DOCTYPE html>
<html>
<head>
<style>
span.under {
display: inline-block;
width: 20ch;
border-bottom: 2px solid black;
}
</style>
<title>Public Website Consent Form</title>
</head>
<body>
<h1>Parental Consent Form</h1>
<p>
As part of their course in introductory web development at Trailside, your child may be given the opportunity to
create and maintain a public-facing website through GitHub Pages (a reputable free hosting provider). This gives them
the ability to use their newly-learned skills in a creative open format.
</p>
<p>
The point of the exercise is to practice an important facet of web development (web deployment). However, beyond this course,
there are many uses for a personal website - for practice, as a writing desk or a blog, as an online art gallery,
for publishing class notes, etc.
</p>
<p>
The main concern with managing a personal website is the same as any other activity on the internet -
anyone will be able to view it, so accidentally or unknowingly posting sensitive information (real names, phone numbers, home addresses, etc)
could be harmful. In the course we'll go over how to maintain anonymity and manage web sites safely and responsibly.
</p>
<p>
There are some potential misconceptions about other risks involved with creating and maintaining a public website. Rest assured that, should your child create a public website,
</p>
<ul>
<li>It will NOT require a credit card or any payment - designing and hosting the website will be completely free using techniques learned in this course.</li>
<li>It will NOT inherently expose sensitive private information (IP addresses, physical locations, etc) to other people.</li>
<li>It will NOT expose you or your child to hacking or computer viruses.</li>
<li>It will NOT expose your child to harmful or inappropriate material elsewhere on the Internet.</li>
<li>Other people will NOT be able to contact your child through the website.</li>
<li>It will NOT be stored on any permanent records tied to your child's identity.</li>
</ul>
<p>
<input type="checkbox" />If you consent to your child's participation in the public website project, please check this box.<br><br>
<input type="checkbox" />If you would prefer for your child to be excluded from the public website project, please check this box.
</p>
<p>
Signature: <span class="under"></span><br><br>
Printed name: <span class="under"></span><br><br>
Child's name: <span class="under"></span>
</p>
</body>
</html>

68
site/introwebdev/week-1-homework.html Normal file
View File

@@ -0,0 +1,68 @@
<!DOCTYPE html>
<html>
<head>
<title>Week 1 Homework</title>
</head>
<body>
<a href="index.html">Back to home</a>
<h1>Week 1 Homework</h1>
<p>
I didn't actually expect to get as far as we did in the first week, so homework is pretty short and spur-of-the-moment. Later homeworks will be much longer.
</p>
<p>
This homework is optional. You won't be graded on it, and there's nothing to submit. Future homeworks will <i>not</i> be optional.
</p>
<h2>Part 1</h2>
<p>
If you didn't get an image working, try to do that! Remember the image tag has peculiar behavior, and looks like this:
</p>
<pre>
&lt;img src="/path/to/image.extension"&gt;
</pre>
<p>
If your image is in <b>Downloads</b>, for instance, your image tag might look like <code>&lt;img src="Downloads/image.png"&gt;</code>.
</p>
<p>
Be aware that this is <i>relative</i> to your <code>index.html</code> file. This means that, if your <code>index.html</code> file is in
<b>Documents</b>, trying to access "Downloads/image.png" will actually try to access <i>Documents/Downloads/image.png</i>, which usually won't exist.
</p>
<p>
To fix this, either make sure your image and your index.html are in the same directory (e.g. one of Downloads, Documents, etc) and don't use a directory name (like <code>&lt;img src="image.png"&gt;</code>)
or use the "../" path to <i>break out</i> of a directory (like <code>&lt;img src="../Downloads/image.png"&gt;</code>).
</p>
<h2>Part 2</h2>
<p>
Remember a link looks like:
</p>
<pre>
&lt;a href="https://example.com/"&gt;Link Text&lt;/a&gt;
</pre>
<p>
Links are pretty cool - for instance, you can actually put most tags inside them. Try making a website with a clickable image!
</p>
<h2>Self-Study</h3>
<p>
We're going to be introducing some more advanced tags and techniques in class on Friday. Get a head start by learning on your own about,
</p>
<ul>
<li>The <code>html</code> tag</li>
<li>The <code>head</code> tag</li>
<li>The <code>body</code> tag</li>
<li>The Web Inspector</li>
</ul>
<p>
You'll have to Google these on your own - remember to write concise queries, like "&lt;tag&gt; in HTML" or "how to use [some tool]".
And don't worry if you don't find anything; we'll go over it in class.
</p>
<p>
If you can get the web inspector working, try using it to read the source-code of <i>this page</i> - there are some cool basic tags in here that you can play with!
</p>
<h2>Bonus Points</h2>
<p>
I will give you bonus points (0.5% to your final grade) if you bring in an HTML tag you learned on your own and a quick demonstration of how it works on Friday!
</p>
<p>
I'll make it 2% if you can bring in a tag <i>I haven't heard of</i>.
</p>
</body>
</html>

64
site/introwebdev/week-1-setup.html Normal file
View File

@@ -0,0 +1,64 @@
<!DOCTYPE html>
<html>
<head>
<style>
blockquote {
border-left: 3px solid grey;
padding-left: 2em;
margin-left: 0px;
}
</style>
<title>Week 1: Getting Set Up</title>
</head>
<body>
<p>
<a href="index.html">Back To Homepage</a>
<h1>Week 1: Getting Set Up</h1>
<p>
Welcome to intro webdev! Today we're going to get our computers set up for web development, cover basic file management and text editing, and make a Hello World project.
</p>
<h2>What is a website?</h2>
<p>
Websites are the universal way we access the internet. Google, Wikipedia, and most social media are websites!
</p>
<p>
What they have in common is something called <i>HTML</i>. HTML stands for "HyperText Markup Language" - it's just a set of rules for how a website should be displayed. When you visit a website,
a remote server takes an appropriate HTML file and sends it to your browser. Browsers know how to read HTML, so they can display the formatted contents instead
of just showing you lines of computer code.
</p>
<h2>Creating a website</h2>
<p>
Luckily for us, HTML is <i>human-readable</i> - humans and computers can both understand it, and you don't need fancy tools to write it.
Because all websites are just HTML files, and HTML is human-readable, we can create a website as easily as creating a new file!
</p>
<p>
If you aren't familiar with how to do <i>that</i>, don't worry - we'll cover it in class. You can also ask your favorite search engine.
</p>
<p>
Make sure your file is named exactly "index.html". Some operating systems will name it "index.html.txt", and this is <b>wrong</b> - your browser
won't read it properly. It's okay if you create a text file at first - ".txt" files are human-readable too, so you won't need to do anything special
to change it to "index.html". You may need to enable "show file extensions" to view and change it. Get in the habit of being precise about filenames!
</p>
<p>
Once you've got an "index.html" file created, you can write some actual HTML! Open it in your favorite text editor - Notepad will work fine.
Don't open it in a word processor; word processor files are <i>not</i> human-readable so word processors can't edit HTML.
</p>
<p>
Paste the following into Notepad and save. We'll go over what this does later.
</p>
<pre>
&lt;!DOCTYPE html&gt;
&lt;h1&gt;Hello, World!&lt;/h1&gt;
</pre>
<p>
Finally, open index.html in your web browser - right clicking it in File Explorer, selecting "open with...", and clicking your web browser should work fine. You'll see something like this:
</p>
<blockquote>
<h1>Hello, World!</h1>
</blockquote>
<p>
If it works, nicely done - that's your first website!
</p>
</head>
</html>