January 3, 2022
I got a teaching job! Starting in a couple weeks, I’m going to be an adjunct professor at my alma mater teaching an Intro to Web Development course.
Read the full article at https://happycoding.io/blog/intro-to-intro-to-web-dev
Read the full article at https://happycoding.io/blog/intro-to-intro-to-web-dev
Loved the post. I’m gonna recommend the text Computer Science in K-12: An A - Z handbook for teaching programming. We used it as a reference during my computer science education extension through the college of St. Scholastica & my local chapter of CSTA is currently reading it.
1 Like
Oooh thank you for the pointer, I’ll check it out!
This all just makes for a very happy Josh. STOKED, I tell you – so many reasons, most of them connected to time, space and personal history.
Great layout, solid content, tons of fun discovery for your students.
I do have a few observations that maybe would be helpful, or maybe you should just ignore since you won’t truly know what works and what doesn’t till you learn by doing.
Mostly, I wonder if a few topics might warrant more time at the expense of some of the later cool stuff. Sounds like you are already wondering on at least one of these.
- Playing with raw html elements (perhaps week 1 could be weeks 1 and 2)
- Loops and arrays (perhaps 1 week for each)
- Maybe objects – if they will be anything more than lumps of fields
Oh, and as for frameworks and tools for beginners, I still love Notepad! 
Happy Teaching Happy Coders!
1 Like
Thanks!! Yeah it all feels like a culmination of MANY things, going all the way back to high school and even before that.
I appreciate the feedback, and I agree with you. I’ll see what I can incorporate as I put together the content, and of course we’ll see what falls apart when it encounters reality.
Notepad is great! I’ve “upgraded” to Atom, but even that sometimes feels like it has too many bells and whistles. All I really want is a text editor with syntax highlighting and auto-formatting and nothing else!!
Thanks again for the feedback, I’ll keep you updated about how it goes!
1 Like
I bascially doing this exact course right now. We started out with some HTML and we’re just stepping into styling with CSS.
I did go ahead and introduce them to VSCode. I didn’t do a lot of extensions but just having Emmet completions in there is really nice. It also helped them by autocompleting src and href paths.
I’ve forked your repo and will be monitoring it closely. Excelllent stuff.
Thanks! I’d be curious to hear more about your class as well. What grade are you teaching?
Dear Kevin,
I am very happy with the realization of such a big dream for you!
I can’t give you advice, but your sincere enthusiasm tells me that you will be able to value what you do.
You will give life to everything you teach your students.
Congratulations !
1 Like
Hi Kevin, I’m a high-school teacher and I’m considering adapting your Intro-to-Web-Dev course for my students. It seems like you encourage this so I’m guessing this is OK with you. Thank You!
When I attempted to adapt it, I forked your site, modified and viewed it from my forked GitHub Pages. It doesnt seem to be rendering it properly so I must be missing something with Github and Jekyll. Any ideas as to why or any alternative suggestions? Thanks!, matt
1 Like
I’d absolutely LOVE for you to use this content in your class!
I just stalked your forked version, and I think what you’re seeing is a result of the relative paths I use in Happy Coding. For example, here’s how I might link to a particular tutorial:
<a href="/tutorials/html/html-tags">Click here to learn HTML</a>
Notice that the URL starts with a / slash, which makes it relative to the top of the domain. This works for me because I’m either deploying locally to localhost:4000, or I’m deploying live to HappyCoding.io.
But this won’t work for you, because you’re deploying to https://tuppercode.github.io/HappyCoding/ but a / URL will be relative to the top level of https://tuppercode.github.io. That’s why you’re seeing a bunch of broken images and CSS, because it’s trying to load them from the wrong place.
You might be able to fix this if you use your own domain, in the same way that I use HappyCoding.io.
But taking a step back, I’d recommend a slightly different approach. Instead of forking all of Happy Coding, I’d recommend creating a new GitHub Pages site, and then linking to specific parts of Happy Coding that you want to reference.
This approach of linking is similar to what another class does. You can view their site here:
https://www.classes.cs.uchicago.edu/archive/2022/winter/11111-1/schedule.html
Notice how they have their own site, but they link to particular pages in Happy Coding as “reading” for each class.
I personally don’t mind you forking Happy Coding’s repo, but I think it’s going to end up being more work for you than if you created a new site and then linked to the existing content instead.
Let me know if that makes sense!
That was helpful. I did find and replace to all the file references over the whole repository to prefix a “/HappyCoding” . Probably not the most elegant solution but it seemed to work OK. After some reading it looks like using the ‘baseurl’ and ‘relative_url’ filters in jekyll and Liquid?? seems to be the right approach but haven’t quite figured out how to use it. Do you have any experience with that?
As for how best to adapt and use your resources. Maybe I’m pandering but I am thinking that for many of my highschool students, less might be more. So, I am hoping to do a fair amount of cutting within individual lessons, and adding a bit too. So I maybe the forking approach works best?? Not sure.
Thanks again, You deserve much appreciation and credit for everything you do!
Am I right in thinking I should replace every file reference:
e.g.
<link rel="stylesheet" href="/assets/css/style.css">
to something like
<link rel="stylesheet" href="{{ site.baseurl }}/assets/css/style.css">
with the config file defining the baseurl to HappyCoding?
I think that sounds right, with the caveat that I think you’d have to create a baseurl property in your _config.yml file.