+Welcome to the homepage for Trailside's Spring 2026 introduction to web development course! +
++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. +
++If you ever have any questions about web development, feel free to email me at plupy44@gmail.com (bonus if you can figure out how I made that clickable...) +
++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. +
++This is a graded course! The weights are as follows: +
++If you want to know your grades, just email me - I'll also tell you your running grades after each exam. +
++Note that your grade doesn't matter too much. The real point of grading is so that 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. +
++TBD. Will post an announcement when this is worked out. +
++ 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. +
+ ++I'll be posting these in advance of lectures, so you can review the material before class. +
++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. +
+ + diff --git a/site/introwebdev/public-site-consent-form.html b/site/introwebdev/public-site-consent-form.html new file mode 100644 index 0000000..846e244 --- /dev/null +++ b/site/introwebdev/public-site-consent-form.html @@ -0,0 +1,51 @@ + + + + ++ 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. +
++ 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. +
++ 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. +
++ 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, +
+
+ If you consent to your child's participation in the public website project, please check this box.
+ If you would prefer for your child to be excluded from the public website project, please check this box.
+
+ Signature:
+ Printed name:
+ Child's name:
+
+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. +
++This homework is optional. You won't be graded on it, and there's nothing to submit. Future homeworks will not be optional. +
++ If 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"> ++
+ If your image is in Downloads, for instance, your image tag might look like <img src="Downloads/image.png">.
+
+ Be aware that this is relative to your index.html file. This means that, if your index.html file is in
+ Documents, trying to access "Downloads/image.png" will actually try to access Documents/Downloads/image.png, which usually won't exist.
+
+ 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 <img src="image.png">)
+ or use the "../" path to break out of a directory (like <img src="../Downloads/image.png">).
+
+ Remember a link looks like: +
++ <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! +
++ 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, +
+html taghead tagbody tag+ You'll have to Google these on your own - remember to write concise queries, like "<tag> 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. +
++ If you can get the web inspector working, try using it to read the source-code of this page - there are some cool basic tags in here that you can play with! +
++ 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! +
++ I'll make it 2% if you can bring in a tag I haven't heard of. +
+ + diff --git a/site/introwebdev/week-1-setup.html b/site/introwebdev/week-1-setup.html new file mode 100644 index 0000000..7cdf257 --- /dev/null +++ b/site/introwebdev/week-1-setup.html @@ -0,0 +1,64 @@ + + + + + ++ 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. +
++ Websites are the universal way we access the internet. Google, Wikipedia, and most social media are websites! +
++ What they have in common is something called HTML. 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. +
++ Luckily for us, HTML is human-readable - 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! +
++ If you aren't familiar with how to do that, don't worry - we'll cover it in class. You can also ask your favorite search engine. +
++ Make sure your file is named exactly "index.html". Some operating systems will name it "index.html.txt", and this is wrong - 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! +
++ 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 not human-readable so word processors can't edit HTML. +
++ Paste the following into Notepad and save. We'll go over what this does later. +
++<!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: +
+++Hello, World!
+
+ If it works, nicely done - that's your first website! +
+ +