Getting Started Teaching Web Design and Development

[Music] Hello and welcome everyone. Thank you for being here today. We're so excited that you're here to learn about teaching web de design and development. And we'll just wait as we have folks joining here and I've got to promote a few codes folks so they can join us on screen and help answer questions. We've got a whole crew of codes folks here for you today and also our teacher trainer Jack Hassler and we are so excited to be here with you today. like I said as we learn about the codes platform and specifically about our web design and development course.
So just a couple housekeeping things as we get started here. If you would like to access this slide deck, we can put that link in the chat for you here. And the chat is open for you. So if you'd like to say hi, please feel free. and like I said, you are welcome to follow along with Jack's screen share here. also reference that slide deck if you are looking for additional information or want to pause somewhere or just revisit it after the session. All right, so my name is Stephanie Bennett and I am based in Indianapolis, Indiana. I have been a professional professional development specialist with KodHS for a year now.
but before that I was a classroom teacher for 11 years and wrote computer science curriculum for four years before moving into the PD space.
And I love being in the PD space. I love being here with this great group of teachers and educators from all over the United all over the United States it looks like. and sometimes we even get some international visitors to our webinars. So, thank you all for introducing yourselves in the chat. And today we are going to be hearing from a teacher who has used this course in his classroom and used codes for a couple years now I believe. So, I will let Jack introduce himself.
Hi everyone. yeah, I'm Jack Hassler.
I've been teaching with codes for about 5 years, although I've only taught this course once or twice. though I've pulled modules from it for other reasons as well. so yeah, teaching computer science and statistics now for five years. mostly at a small boys boarding school outside of Philadelphia.
Thanks, Jack. If you'll move forward to our agenda slide. So, today we're going to get an overview of this web design and development course. Jack will walk you through one of the lessons just to give you a feel for the student experience on the codes side. We'll also talk about the codes.me pages which are a really cool feature that are open to anybody, any teacher and student with a code account in order to publish your own website. And so that's a really great feature to have in conjunction with this web design and development course. We'll also talk about how you can customize the content of your codes courses. we'll be talking about a few pro and a few free teacher tools on the platform and then Jack is going to share a lot about just tips how to most successfully teach this course. If you'll go to the next slide, please.
So, I've opened up the chat for you and I'm happy to have you all put comments in the chat to share ideas in the chat. But if you have a question, I would ask that you use the Q&A at the bottom of your screen to ask questions. And that's because if the chat's really active, which I hope it is, I hope you're sharing stories. I hope you're sharing tips and tricks along with Jack. I hope the chat is very active, but if it is, then your question might get lost in the chat. So, please feel free if you have a question to drop it in the Q&A and you might go ahead and open up that Q&A now and you will be able to see not only the questions that you ask, but also the questions that are asked by others and the responses and that way nobody's question will get left behind.
Jack, remind me. Are you okay if I pause you and interrupt if folks have questions that would be helpful for the whole group to surface? Yeah, please do.
All right, awesome. Then if you will move on to the next slide. If you are not familiar with CodeHS and you do not have an account, I would love for you to take a second and set up a teacher account. This will provide you with access to our curriculum, which is free.
Our middle school and high school curriculum is always free. Teacher accounts are free and your students access is free, but you got to sign up for an account first. And that will get you access to our hundreds of computer science courses that we offer. And also a lot of the features that Jack's going to talk to you today about like the codes.mme option. You also have a sandbox IDE available to you. all kinds of great features alongside our curriculum offerings. So, while you're signing up for your account or logging in to your account so you can follow along with Jack, I'm going to talk to you about what CodeHS is if you are unfamiliar.
So, Jack, if you'll go to the next slide, please. CodeHS is a comprehensive platform for teaching computer science in elementary school. Yep, that's right.
You heard right. We do have elementary also middle school and high school and we are totally web- based which is great. That means that we work on all kinds of devices and machines. And so no matter really what kind of computer setup you have, whether it's desktops in a computer lab, whether it's mobile devices even, whether it's tablets or Chromebooks, as long as you have access to the internet, you have access to code HS. We also offer professional development, which of course you know because you are here today. And we not only offer all these great web-based curriculum and IDE and coding space for your students, but we also offer teacher tools and resources. And Jack, if you'll go to the next slide. some of those teacher tools and resources include LMS features that you're probably very familiar with. so if you have ever built your own course before, if you have ever messaged students on a platform before, we have all of those features and tools, that you're familiar with from other LMS built into the codes platform. And so you will find feedback options. You will find autograders for student work. You will find in our prolicens that you have access to academic integrity tools and grade books and even more in-depth progress monitoring for your students.
And so all of this, like I said, available on our web-based platform. No additional downloads or plugins needed. So with that said, I hope that you have had time to sign up for your CodeHS account. Thank you, Danielle, for getting that into the chat for everybody. I hope you have had time to open up that Q&A so you can keep track of your questions and other folks questions and I'm going to hand it over to Jack.
Awesome. Thank you, Stephanie. and I should say code HS is so comprehensive that the first two years I was teaching with it, I had a Google classroom set up because everyone always has a Google classroom and I had one for all of my courses prior to using code HS. And then it eventually re dawned on me that everything I was doing in Google Classroom was just redundant in terms of just sort of posting everything for my students. I found myself just putting a link into every every lesson that we were going through. And so more recently I just did away with the Google classroom al together. and it is a lot more streamlined to just say all right we're all in code HS don't even need to jump back and forth. Awesome. So yeah this is the web design and development course overview. It is designed to be the course is designed to be a full year long. I have typically taught it as a trimester, which means that I've pulled out the most important pieces of it and maybe skipped over some of the more advanced assignments, advanced exercises, and, projects. So, it can work as a trimester long course.
There are also standalone, component courses that you can pull from if you want to teach it as a sort of quarter or trimester long class as well.
in the course, it goes through HTML, which is sort of the basic building blocks of how a website works, as well as CSS, styling, which is the way you take HTML and make it look like it wasn't just from the '9s. and then it goes into using JavaScript and plugging that into your CSS as well.
so this is the the the breakdown of the course. I think it's what, u, 11 modules culminating in that final project. and the computer science careers module. the the course is a really nice overview for students because it starts them off with HTML which they can immediately start applying to be basically build a full web page and then shows them how to do it in a more quick and efficient way.
The one thing I would note is you do sort of jump into JavaScript in the deep end when you get to that introduction to JavaScript and HTML. and the course works really well for both students that have a background in computer science and JavaScript, but also for those that don't. But I would say if you are teaching to students that typically don't have that background in JavaScript or in computer science more general, you want to make sure you build in some time at the beginning of that module either to go very slowly through those first assignments or to drop in a module from the introduction to computer science with JavaScript course so that you can give students more of a background in JavaScript before you really throw them in the deep end there.
a lot of codes courses are also starting to come with these supplemental modules. and what's cool about CodeHS, I'll show you how to do it in a moment. You can go ahead and add any module from any course to any other course, but these are the recommended ones that come along with the particular course. and so you can add them in.
This is really helpful because while this basic course might work really well in general for most schools, everybody's school year looks a little bit different. Some schools are a little bit shorter, a little bit longer depending on the school you're at. Maybe you're teaching this as an elective that only meets twice a week. Maybe it's a core class that you're working with students pretty much every day. so depending on how much time you have with the students, you might find yourself needing to fill a little bit of extra room. And so you can always add in either these supplemental modules or if you want to add in other modules as well, you can. when I've taught sort of the year-long intro to computer science course, I typically have found that I end a little bit early. So, usually I work I I send out a survey and usually about March and I say, "Look, we're going to have four weeks or five weeks at the end of the year. What is something that you want to dive into in more detail?" And I might pull a module from web design and development or a module from cyber security or something like that to continue working on with my students.
So, all of the modules are broken down into lessons. And it really varies from sort of one lesson, usually more than one lesson, but, you know, two or three lessons all the way up to maybe like 20 lessons. if you I'll jump over to my demo course for a second. So, here I've got a demo course set up. I don't have any students in it sadly, but I can still look at all the assignments.
and then if you look down at all of these assign, right? These are all the modules that I just walked through on the slide and you can look and say, okay, so this one has 11 different lessons. The last one is always sort of a quiz that just has a nice usually, you know, 15 to 25 question pop not pop, but multiple choice quiz for the students that ends with their badge for the lesson. but each of these lessons has a whole bunch of stuff within it. And it's usually broken down into videos, check quick quiz exercises and examples. And you can use these in a whole bunch of different ways. If you're familiar with code HS, you know that you can just sort of assign something for homework or use it in class. You can go back and do the same thing over again if you need to with the students. And sometimes you might assign an exercise as an individual exercise or you might put students in small groups or you might put it up on the board and go through it with them. but there's a lot of different ways in which you can use the material in each of these parts of the course. And so this is how it's going to look on the teacher side. So over here this is the teacher view. And on the teacher view you can go ahead and say assign it. if you are on CodeHS Pro, you can view it as the student would view it. And then there's some settings information. If you go into the settings information, there are some things you can only do if you have Pro, which I do not. but if you, no matter what, you can change up a little bit about sort of exactly what it looks like to the student and where it is. You can always rearrange things if you need to by just sort of grabbing and dragging or I'm sorry, grabbing and then moving up or down. and you can change the order that students see it in if you want. You can add your own lessons in here. You can add your own examples, your own exercises for students to work on as well. so the lesson format is great. I've sort of already went through this but students can work on everything individually. I have had students that worked with me on more of like an independent study basis. and they've gone through a course just step by step on their own, letting me know when they hit errors that they can't get around or issues. but you can also do it with really big classes if you need to of 30 or more students. hopefully nobody's classes are getting that that much bigger than that, but you can do it with bigger classes, class sizes as well. and just sort of have individual students working through on their own and then coming together for discussions around a video or discussions around an example. Awesome. there especially for web design and development there are two different types of code that you can see. There's the code view and the block view. the block view allows students to sort of drag and drop blocks in that has the basic code that they might add a little bit to, whereas the code view is the more traditional way of coding. What I like to do with my students, especially if it's a younger class or or beginner class, is start off with that block view. It removes a lot of the trepidation and concern that a student might have around just sort of seeing this wall of code and saying, "I don't know how any of that works." and then depending on the particular class and their comfort level, we'll start transitioning more into code view as the year goes on. one thing I will note is if you don't see Oh, and you can always see the student view. when you switch to student view, this is what it'll look like for them. and I'll go into it in a little bit more detail, but what's nice about it is both you and the student get to see all of the videos, all of the quizzes, exercise examples, exercises, and then whenever there's a badge or free response or something like that added in as well.
and they'll start gray, which means that the student has not opened it, they have not tried it. if they say, "I spent 30 minutes on this last night," and it's gray, that means they did not in all probability. and then once they start working on it, it'll switch to yellow to designate to everyone that it's in progress. And then when they're ready to submit it, they submit it in green. And then whether you're on pro or not, you can always give them feedback and resubmit it and, you know, send it back to them, at which point it gets marked in pink. And then finally, right, if they resubmit that, it'll be marked in magenta. And you can do that as many times as you need until eventually you as the teacher want to mark it as finalized. and so this is a really nice way that you can go ahead and give feedback to students on their assignments. you know, push them to go a little bit farther. Sometimes, especially when we're looking at code, if they aren't adding a lot of comments, I'll say, "Hey, your code works. You've got the right idea, but I want to see more comments in your code. I want to see you explaining to another coder exactly how this is working. that can also be really helpful if you think that a student isn't being completely honest about how they're generating their code.
if you say like I really want to see your comments, I want to see your voice here. that can force them to stop.
And if they are using a friend or chat GPT to generate lines of code, it can stop and force them to really explain what they're doing for you. Hey Jack, while you're there in the student view, would you mind opening an exercise and kind of walking us through the student IDE? Yeah, absolutely. so if you were to go through a lesson, you'd have all the different pieces broken out, the video, which pops up just like a regular YouTube video, and you can do everything with it that you can't do for a regular YouTube video, including drop it into Edpuzzle and other programs like that. then you see the quiz and I'll just start there. And the quiz allows you to go ahead and say, well, what you know, structure of an HTML page quiz. Which of the following is an example of metadata?
well, the title of a web page is an example of web metadata. You check it and I think that animation is actually new. I haven't haven't seen that before.
but yeah, then if you get it right, you get a little correct. you hit submit and then down at the bottom here you see the full progression for not just the lesson but the whole module that you're in as well. And so you get to the examples. I really like the examples because it allows students a very quick in to how everything works.
and if they're stuck, you can always say, "Well, let's go back to the example and look through how the example worked and maybe even copy over pieces from our example into our exercises." and this is in the the block view, but you could switch back to the code view very easily at the top there. and the other thing I'll do with examples is make it a very collaborative experience.
introduce students to code review and code editing by having throwing it up on my projector and having students walk up and walk through the code for everybody else and explain this is a head tag. This means that it's coming at the the metadata, the head of the website, and you won't see it exactly on the page, but you'll get the title and all that information. And then you get the body of the web page and all of the content that goes in there.
But eventually, you do get to the exercises. and what I love about CODHS is it does have a very graduated experience for each set of exercises. Usually there's two, three or four exercises. They start out super super basic. And so the student is going to see an exercise pop up like this. And it is rare that they will start with a blank page. They get something to get going with. and then if they hit the assignment tab over here, they'll be told exactly what to do. So in this case, in this exercise, they're getting practice with the title tag. They're given an HTML code display that displays Carol's web page, but there's no title sadly for it. and so what they're asked to do is go ahead and add a title tag. And so they would go ahead if they're in the block view and drag that title tag on over and then inside that title type something like Carol's web page. and then they can go ahead and run their code. And when they run their code they get to see it like that pop on up. And then you can also see it in a new window if you want to. And the reason that this is really important for this particular course is if you just run it here, you won't necessarily see the title of the web page, but here it has come up in fact as Carol's web page in my tab. and they can also do test cases. The one thing I would note is the students are going to really focus on test cases. They really want to get ah I didn't do it right. ah, and my title should have said all about Carol, but they're going to really want to get those check marks. and that's absolutely a good good approach, but this is very much computer graded work.
And so, you know, you I'd say nine times out of 10, the code HS checks do it exactly right. but sometimes students can manage to get the wrong answer and get a lot of the check marks in. so what I always tell my students is all right, you're not getting the check marks. Don't hyperfixate. Don't focus just on that one X that you have. Run your code, right? Does this look like we're expecting it to? because it is possible to even get some errors in there and some some mistakes in there and still get a number of check marks on your work. so I really focus I really encourage my students run your code first, make sure it looks good, then jump to the test cases, check your code, and then you can move on. Once they're ready to submit it, they hit submit and continue. it will pop up and say, "Oh, you didn't do everything right. You can they can continue anyway." But if I see that as submitted work, the first thing I want to say is, "Let's go back. let's try to get that all done. so they've got the assignment, they've got the test cases, they've got the ability to run their code. they will not have the grade tab, but you will, and you'll be able to, whether you're on pro or not, you'll be able to provide feedback, provide a basic grade, and then mark it as either full credit, finalized, needs work, or you can give a zero if you feel the need to do that. And then, all of the, history for the grade gets dropped down here. So, if you do want to go back and forth a number of times with a student and say, "Revise it again, revise it again, revise it again," you can continue to do that. And then there's a whole bunch more. I'll get into the history in a bit when we talk about academic integrity. but there's a solution there for you.
You can print the exercise out if you need to download the exercise. There's a whole bunch of stuff that you can do.
Both you and the student also have access to the docs, which is sort of a a curated documentation section for the course. which is nice because no matter what when you're in the course the the documentation tab is going to look the same for them and they can start digging into that. Awesome. So I've gone through some of these slides but the lesson components as I said have videos, quizzes, examples and exercises. They also increasingly are having sort of notes, free responses, articles, extra videos to read that are not that are relevant but not created by codes. tutorials and that they're adding simulations. So, there's a whole bunch more stuff being added in. the web design and development course really does focus on these core, you know, videos, quizzes, examples, and exercises, and a few free responses. but other courses dive much much more into the articles that they can read.
If you do, for example, the cyber security course, there's a lot less code and a lot more of that type of thing.
and then if you are on the pro I think I've got that coming up in a second, but if you're on the pro codes, you do get a full lesson plan which comes with discussion questions and teaching and learning strategies. If your school has asked you to teach this course for the very first time and you are somewhat unsure about it, a great answer is yes, but will you buy me CodeHS Pro? Awesome. yeah, I already said a lot of this, but the videos and slides, you can watch them together. You can watch as a flipped classroom so that the students watch the video for homework just like everything else. It'll turn blue actually. It'll turn into that blue navy color when the student has watched the full video. And of course that doesn't stop them from starting the video and then going and playing some video games. But usually you can tell if they've finished the full video. if it's yellow and that means they haven't gotten all the way through the video. The first thing I say is did we watch the full video? but you can do it as a homework assignment or in class.
You can pause it. You can throw it into EdPuzzle or other platforms that allow you to sort of build in those knowledge checks. and it provides that sort of direct instruction so that you as the teacher can you know even if you are explaining it yourself get that alternative introduction for the students and then the examples and exercises are phenomenal. I love to do the examples as a class. I do find that my students will tend to skip over the examples because why look at an example when you can just jump right into the exercises. so I do like to introduce them as a class and then you can build off the example as well into more of a sandbox and say, "Well, let's just take a moment and expand on this example. Let's add a little bit more to the website." and then I'll show you in a moment. You can go ahead and add your own examples, your own exercises. You can add pretty much any other lesson in that you want to or any other piece into your that you want to your lessons.
And then, as I said, this is a pro feature, but every single lesson comes with a lesson plan if you have CodeHS Pro. I've seen a few of these. I typically work on the free version for my school because we only have unfortunately a few computer science courses that I get the pleasure of teaching. so for us, it doesn't make a lot of sense to go to the pro version, but, especially if you have a larger school, larger classes, or, especially if you have the resources to go ahead and get the pro, version of CodeHS, it's absolutely worth it. To give you a sense of how I worked my classroom when I taught this class last year, I went ahead, we have 25-minute homework assignments. that's the goal at least. So, what I would typically do is I would assign the intermediate assignment if there were three or the more basic one if there's only one or two assignments for the lesson for homework. they had already been introduced to it in the classroom. They got usually the goal was it was something they could do in about 10 or 15 minutes, maybe even less time.
And then I would give them the hardest or maybe second hardest assignment exercise in the that that lesson for them to just try. And what I would say to my students is if you can get it all done. If you can get all the checks, that's great, but don't spend more than 25 minutes total on your homework. What I want to see is comments being added in. I want to see you making an effort, right? It shouldn't be grayed out. You should have made an attempt here. you should have gone ahead and and it should be yellow. It should have been something that you spent some time with. I can see the the the history for the code that the student put in. So, I can see how much time they really did devote to their homework assignment if I need to. And then the first thing we do when they come in is we review the required exercise as well as the challenge exercise al together before jumping into the next lesson. So it sort of is a lesson that spans the second half of one class period, the homework and then the the first half of the next class period. I have the the the benefit of having daily classes with my students that last for about 50 minutes. So it's sort of perfect that we go we finish up the previous exercise, we jump into the video. Now, every video is does vary a little bit in length. the shortest one I saw is probably about three minutes and some number of seconds, and it can range all the way up to I think there were some sections that had multiple videos or videos that got got between 15 and 20 minutes long. So, you will want to make sure you're looking ahead of time to to sort of gauge out exactly how much time of class a video might take. If they are one of the longer videos, you might pause it, jump forward, do a do an example, and then go back to the video just to make sure students are staying engaged. I can show it briefly. but if you go to a video, so it pops up like this, and you can do it on codes or YouTube, but if you go to a video, and I'll pause it so I'm not talking over it. there is actually a notes section that students can access and it is unique to the video, but if you are having students follow along with a video in class, a great thing to have them do is pop up that notes section and be actively taking notes on the video. They might not necessarily go back to these notes a ton, but just the the act of taking the notes really can help them to see what the video is doing and and actively sort of participate with the video rather than just being passive observers. Awesome.
Yeah. so you can do pretty much everything that you do in a regular classroom with bell ringers and videos and examples and exercises, right? the same thing that you know I teach statistics that doesn't touch on code HS and whenever I teach statistics I do a lot of these things I'm bringing them in they're just not all in the same place so if you can just throw into the chat sort of if you have been using code HS what types of things you use codes for in the classroom like bell ringers how you use it and then also if you haven't used codes or you have you don't use it a lot any ideas you have about how these features can be used for bell ringers exit tickets, homework assignments, that type of thing.
Jack, we do have a question in the chat.
I I very much love this deep dive into the content of the lessons. If we could zoom back out to the coursework. We had a question from Melissa asking, "Are there any supplemental modules that you find really helpful with building JavaScript background if if students need a little extra help?" Yeah. and I'm trying to How could I get to that quickly? So, if you go to if you go back to your sections, and I've got a bunch in here, and you go down to the course catalog, you can see all of the different courses available on CodeHS.
And what I would do is just look for JavaScript. There we go. and just scroll down to Oh, there it is. Right. So, intro to computer science and JavaScript. For some reason, my eyes were just glancing over it. but then as you go and take a look at the units, they've got a full course here. and I usually just sort of take that first JavaScript basics unit in there that helps students with understanding variables and user inputs and how the basics of JavaScript is formatted. some of the more advanced stuff for web design and development will get into loops and things like that. and if you do want to and if else statements and so there's the control structures portion which is a really great one as well to work through if you have students that sort of are mixed class where you've got some students that have experience with JavaScript, some that have experience with computer science but not JavaScript and some that are just sort of taking to it for the first time. pairing them up in small groups can work really really well so that you know the the students that don't have as much of experience can learn from those that do.
the other thing depending on the structure of your school day that works really well is if you can set up lab sections outside of class or even sections time within class that they can work independently.
you can be assigning some of the more advanced challenging assignments to those that have the background and those that don't have as much background you can be working with them one-on-one and giving them some of that as well. But any of these modules from this course can are helpful but specifically the JavaScript basics and the control structures structures portion. Thank you for that. I think we can agree that you will never run out of curriculum with codes.
you you may get overenthusiastic about how much you think you'll get through. There you go. All right. One more curriculum question for you, Jack.
do you offer your students certifications as part of your curriculum? And if so, how do you handle balancing coursework with certification preparation?
So the last so so I don't for most of my classes the last two two years I've been teaching primarily the year-long AP course that that gears students up to take that AP exam.
So for that one they are doing a lot of what they would need towards the certification anyway. And then the other courses that I sort of mix and match in are trimester long courses that are just sort of quick dives. sometimes I'll do one for our younger students that uses the the basic intro that's not AP that the that uses Tracy the Turtle and moving Tracy the Turtle around. and other times it'll be something like cyber security and AI.
The first time I taught the web design and development course actually I went in planning for it to be cyber security and AI. they had done a lot of nice prep work for it and the students realized that it didn't actually involve a lot of code and that they were not going to be taught how to hack Facebook or their local bank is part of the course and they asked whether we could do web design instead and I said as long as you're okay with me being about one week ahead of you I'm sure and that was it was that easy to sort of pivot for my students. but no typically I I don't do a lot with the certifications but I'm sure Stephanie you could talk a little bit more.
Yeah, for sure. So, we do actually have codes certifications and we've made some major upgrades to that certification exam proctoring experience for teachers so that now teachers can live proctor and monitor their students while they take our codes certification exams. And we do have a web development level one certification exam, a web design level one certification exam, and if you do add in some more JavaScript to this particular web design and development course, we also have a JavaScript level one certification exam. I am not super sure about how our content aligns with you know certupport or any of the other kind of webbased or web design and development certifications industry certifications. But if anybody has specific questions about an industry certification, we can definitely pass those along to support and try to find out more for you about how our courses align to those industry certification exams. But the codes ones are great, too.
any other questions?
We are all good for right now. Awesome.
so that takes us to the codes.me pages and this was the the big thing that I I learned about when I started this course because I already had some background with code HS. but these codes.mme pages are awesome. they are basically a web page for every single user of codes. it's a free feature that is automatically included for every single student and every single teacher. and so you basically have your own website that you can create right from the get- go. it's so I'll show you in a second how to get to it. but basically students get a get the ability to be, you know, you know, Johnny Smith.cods.me. and anybody in the world, right? Anybody with an internet connection can then jump onto that web page and take a look at it. so to create your own web page, here's the basic walkthrough, but I'll just go over here. You go up to your sandbox and that's always visible on codes for both you and your students. And then you basically just go ahead and say edit homepage. And this will bring you over to your homepage. you might need to depending on what your particular username was to start off adjust your username which you can do back in the settings for the sandbox by jumping into I believe it's but into your account settings and jump into and change up your your your your username if necessary. but basically from the start right you can go ahead and just start writing your own web page with basic HTML and jump jumping further into CSS and JavaScript as you go along. my students each did this for my course and it's part of the web design and development course to have a full module on building out your codehs.me page. some special notes about sharing. once you put once you publish it, once you put make it make it live anybody with an internet connection can view it. This can be really productive because it allows you know not just you and your students to look at it but you can also if you know the media folks for your school they can be celebrating the work that you're doing on code HS sort of on the school media pages and things like that. But you do want to be careful. right, all of our students typically maybe they're 18 or over over, but for the most part they're they're younger students. We want to make sure that they are practicing good online safety when they do this. The thing that I always emphasize to them is even if they're used to using Instagram or Facebook or what have you. those platforms all have privacy built in that hopefully they are using well to protect themselves online. And these web pages can be viewed by anyone. so the more that you can encourage them to use stock photos, make up names, make up mascots, make up so you know, social media handles so that it's not directly linking back to them, the better. And it might you might get to a point with some students where they really want to build out their own personal web page. And especially if they're older, that might be something that you want to encourage them to do. but especially if you've got a younger group of students, really encourage them to just make it about sort of, you know, I mean, not random things, but you know, sort of general general things in the world. I'll show you in a moment. One of my students did a great web page for visiting Vancouver, Canada that did not require not require a lot of personal information. But once they start doing this, they can build it out however they want. they can start to really instead of just answering the specific coding prompts, they can start to really dig into those, you know, new and exciting ideas, they can start like just googling ways to sort of expand on their web pages. they will sort of surprise you, I think, in how far some of them are willing to take it. I had one student that walked in and was like, "Man, I just spent 10 hours last night and forgot to go to sleep building my web page." And you look at it and and they've done some really, really cool work. maybe not the most efficient work possible. you can also have students start to, you know, switch computers and, start to help debug and give ideas. You can throw up the codes.me pages on your projector or share them out with your students and say, how can we make each others better? How can we continue to build on that? And then depending on what your school requires, if you can give a final project in lie of a final exam or assessment, the codes.me me page is a really really great way to have students show off everything that they've learned and it's great to it's something that is very public facing. So you can go ahead and turn around and say to parents or to guardians you know this is what your son or daughter has been working on this year or this trimester and usually parents love to see that. so just a quick question which of these pages excitingly excitedly telling you to visit Vancouver British Columbia. Which of these was made by one of my students and which is the official page? All right. Well, if you guess the one on the right is the official page, you would be correct. U but I do think that my student did a really nice job. All of these links, this is just a photo, but all of these links, overview, city landmarks, activities, portfolio, all of them worked. He threw in a bunch of different pictures, did a lot of different framing for the pictures and some of the different animations that you can do. and he even was working on right when we were running out of time for his final project, he was working on adding sort of a a form that you could fill out to gather extra information on Vancouver. and while I don't want to knock the city of Vancouver's webpage because it clearly has many more links, I do think they could learn from a little something from one of my students about adding more pictures and exciting visuals to their web pages. and then some students will choose to go a more basic route and just make fun of their teacher, which I have no issue with usually. this was one of my students fella who went ahead and you know said things like one of my goals is to learn as much about computer science as I can which was great. they taking web design with this guy. and his main group goal is to do as much work as possible with the least amount of effort. so they will of course make it comedic when they can. and you know, you know, depending on exactly what information they're putting out, sometimes when they're just, you know, poking some harmless fun, I don't mind if they use a little bit of personal information here and there. Awesome. so no matter what, you can, I guess I should pause. I don't know if any questions have come up about codes. Me pages.
not so far, but if anybody does have a question about that feature, again, that is located within the sandbox portion of your codes account. So, both you and your students have sandboxes and Jack is showing you right there where to start editing that homepage. And it I think the main things are I want to just double click on are that they are live to the internet. So yes, please encourage that digital citizenship and safety. and also you can see anything that your students create in the sandbox and on their codes. Me homepage. So if for some reason you need to go back to see you know what students have been spending time on you as the teacher always have access to all of your student work whether it is an assignment that you have given them or work created in their sandbox.
Absolutely. Awesome. so you can always customize your courses. so every single course has the edit capability if you are looking at it from the teacher perspective. So if I go back to my courses here, my sections, I go to my demo course. so you got all of the different stuff right here. Some of it is a pro feature, but once you hit on the assignments, you get taken to the teacher view and you can hit edit at any point. And this allows you to drag things around if I I I I usually don't change too much around. But if you, for example, wanted to go ahead and do the create your own homepage project a little bit later on and drag it on down if you wanted to and reorder it. Then you hit done. You can also add your own modules or lessons or assignments. So at any level, all right, you can add an entirely new module and build it from scratch. you can go ahead and add a single lesson and start filling it in with your own videos, your own assignments and then you can go ahead and add individual assignments as well.
you can also add in entire projects or or sections from other code HS courses like I mentioned before with the JavaScript option. so everything is customizable. If you, even if you're on the free version, you have the ability, let's say, we were going down and we were looking at the copyright section and, you know, I I really liked these free responses, but I didn't know that we really needed the finding images one. I could go ahead and just remove it, right? I can I can remove that one piece of this one lesson if I felt that was something that maybe were a little bit behind, I didn't want my students to do. I could also reorganize things if I wanted to, right? I wanted them to do the make collage one first. I could move it down and then it'll just peer it to my students a little bit farther down. and I can also do things like copy the link if I did as I said with my first two years of teaching. If I want to just copy the link and drop it into a Google classroom or another LMS, I could allow do that for my students. and then assign and you can even assign it to other courses that you have. So, there's a lot of different stuff you can do. If you do have Pro, these will not be grayed out. so you'll be able to go ahead and take a look at exact exact due dates and what's been assigned or not. but even if you aren't doing it that way, right, you can always just sort of move things around. Even if you don't have Pro rather, you can still do a lot of the basic configuration. so as I said, you can remove content and you can add your own content. you can go from particular courses or projects. and then as we said were saying earlier, you can also add the supplemental materials by scrolling scrolling all the way down to the bottom that has the basic stuff. Oops, I'm sorry. That has the basic additional pieces that you can add in right away just at the bottom of the assignments page. add your own contents, modules, lessons, and activities. Awesome. when you get into teacher tools and resources, this is a lot of stuff that sort of bridges the free and pro features. No matter what, you do have the ability to communicate with your students. You can start the conversations by going to the toolbox at the top of your navar navbar, hitting on the classroom, and then clicking messages. so if you go to toolbox, going through the classroom section and just clicking on messages, you'll jump into, a section where you can go back and forth.
You can announce things to your entire class, and you can get into individual conversations with individual students as well, and you can jump back and forth between your different classes if you want from right right there.
So, this is really helpful, especially if you have a larger class or especially if you have a class that doesn't meet every day. if you have a class that meets every two or three days or even once a week, this allows you to stay in contact with your students. whether they're, you know, certainly if a student is sending me a message at 10 p.m., I'm probably not responding to it until the next day, but this allows you to to stay in touch with your students if you want to.
this is a pro feature, but every assignment can be configured with grading settings and assignment settings and due dates and cop and extra settings around copying and pasting and and and creating things as a quiz. and if you are planning to use code HS just standalone only use code HS, you certainly want some of these pro features so that you can work in quizzes and have extra control about gradebook settings. Some schools, mine included, really ask that you put all of your grades in a separate LMS or separate information system. And if you are working on that front, sometimes some of these grading, you might not need some of these grading settings as much. I always tell my students, for example, that, you know, because I'm on the free, we're on the free version that I'm just going to go ahead and put their grades in our other information system. and just mark assignments as complete or not complete in code HS. but you can use code HS as the full the the full monty if you will. You can use it for everything if you have that pro feature.
and as we said before there are those full lesson plans that you can use on the pro feature that really allow give you everything you need if you're teaching this class for the first time.
Especially if you're maybe a math teacher that's teaching computer science for the first time. The lesson plans can be really really helpful. and I I strongly encourage those that are teaching for the first time or teaching just even one of these classes for the first time, see if your stu your CL school can get you the pro features so that you can dive into those lesson plans. and then no matter what, you can always provide feedback and code code information to your students. I I showed you this briefly, but if you go to an assignment, so I go to my sections, I go to my demo course, and I might want to go ahead and look at the student view for particular assignment. And let's just go ahead and jump back into the title tag example from before. And so, and it does give you a popup of what the assignment is, but you can always see this again under the assignment tab there. But when you get into grade, you can go ahead and provide specific feedback to your students. And even if it's something like great work, I haven't gotten a chance to play with it, but I know that pro codes is starting to to have these AI generated grades as well. which I think is super cool and can potentially save teachers a lot of time.
And then as I said before, you can give zeros if you need to mark finalized and everything in between with awarding full credit and marking that something needs work. When it gets marked as needs work, it shows up pink for the student. They do not like that. They I do not know why, but they they they very much want to get everything navy navy blue, teal, green, whatever that color is as as quickly as possible. That's always a goal.
and so I already mentioned some of this, but in my classes, sometimes I will hide particular assignments or only add them right beforehand. Even if you're on the free version, you can use this as something of a quiz. right, if you only put up an assignment right before class and then have the ability to grade it right after class, you can put it up in the classroom. I like to refer to these as live coding demos for my students rather than tests and quizzes because the second you say something is a test or a quiz, they get a little freaked out by it. they certainly don't like pop quizzes, but if you just say, "Hey, it's a graded coding demo or something," they they love to to to jump into that and then eventually one of them will say, "Wait a second. Isn't this just a quiz?" You're like, "Yeah." but it's a great way to to make sure that everything that they've been doing in homework, everything that they've been doing in class does really sort of really sort of stick with them. and that is all their own work. and when you get to grading, as we just said, there's that grade tab and you can add particular grades in. and if you're on the pro feature, you have a lot more ability to modify grades, to change the waiting of them and look at things through a regular grade book as well. That's gradebook right there.
but yeah, that gradebook view is only on the pro side of codes.
this is I think the one of the strongest parts of code HS and really distinguishes it from a lot of other platforms is how much thought they've given to the academic integrity side of things especially with chat GPT and other AI platforms that can now just sort of generate large amounts of code.
lots of students think they're being very clever because they just go home and they they take the prompt. so they might take this assignment right here, copy and paste this, put it into chat GPT, copy and paste their code in, and maybe they even get all of the test cases to check off, and then they just move along. It's not going to help them much when, you know, tests or quizzes roll around, but they they might view the extra 20 minutes they have per night of playing video games, whatever is worth it. but no matter what, whether you're on free or pro, you always have the ability to go and look at his code history. So, there isn't a lot of code history here because we haven't really been working on it all that long. U, but you can go through and usually two every couple of minutes, sometimes even within the same one minute, it's saving a snapshot of your students code. And so if a student has gone from no code to, you know, tons and tons and lines of code within a minute, right? If they've managed to code 60 lines in one minute, that's a pretty good sign that they've copy and pasted it from somewhere else. if you are on the pro features, so this is the free stuff. If you're on the pro features, you also have the ability, it runs plagiarism reports. it doesn't just give you the snapshots, but you also get a full timeline. it can even replace some of the code for you. and then you do also have the ability to sort of put students in a focus mode.
if you're a Chromebook school or a school that otherwise manages your your environment for your students, you might have another way of putting them in a focus mode. I know that we have GoG Guardian, which is a different platform that allows you to just say, "All right, you're going to be on Cody Chess for the next 50 minutes and there's no other websites allowed." but the the pro version does have a lot even more tools. But even if you are only on the free version you get alternate exercises. There are you get the full code history and there's the codes honor code that you can rely on as well for students. so there are a lot of tools there. and usually it just takes once or twice of catching students in the act and saying hey I noticed last night that you spent 5 minutes on your homework and it went from nothing to perfect within 30 seconds. Can you walk me through again how you got that that and then once you've caught them out they they're much less likely to do it again in the future. I know different schools have different rules about what happens when you catch students not being the most genuine. I'm lucky in that I have the ability to address these things individually with students and then escalate them to our admin if really necessary. make it a disciplinary issue if necessary. But the first couple times I catch a student once or twice, I'll just, you know, sit with them individually and say, "Hey, I saw you did it. It's not going to work long term. It's just cheating yourself." and usually they will course correct pretty quickly. Awesome. so I'm just going to jump into a few tips for teaching web design and development. so I taught it on the free license. and it's great. The free license is really good for smaller schools and smaller classrooms. the Pro Tools really are helpful as you get into bigger classes, where you have a lot of grading to do all at once. I'm really lucky that most of my classes are around 10 to 15 students. and I only teach a couple of computer science classes each year. So, a lot of the stuff that, you know, is redundant and and might go a little bit faster with the pro version, I can make do with the free license without too much trouble. But especially if you're at a larger school, especially if you're a newer teacher, and you can use those lessons plans, I absolutely suggest asking your admin about the pro possibilities.
one thing I will note with web design and development and code HS is very aware a aware of this issue is code HS as Stephanie was mentioning is mostly just is entirely browser based which means that whether your computers are on a Chromebook, Linux, Mac, PC, what have you. Even if they're on their phones, which they really shouldn't be in my classes, but even if they're on their phones, they can do 99% of everything they want to do. The one thing about this class that can get a little tricky is at certain points it will suggest that they use inspect element. So if you haven't done this before, you can do it on most computers by hitting F12 or function F12 or right clicking and going down to the the inspect or inspect element. And what that's going to do I think it'll so I don't is this showing up on the on the excellent. so, if you go into the inspector, you can actually sort of see the different elements of a web page. So, if you haven't done this before, it's a great way to just sort of like yourself get a sense for how every website page is constructed. But, it's really really helpful for students that are just learning HTML and CSS for the first time and that every single web page they go to is a potential example for them. the downside is if you have a managed space, oops, didn't mean to do that.
Sorry.
if you have a managed space, there we go. if you have a managed space, then like a Chromebook setup, that means that your students might not have that ability. so I ran into this. the quick workaround in the classroom is to just throw it up on the projector, do it from your computer for them and show them how that all works and then encourage and say, "Hey, if you've got a personal laptop or something at home, you're very welcome to try that out." later on I was able to talk to our head of IT and he's like, "Oh yeah, that's an easy fix. We can go ahead and allow our students to use that or allow your students to use that." But just a heads up codes is aware of that issue and they are starting to build that into their courses where you it's sort of a simulated web page inside of the code ahs web page already so that they can use inspect element and get that same sort of experience. so hopefully that might be coming to the web development and design course soon. but even if even in the meantime there are some ways around it. But just be aware that if you are a Chromebook school, you might not have that ability right away. Just more broadly, HTML and CSS are sort of the the bare bones of how websites run. HTML was the original if you go back to the 1990, late 1990s, early 2000s, a lot of great web pages were built entirely on HTML.
the CSS is the the the styling component that has made websites look as cool as they do today. so even if you don't have a lot of experience with this stuff, you absolutely can teach this class. I would just, you know, make sure that you go through all the curriculum ahead of time, particularly work through some of those harder exercises for your students before you actually are seeing the students. But I would note the sooner you can get students working on their cods.me me pages, even if it is right right away in that first setup, it really gives them that hands-on experience, even more so than the exercises do about some of the possibilities that exist there. I will just note that there are ambitious students that will, as I said, spend 10 hours a night building things out. And if they start doing that using only HTML, there will come a moment where you turn to them and say, "Remember how you spent 10 hours making this really cool part of your web page? It turns out we could have done it in about 15 minutes with CSS. so just just heads up to your students like if they are willing to put in that extra time that's phenomenal. They will learn a lot. but remind them that we are learning more efficient ways to do things as we move beyond HTML into CSS. and CSS is that way that we can start also building in sort of more complex user interface pieces as well.
and that's where JavaScript comes in. If you're teaching this as a year-long course, you're probably not going to get to JavaScript until maybe November or December. and then if you are doing as a trimester course, you'll absolutely get there a little bit faster. But the JavaScript component, that's when you really get into, you know, JavaScript is a full computer science programming language more so than markup languages like HTML and CSS. So when you start to build that in, you are going to be working with if else statements, more control functions.
You're going to be working with iteration and loops and recursion. And so at that point, you really want to make sure that if you have students that have already had that background, maybe you're giving them a little bit of review. And if you do have students in your course that are maybe new to computer science, you're really going slowly through those first JavaScript lessons and making sure they understand some of the basic building blocks of JavaScript before they dive into the more complicated exercises and assignments. I did have some students that had never had JavaScript or computer science before in my class.
They were able to do really well. I generally remembered when I was grading their work that they didn't have a lot of the background that some of the other students did. and they, you know, I think they got more out of the class than anyone else did because they were sort of scaling up so quickly. but at the same time, you just need to make sure you, you know, keeping an eye out for them. the nice thing about CodeHS though is you don't have to assign everything. You can assign the basic assignments to some students and give the more complex stuff to other students, maybe as extra credit. Or if you really are differentiating that much, you can say to some groups of students, hey, I want you working on this material and other groups of students that you want them working on the more basic stuff. You can modify assignments as you go through. If you read something and you're like, I see how this makes sense, but I know my students and I can come up with a different way of presenting it to them.
You can adjust the assignments for them.
and pair students together in small groups really to sort of help them learn JavaScript if they haven't learned it before. and I love adding in lab time, whether that's in the class or outside of the class. my school has 30 minutes of like office hours at the end of every single day. And that's a phenomenal time to just say, "Hey, I'm going to be in my my classroom if you want to stop by. I'm happy to work on some of the homework with you if you're if you're super lost." Awesome. Stephanie, did you want to take back over for this part?
Yes. Yes. And so, while I'm kind of wrapping things up here, I will do one last call for questions for Jack in the Q&A. We have had a very active Q&A, and I appreciate it so much. If you have u missed any of those questions as a participant, you can open up the Q&A and see what everyone's been asking and our team's responses to those questions also.
And so we'll give you, you know, just a few minutes here. Last call on questions. Jack, this was amazing. I am just so like I feel like I could go teach this course now and have no problem. and you were so thorough and gave so many great tips on how you have used the platform to your best advantage with that free license in your classroom. So, thank you so much for all of this information and helpful preview. Melissa, I can answer your question about additional webinars. Yes, absolutely. Jack is just the second of our series presenters for summer webinars and so we definitely have more coming up and we will get you a link to those webinars that you can search our topics and the times. And of course, even if you can't attend in person, we do send out recordings after every webinar to everybody who registered. So, even if you can't attend live, great to still sign up for those free webinars to get the recording link.
So, now that you have a code account, I want to let you know where you can go to ask questions and get more help and find answers to any questions you might have once we hop off this call. Jack covered a lot of wonderful curriculum. He covered a lot of wonderful platform features and teacher tools. And so if ever you have a question about curriculum or about our teacher tools, what you can do, I would suggest first is go to our knowledge base at help.codes.com and you can search for anything that Jack mentioned today. So if you think, oh gosh, what did he say about academic integrity? Go search for academic integrity in our knowledge base. You'll get a couple different articles to choose from and read through. They go step by step explaining the process for how to do things on our platform, how to sign students up for their student accounts, how to roster students to your sections once you get them set up. Academic integrity tips, all of this lives in our knowledge base.
So, you can probably find an answer to your question there. If not, we do have a fantastic support team. Jack, have you ever written into our support? I think once or twice. Okay. Yeah, we have a fantastic support team. They are so great at answering questions about curriculum, about platform tools. If you have a request, if if something is missing from our curriculum or if something is missing from our platform, we will provide that feedback to the people who can consider it for a future edition or project. So, please be in touch with us is the bottom line here.
Next slide, please, Jack. Other ways to stay in touch with codes. You could become a CODHS certified educator. If you have taught CODHS longer than a year, so if you have one school year under your belt, you might check out our certified educator program. You can also earn micro credentials with us. We have several different Facebook groups for educators sharing tips and tricks. And then of course, we also have social media accounts. Next slide, please.
We do want to invite you to give us feedback on this webinar. I think Jack did an amazing job and I would love to send him some great quotes from our feedback survey. So, if you wouldn't mind, please go ahead and take a moment to fill out this feedback survey.
Danielle has popped a link to that in the chat. We would love to hear what you enjoyed most, what was most helpful to you about this webinar. And please let us know if there are future topics that you would like to to learn more about. There is a question at the very very end I believe that asks what other what else you would like to tell us about your experience today and you are welcome to add in topics that you would like us to address in future webinars.
So after you are done with the feedback survey, make sure you are logged into your Kods account and then you can find a link in the chat to a certificate of completion and we would very much appreciate if you would please click on the certificate of completion link. All it will do is bring you to a screen that says thank you for attending and that's all you got to do. But that will record your presence here today and you will get a follow-up email with a certificate of completion. So if you can use those in any way professionally, we like to provide those to you. And Jack, if you'll go to the next slide. we did have a couple people asking about what are the webinars coming up. Oop, I think you went one.
There we go. Perfect. Yes. What are the webinars coming up? Well, on June 9th, we will have getting started teaching JavaScript. So, a similar presentation to the one you saw today, except it will be a deep dive into our introduction to programming in JavaScript Corgi course.
And our fabulous teacher trainer Paula is going to be leading that session. She brings many years of experience teaching JavaScript to that webinar session and we would love it if you would join us.
She has lots of great stories. It'll be an entertaining one for sure. Then on June 11th, we have getting started teaching Python and then we start our deep dive into our AP courses. And you've probably heard if you are a CSA teacher that the college board redid their CSA course over the winter. And so we did we redid our CSA course also.
we now have on available in the course catalog APCSA cortado. So we have a coffee theme going on with our CSA courses. And historically, we have had latte, mocha, and nitro. And now, the newest update to our APCSA course catalog is called Cortado. And it's a great update. We've had a webinar on that previously. So, if you are an APCSA teacher and you were unable to attend that Cortado launch webinar, you can find that on YouTube.
It was a great session showing off some amazing new curriculum. Jack mentioned earlier the simulations and the tutorials those are now embedded in that cortado course because it's our newest one. So hope you can join us for APCSA and or APCSP. All right. So that's it. That's all we have for you. It doesn't look like we have any additional questions in the chat or the Q&A. So, we just want to thank you all for attending with us today. And a huge thank you to Jack for sharing his experiences teaching web design and development. And everybody have a fabulous day. Thanks so much. See y'all.
[Music]