Welcome to the homepage for Trailside's Spring 2026 introduction to web development course!
++If you don't have permission from your parents, get it! +
++If you don't have a github account, read through the bit on Github Pages! +
++ 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! +
+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.
@@ -58,6 +71,7 @@ I'll be posting these in advance of lectures, so you can review the material bef
diff --git a/site/introwebdev/universe.css b/site/introwebdev/universe.css index 2dbcc8c..e8429a5 100644 --- a/site/introwebdev/universe.css +++ b/site/introwebdev/universe.css @@ -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%; +} diff --git a/site/introwebdev/week-3-gh-pages.html b/site/introwebdev/week-3-gh-pages.html new file mode 100644 index 0000000..4888935 --- /dev/null +++ b/site/introwebdev/week-3-gh-pages.html @@ -0,0 +1,61 @@ +[!] +[=title "Week 3: Github Pages Intro"] +[=content-] +
+ 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 Github (a free code hosting service) + that hosts static sites: the simple HTML files we've been working with in class. +
++ Github is cool for a lot of reasons. To fully understand them, I recommend reading Pro Git (free online) + - it's the definitive resource for the software (Git) that makes Github possible. I will not require + reading Pro Git in this course, but I highly recommend it; understanding how to properly use version control + is a big step towards becoming a software wizard. +
++ The main reasons that we're 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!) +
++ If possible, you should create an account on Github before class. Go to the Github homepage and (possibly with the help of a parent) + enter your email and navigate through the signup process. It's pretty quick and easy. +
++ Make sure to pick an appropriate username! 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. +
++ Once you have access to Github, you'll have an option to create a repository. 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 public repository: 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. +
+
+ Make sure to name your repository something like your_username.github.io. For instance, if your username is
+ "WebDeveloper01765", your repository is WebDeveloper01765.github.io. It's important to be exact about this.
+
+ 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 None to main. Leave the directory at
+ / (root) , and click "Save".
+
+ 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. +
++ 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. +
+
+ You're online! If you did everything correctly, you'll actually have a public website at https://your_username.github.io/,
+ which will contain whatever you put in your index.html. We'll talk a bit about why and how this works in class.
+
+ Seriously, read Pro Git. It's a lifechangingly good book. +
+[/] +[#template.html] diff --git a/site/introwebdev/week-3-homework.html b/site/introwebdev/week-3-homework.html new file mode 100644 index 0000000..d39f8ee --- /dev/null +++ b/site/introwebdev/week-3-homework.html @@ -0,0 +1,95 @@ +[!] +[=title "Week 3 Homework"] +[=content-] ++ 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. +
++ At this point you most likely have a simple website with a single HTML page. But that's boring! + At least 3 pages on your website + 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: +
+about.html: 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).
+ contact.html: 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.
+ books.html: 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.
+ food.html: 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.
+ new.html: a little page listing significant events in your website's history.
+ sitemap.html: 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).
+ + While I will not literally be grading on creativeness, every boring website makes a baby bird sad. Have fun with it! +
+
+ 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 index.html just by clicking links.
+ At least one inter-page link on each page in your site Every page accessible by some combination of clicks
+ from index.html
+
+ While some degree of disorganized can be a design motif, a website that doesn't have any consistency at all is awful. + Go through each page and make sure each one has, +
+
+ Add some pizazz! Create a shared style.css file containing universal styles for your website (e.g. the universal font, background, etc)
+ and add it to all of your pages using a link tag. CSS file linked in properly to every page Universal background color
+
+ I will instantly zero your grade 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, tell me immediately so I can help you clean it up! +
++ Read through Pro Git. I won't require you to use git properly in this course, + but it'll make your life a lot easier if you do! +
++ Also, read about Jekyll and the Pages/Jekyll docs. + Jekyll is an awesome tool that can make running your website much, much easier. +
++ No extra credit this week :( +
++ Once your site is up and you've verified everything is correct, just email the link to me. +
+[/] +[#template.html] diff --git a/site/introwebdev/week-3-link-style.html b/site/introwebdev/week-3-link-style.html new file mode 100644 index 0000000..50a6585 --- /dev/null +++ b/site/introwebdev/week-3-link-style.html @@ -0,0 +1,22 @@ +[!] +[=title "Linked Styles"] +[=content -] +
+ So far our CSS has been entirely in the style 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.
+
+ You can actually store all of your styles in a .css file (common names are main.css, style.css, etc, but you can pick whatever!)
+ and add them to pages with a link - just like a favicon. It looks like this:
+
<link rel="stylesheet" href="style.css" />+ Make sure to put it in your header, because it is metadata. +
+
+ Linked stylesheets are much cleaner than style 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.
+
+ 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. +
++ Note that just posting a website cannot 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. +
++ 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, +
++ Some risks don't exist, and you should not put effort into worrying about them: +
++ 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! +
+
+ Warning: images and videos not necessarily safe!
+ Many types of media (predominantly images) taken by phone cameras contain hidden EXIF metadata (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.
+