Welcome to the homepage for Trailside's Spring 2026 introduction to web development course!
@@ -19,6 +16,9 @@ If you ever have any questions about web development, feel free to email me at < 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 W3Schools and Khan Academy, because they have some pretty great resources for web development. ++A rolling list of tags we've covered can be found here. +
This is a graded course! The weights are as follows: @@ -46,6 +46,7 @@ TBD. Will post an announcement when this is worked out.
@@ -53,11 +54,12 @@ I'll be posting these in advance of lectures, so you can review the material bef
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.
- - +[/] +[#template.html] diff --git a/site/introwebdev/public-site-consent-form.html b/site/introwebdev/public-site-consent-form.html index 846e244..1824216 100644 --- a/site/introwebdev/public-site-consent-form.html +++ b/site/introwebdev/public-site-consent-form.html @@ -1,17 +1,6 @@ - - - - -
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
@@ -47,5 +36,5 @@ border-bottom: 2px solid black;
Printed name:
Child's name:
+ This is a rolling list of the HTML tags we've covered in class. +
++ For more detail, check out W3Schools - they have pretty complete writeups on all of the basic tags. +
+<b> ... text ... </b>: The b tag makes the contained text look like this.<i> ... text ... </i>: The i tag makes the contained text look like this.<sup> ... text ... </sup>: The sup tag makes the contained text look like this.<h1> ... text ... </h1>: This is a heading, like:<h2> ... text ... </h2>: A subheading, like:<h3></h3>, <h4></h4>, <h5></h5>, <h6></h6>: Smaller and smaller headings. Using these is pretty goofy.<br />: A line break! Used to make<a href="https://example.com/"> Clickable Text </a>: A clickable link! Any URL works. The result looks like Clickable Text.<img src="image.png" /> An image.<p> ... content ... </p>: A block-level paragraph, used to organize text.<tag_namehref, src, etc): <tag_name thingy="something" otherthingy="something else"/>, signifying that they end immediately.><tag_name thingy="something" otherthingy="something else"> Content "inside" the tag</tag_name>
+So the two ways an HTML tag can look are:
+(without content) <tag_name thingy="something" otherthingy="something else" />
+(with content) <tag_name thingy="something" otherthingy="something else"> ... content ... </tag_name>
+Memorize these patterns! They are pretty important!
+
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.
@@ -16,9 +11,7 @@ This homework is optional. You won't be graded on it, and there's nothing to subIf you didn't get an image working, try to do that! Remember the image tag has peculiar behavior, and looks like this:
-- <img src="/path/to/image.extension"> -+
<img src="/path/to/image.extension">
If your image is in Downloads, for instance, your image tag might look like <img src="Downloads/image.png">.
Remember a link looks like:
-- <a href="https://example.com/">Link Text</a> -+
<a href="https://example.com/">Link Text</a>Links are pretty cool - for instance, you can actually put most tags inside them. Try making a website with a clickable image!
@@ -64,5 +55,5 @@ This homework is optional. You won't be graded on it, and there's nothing to subI'll make it 2% if you can bring in a tag I haven't heard of.
- - +[/] +[#template.html] diff --git a/site/introwebdev/week-1-setup.html b/site/introwebdev/week-1-setup.html index 7cdf257..0907adb 100644 --- a/site/introwebdev/week-1-setup.html +++ b/site/introwebdev/week-1-setup.html @@ -1,20 +1,6 @@ - - - - - -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.
@@ -47,10 +33,9 @@ blockquote {Paste the following into Notepad and save. We'll go over what this does later.
--<!DOCTYPE html> ++<!DOCTYPE html> <h1>Hello, World!</h1> -
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:
@@ -60,5 +45,5 @@ blockquote {If it works, nicely done - that's your first website!
- - +[/] +[#template.html] diff --git a/site/introwebdev/week-2-doctypes.html b/site/introwebdev/week-2-doctypes.html new file mode 100644 index 0000000..e27a7d5 --- /dev/null +++ b/site/introwebdev/week-2-doctypes.html @@ -0,0 +1,35 @@ +[!] +[=title "Week 2: Doctypes"] +[=content-] ++This is only a part of week 2 - make sure to read through all of the companion pieces! +
++So far we've been doing HTML pretty minimally: we just open a text file, write some tags, save, and reload. +This is all well and good, but there's a subtlety: when you just enter html immediately, the browser +has no idea what you're doing. Browsers are pretty smart, so it guesses (by the filename, +and by the presence of tags) that it's HTML, but the browser also guesses that you aren't really using +HTML properly, and so some features are broken! +
++This situation is known as quirks mode. It's actually mostly fine - most of the features that it breaks are pretty obscure - +but to maintain full compatibility and avoid weird bugs, we should always declare an HTML5 doctype. In fact this is very easy. Just include the following +tag at the top of all of your html files: +
<!DOCTYPE html>+ This will put your page into standards mode, ensuring correct HTML5 non-quirks behavior. + Do not include any text on the same line, so your files should look like +
+<!DOCTYPE html>
+<h1>Header!</h1>+Instead of +
+<!DOCTYPE html><h1>Header!</h1>
++ I will not accept any homeworks that don't have a correct doctype. Make sure to memorize the pattern! +
+[/] +[#template.html] diff --git a/site/introwebdev/week-2-homework.html b/site/introwebdev/week-2-homework.html new file mode 100644 index 0000000..6a886b5 --- /dev/null +++ b/site/introwebdev/week-2-homework.html @@ -0,0 +1,113 @@ +[!] +[=title "Week 2 Homework"] +[=content-] ++This homework will be done entirely as a single website file. Make sure that, +
+ /> notation for tags that don't take content, and the closing tags (</tag_name>) for tags that do.property="content" format - you always need the =, you always need the double quotes, you always need the space after the tag name.+Your grade will be the percentage of completed goals. Goals are highlighted like this: Catch a bunny wabbit! +
++Create a week-2-homework.html (not "index.html" this time!) and set it up in your web browser and text editor. Make sure you remember where it is so you can email the file to me at the end. +
++Set up a correct HTML file with doctype, html, head, body, etc. Add a title - make it something clear that contains your name, like "Albert's Week 2 Homework". +HTML file with the correct standard layout +
++Add a heading (h1) to the body of the page, and make it display the same thing as the title. Correct heading +
++Create a subheading (h2) named "Lorem" (or something like that) at the bottom of your page body. Correct subheading +
++Read up on the Lorem Ipsum and generate some lorem ipsum text! +You don't have to use the boring default - there are a whole bunch of fun ones on the internet. A good list is here. +Paste the lorem ipsum into a new paragraph - use the p tag correctly. Paragraph with Lorem Ipsum text +
++Now add some emphasis! Add another paragraph of lorem, and use the b and i tags to emphasize specific words. Make sure there are a few words each in, +
++No style should take up more than a few words and most of the words should be normal. Styled lipsum with all 4 styles used correctly +
++Use the web inspector to find the comment located in this section. It contains the rest of the instructions. + +
+
+Copy the following HTML into your project, and find and fix the problems with it. These fixes will include syntax (spelling the code correctly),
+semantics (using each tag's closing and properties right), and appropriateness (using the right tags for the job). Include comments briefly explaining each change you made.
+The HTML is correctly formed (correct patterns for tags, properties, etc)
+Each tag is closed properly
+Each tag has the right properties
+Tags are semantically correct for their content
+
<DOCTYPE website>
+
+<head>
+ <html>
+ >title< Web Page >/title<
+ </html>
+ <body></body>
+ <h1> Web Page </h1>
+ <p>
+ <img source=cute-cat.jpg></img>
+ <b>Bold Text!</b> <br />
+ <i Italic Text! /i>
+ <p>
+</head>
++ This is the more free-form part of the assignment. + Design a small, simple homepage for anything you want - you could pick for example your favorite movies, video games, animals, etc. + Get creative with it! +
++ Make sure to use at least one link to another website, at least one image, several paragraphs with italic and bold text, and several headings of different sizes. +
+
+ At least one link
+ At least one image
+ Several paragraphs with the typical text-styling elements
+
+ There are bonus points amounting to 3% added to this assignment's grade broken up like so: +
++ To submit your homework (no later than 2026-1-21), upload the HTML file as an email attachment and send it to plupy44@gmail.com. Include your name in the subject line. +
+
+ For the self-study section, learn about the <style> tag - we'll be starting more advanced styling soon.
+
+We've covered a bunch of basic tags - tags that just show some text or an image. +These are fun and useful, but there's a whole world of much fancier stuff out there, and to access it we need to start thinking about document structure. +
+
+Immediately after the DOCTYPE (read this if you don't know what that is), almost every serious HTML page begins with the
+<html> tag. This is not technically required, but it's necessary to write clear code.
+It's also useful for some more advanced trickery that we most likely won't cover in this course. The tag works exactly how you think: you open with
+<html>, and you close with </html>. Your entire website goes inside it (minus the DOCTYPE - the DOCTYPE is always above everything else, including
+the <html> tag).
+
+Inside the <html> tag, you have two main sub-sections: <head> and <body>.
+
+The header, contained within the <head> tag, contains all of your metadata - this is information describing your
+page, that isn't actually part of the page content. For instance, if you want your tab to have a title, you use the <title> tag inside the <head>.
+
+You should only ever put invisible metadata in the header; don't put content there. You technically don't have to have a <head>, but it's a good practice.
+
+The body, contained within the <body> tag, contains all of your actual content that shows up in the page. You can put all the normal tags in it,
+and use them exactly as you would without all this fancy stuff!
+
+An example of a bare-minimum working page is thus: +
+<!DOCTYPE html>
+
+<html>
+ <head>
+ <!-- metadata goes here! -->
+ </head>
+ <body>
+ <h1>Actual content goes here!</h1>
+ </body>
+</html>
++This is a lot more complicated than what we've done so far! With practice writing all this out will become muscle memory; I won't expect you to have it memorized immediately. +
+[/] +[#template.html] diff --git a/site/introwebdev/week-2-metadata.html b/site/introwebdev/week-2-metadata.html new file mode 100644 index 0000000..6b901d7 --- /dev/null +++ b/site/introwebdev/week-2-metadata.html @@ -0,0 +1,63 @@ +[!] +[=title "Week 2: Metadata"] +[=content-] + ++ Metadata is all the information people don't see in the page. In our previous pages there wasn't very much of it; + we're going to change that! +
+
+ The simplest type of metadata is the page title. This is set with the <title> tag (inside your header - read this if you aren't sure what that is).
+ It doesn't show up inside the page, but it shows up on search engines and in the web browser's top bar.
+
+ You can set a simple title like so: +
+<head>
+ <title>This Is My Page Title!</title>
+</head>
++ Try it - you'll see it changes the name of the tab! Titles are very useful and necessary - a raw path is a really ugly name for a webpage. +
+
+ Perhaps the most dubiously-named tag in HTML is the <link> tag.
+ It always goes inside a <head>, and does not have content.
+
+ <link> always looks like this:
+
<link rel="something" href="something" />+ The "rel" property defines what this link means, and the "href" property defines the file we're linking. +
+
+ This does not create an anchor like the <a> tag - it is purely metadata. It's used to import styles (we'll cover these later)
+ and favicons. Favicons are the little image next to the name of each tab. Let's import a favicon:
+
<link rel="icon" href="favicon.png" />+ This literally means "use favicon.png as the icon for this site". Note that "favicon.png" is not a magic name - you can use any image file, + as long as it's a ".png" or a ".ico". Other formats might not be supported. +
++ Another type of hidden information is a comment. This is some text that html completely ignores. It's only there for human developers to read + - or for scripts to process! You write comments sorta like a normal HTML tag: +
+<!-- This is a comment! -->+ + Note the normal tag less than and greater than signs, the exclamation mark (indicating a special tag - note that DOCTYPE is much the same way!), and the two dashes before and after. + These must all be exact! If you do it wrong, your comment text will be rendered as normal text, which can be quite embarrassing. + + +
++ Comments are not generally considered metadata - they're information hidden from the user, but they don't actually + do anything. Use comments to explain to other developers what your code does. +
+[/] +[#template.html] diff --git a/site/introwebdev/week-2-web-inspect.html b/site/introwebdev/week-2-web-inspect.html new file mode 100644 index 0000000..749937f --- /dev/null +++ b/site/introwebdev/week-2-web-inspect.html @@ -0,0 +1,22 @@ +[!] +[=title "Week 2: Web Inspector"] +[=content-] ++ The Web Inspector is a cool little tool to analyze websites! +
++ Click Ctrl+Shift+I, and a bottom panel (or side panel on Chrome) will open. This panel contains + the entire webpage HTML (editable!), and some other fancy stuff. + We won't worry about the fancy stuff for a bit. +
++ Get in the habit of using the web inspector to debug your projects! + It's usually the best first step - oftentimes, the web inspector will + catch mistakes much quicker than manually reading through your code. +
++ Note that the web inspector often folds up tags to reduce clutter- + you can unfold them by clicking the triangles. +
+[/] +[#template.html]