Getting Started Teaching Web Design and Development

Hello everyone and welcome to our webinar today focusing on teaching web design and teaching web development. I will give us just a few seconds here to get settled in. If you'd like to open up your chat, we're definitely going to be utilizing the chat today. I will be dropping links that are useful as we go along. The first one here will be the link to a copy of the slide deck. You don't have to have that open right now. As you can see, I am screen sharing. And so, you know, you can just follow along with me. But if you do want to come back to the slide deck anytime, it will be available to you all school year long. So, please feel free to Oh, I just sent that only to the hosts and panelists, and Kim does not need a link to that slide deck. Everybody else does. There we go. Okay. All right. Well, let's get started here and jump in. Thank you for coming to our second webinar in our summer series this year. We are so lucky to be joined by Kim Ingram Beck who is joining us as part of our teacher trainer program. And so what we do with our teacher trainers is we bring their expert voices in from the classroom to share stories, talk about how CodeHS looks in an actual classroom today, right? Like I was a teacher for a very long time, but I've been out of the classroom for about seven years now. And so we love that we can bring in these teacher voices, current classroom teachers to share their tips and tricks and happy stories about teaching computer science with you all. So Kim, would you like to say hi and introduce yourself? Tell us a little bit about you.

Yeah. My name is Kim. This is my 15th year or I just finished my 15th year of teaching. Ninth as a computer science teacher. My first years were as an instrumental music teacher. So kind of a weird transition. But that's what I'm finding is that most computer science teachers are transplant teachers. So you guys more than likely are also transplant teachers. But I teach for a growing district right outside Nebraska's largest city. And I am fortunate enough to be a full-time computer science teacher. So, that's it's been a lot of fun. So, yeah, I'm excited to be here and talk to you guys.

Yeah. And we're excited that you're here also. And bringing all this experience to share with maybe some newer teachers who have joined as attendees today, maybe some experienced teachers who are looking to just freshen up their practice and bring some exciting CodeHS curriculum and tools to their students. So what are we going to spend the next 90 minutes working through? We're going to first talk about our courses that you might be interested from a web design or web development perspective. If there is one thing I can say about CodeHS, it's that you will never run out of curriculum or things to do with your students. Kim is laughing. She knows. So like Kim, I was not a computer science teacher. I actually taught English as a second language and I taught French and transitioned into the computer science world and it is really really common. If you are sitting in that seat today also you are in good hands here. We have everything you need to get your feet wet and build your confidence in computer science. The first chore though is picking which curriculum you want to use with your students. And so we will present to you all the options in the areas of web development and web design today. Then we're going to switch and pivot and ask you the attendees to actually put on your student hat. We're going to lead a lesson and I will play teacher and you will be a student and we will work through a typical CodeHS lesson together. We'll talk about some tools that might be exciting for you and your students to try out during the coming school year. In particular, the codehs.me pages and our newest exciting feature is vibe coding in our sandbox. So excited to present those features to you. We will throughout hear advice from Kim and hear stories from her classroom and lean on her for that expert voice today. We are a pretty small group today, so I'm not going to worry about making sure we're strictly using the Q&A for questions. We can just use the chat. But go ahead and open up your chat, folks. Say hi in the chat so I know you're ready to go and excited to learn with us today.

And one more time because we've had a couple folks join I am going to put a link to the slide deck there. And like I said, you'll be seeing things pop up into there's an experienced programmer. Yep. Hello, Grant. And, you know, like I said, we'll be using that chat throughout our time today, and I'll be posting links to helpful resources as we go along. And the other thing I want to make sure that you have before we really dive in here is a CodeHS account. So, if you have not signed up for one of our free teacher accounts, please, please, please do that because I want you to follow along today. I want you to build some muscle memory today on the platform. And our teacher accounts and our student accounts on the middle school high school side are free. So go ahead and sign up for one if you don't already have a CodeHS account. And know that when you're ready, you can come back, you can explore curriculum, you can explore tools, and you can sign your students up and use the curriculum absolutely free.

So let me introduce CodeHS. If any of you are not familiar, we are a curriculum company offering high-quality instructional materials for elementary, middle school, and high school students. And we have grown a lot over the past more than a decade now of CodeHS's existence. You notice our company name is CodeHS and you probably think high school there, but we have realized over the last 14 years that parents and caregivers and teachers and state legislators are realizing the growing importance of computer science education for students and are realizing that, you know, we need to start introducing computer science younger, getting students access to this new world of creating with and creating technology. And so it's it's wonderful that we have now worked our way down all the way to our elementary school, our youngest learners. And that product is called Code Hop. So if you are interested or have a colleague who might be interested in exploring our elementary curriculum, it is a licensed curriculum but obviously we know we love to show it off and provide folks with a preview. So if you are interested in elementary, Code Hop is what you're looking for. Today we're mostly going to focus on the middle school high school side here with our CodeHS curriculum and tools. But we are a completely web-based curriculum and so love that we can have this equitable access to high-quality instructional time with students. As long as they have a device, an internet and a web browser, they can participate. So love that piece of it. We also provide tons of different professional development opportunities. Obviously, you know a little bit about that since you're attending here today. And you know, we'll talk a little bit more about other opportunities to learn more throughout the summer. And we also offer free teacher tools and resources. So for example with our LMS tools for free, teachers can create as many sections as you want. You can roster as many students as you want. You can have conversations and back and forth and send announcements. Lots of LMS features like grading that you are used to seeing in other LMS systems. For a paid account, a pro license, we do also offer kind of like some tools on steroids, right? Like they're like really powerful tools around progress monitoring, academic integrity, and grading and customizable grade book and things like that. But whether you are a free user or a pro user, you're going to learn something here today. So we're excited to have you and we will go ahead and talk some web focused courses.

All right. So we do have three kind of flagship web facing web focused courses and what I'm going to do although those links did not I will put these links in the chat for you to check out. These are our syllabi, so here is Picasso's syllabus and then I will open up our newest web design and development course. This one just came out last summer, I want to say. And so it's got some really great updated material for students to engage with. And then KO is sort of our lightweight middle school entry-level web design course. So there got those links in the chat for you to check out the syllabi for those courses. But just at a high level, Picasso is going to be our year-long course and focused towards high school students. It is a little bit older but you know still great tools, still great curriculum. Focusing mostly I say older because it focuses mostly on the design piece of creating websites and so if you want to get into the development piece where you're talking more about hosting websites and you're talking more about JavaScript, how we make websites interactive, then you'll probably want to lean towards the web design and development course, also focused for high school students and has enough content for a year-long course delivery. And then I did mention the KO course, more of a middle school focus and can be done in a semester. So let's bring in Kim's voice here. What is your favorite CodeHS web design and development course and why?

Picasso is the one that we used. And it's tried and true. It is very comprehensive going over quite a few different things. And as we get into it, I think you'll see previously I know our district taught HTML through like text files and like text edit. And this is just such a huge step up from it. So it always kind of makes me laugh when people are like, "Oh yeah, if we just use text edit." And I'm like, "Oh no, there's way better options." But anyways, yeah, so definitely Picasso. We only did a one semester course for web design, but I was able to kind of pick and choose, which Stephanie will get into later, the assignments that we did. And shout out to my all-time favorite CodeHS course, is JavaScript with Carol. I actually went to a graduation party and a former student came back to this student's graduation party and when they saw me, they said, "I remember Carol." And so it was just this kid's been graduated for like I don't know several years and first thing he thought of when he saw me was Carol. I remember Carol. So anyways, I see you have Carol on your background Stephanie.

Yes. Yes. This is our mascot Carol. Yes. Absolutely. And she she's pretty famous, I'm not going to lie. Wonderfully well. I'm glad you mentioned the ease of use on the student end and you know being able to sort of launch websites in a really easy lift way for students right from the get-go. And so we'll definitely show off that text editor and show you how you can get your students coding really, really quickly and developing websites, especially with our new Vibe coding. Like that's I'm really excited to show that off. But follow-up question. So when we talk about web design and development, it's not just about the coding piece. It's not just about the HTML, CSS, and JavaScript. We also want to make sure students have a firm foundation in how the internet works, the hardware that's involved with making the internet run and work for us every day, the different types of devices that are internet enabled, the internet of things, there's lots more to it, right? And so what web or internet topics tend to engage your students the most?

Um yeah. So we were talking about this just a little bit before we started. But people don't quite understand how the internet works and so I always enjoy explaining how the internet works and what the cloud is. And so that's always fun for them because they they have no clue. But otherwise topics that I I usually like to have them pick their own topics and so they usually get a bit more engaged just because they get to pick what design, what web page they design. It could be like a summer business that they have or something like that. So or a favorite band, whatever, favorite TV show. But yeah.

Yes, so much personal expression and creativity can come to life in web design and development for sure. All right. Well, I did want to zero in a little bit more on this newer course and maybe I'll get Kim to convert. We'll see. We'll see. So the web design and development course was launched in July 2024. So I was I was a little rushed there in my statement that it was just last year. I've been with CodeHS two years now, so still still got to keep my timeline straight. But it does combine content from design and development, but here in an easy to use year-long course package. And so as we'll as we drill down into the modules here on the next slide we'll see that students learn not just the fundamentals of design and development including creating web pages, web hosting, incorporating JavaScript to get websites clickable and interactive but they'll also be able to align with the latest JavaScript syntax updates then that have that have sort of expired in some of our older courses and they also will be able to incorporate JavaScript into HTML files and learn about collecting and storing user data from user interactions with web websites. So great course here and we can take a look. Let me put this in the chat. We can kind of take a deep dive here into the course overview page and get a sense of, you know, what do these projects look like? What will my students be able to build? I love that we feature not just the syllabus here, but if you scroll down a little bit, you can see some demo programs. So, I really like these when I am thinking about, you know, what course is really going to engage my students and get them excited about learning how to design and build websites. So, here is an example program called music library. If I click run, then I get a list of song titles, artists, albums, and lengths of songs. So, this is an example program, something that students might build as they get into HTML. And we can see some CSS here with the color choices that were made. And then this one is called upload a file. And it allows students to build in capabilities for users to upload files to programs. And then this final example program is XSS and code injection. So maybe getting some cyber security here. All right. So, yes, we get to see some basic user interaction in websites. And obviously, you know, this isn't jazzed up. It doesn't have a ton of styling to it, but important aspects of helping users, UX and UI basics, right? Helping users use your website easily and fluently. Other things if you are interested in getting your students certified, industry certifications or our CodeHS web development certifications, we are pretty well aligned to some of those certification exams and you can find even more standards alignments using our standards framework tool.

So let's move on and check out the web module breakdown. So you can see that students are going to start with HTML. That is how we create the content of the internet. It's how we add text to web pages, images to web pages, how we embed video players in web pages. CSS is the styling. It is what makes things beautiful and attractive to users. And going through not just individual coding exercises. What I like about this course is that students have a through line of a code.me project. And so you can see that project create your homepage is the fourth module listed on the left-hand side there. And as students go along, they are going to continue to build piece by piece onto that personal homepage. And so I love that this is a really chunked step-by-step introduction to building websites for students and they get to personalize it and really find a purpose, right? A reason to use this code in the programming experience. We do also have some supplemental modules recommended for many of our CodeHS courses. So these supplemental modules you will find at the bottom of your assignments page and they are ones that our curriculum team has curated specifically for the course that you have chosen. So definitely recommend checking those out. And Kim's right. We are going to talk a little bit about how to customize courses, how to add content, move content around because we really want it to resonate with your students and engage them in their learning.

So, we had those three main kind of flagship web design and development courses, but I do also want to remind folks that there are even some specific state courses around web design and web development. So for example, we have Florida Foundations of Web Design, Oklahoma Web Design, South Carolina Fundamentals of Webpage Design and Development, Texas Web Design, Utah Web Development One. So these are courses that states have said, "Hey, we're putting out particular standards for a particular high school course." And CodeHS, we love that. We want to support states. We want to provide high-quality instructional materials to teachers and students in those states. And so we build courses after states release those standards and those course frameworks. Then we come back and build courses specific for those states so that we can ensure that we are meeting all of the standards for your particular state. And you can find, I'm going to have to just Google it here, you can find our state pathways and any courses that might be particular to your state by just navigating to our course catalog. So I will put a link for the course catalog in the chat so you can follow along. And we have this filter by state here. So we could say all right I am teaching in Texas and filter for Texas and then we could filter for web design and we can see that this course tech apps has some web design. This course, Texas Fundamentals, has some web design in it, but here's the one that I was after, this Texas web design, particular to those of you who might be teaching in that state. So, definitely use the course catalog to see if there is a state specific web course that you might be interested in.

Let's bop back over because there's one last suggestion I want to make when we're considering picking courses and that is a pathway. So if you have a CTE program at your school that is looking to support students learning year-over-year and really pursue some great industry certifications, then maybe a pathway dedicated to web design and development might be interesting to you. So here's what we would suggest in CodeHS, and none of this is set in stone, right? Because different states have different goals at the state level. Different districts have different goals at the district level. And so none of this is set in stone, but this pathway is a suggestion for how you could have some students earning some industry certifications and being really ready for graduation, world of work, or enrolling in school with a great foundation in web focused computer science. So, ninth grade taking web design Picasso, 10th grade taking intro to computer science, JavaScript corgi, which Kim mentioned, both her favorites, and then web development and mobile apps. So, students getting into maybe some React coding there. So, here's some ideas for your consideration as you are trying to pick from our web courses. Are you looking for more of an introductory level course? Are your students ready for some advanced web topics? Do you want to focus on a variety of topics in computer science or do you just want to consider web courses? How much time do you have? How often are you going to meet with your students? Are you a semester-based course? Are you a year-long course? Do you want to have students have access to block coding? Because our HTML and CSS lessons do allow for block coding and students just toggle between block coding and text-based coding. Also our Carol IDE does allow for block coding. Connections, you know, what kind of topics really are going to resonate with your students and spark their interest? And definitely a consideration for teachers in the classroom, are there specific standards you need to meet? So, I've been talking for a while here. I want to get Kim's voice in. Thinking about all these courses we have to select, what would you say is foremost in your mind when selecting a course to teach from the CodeHS catalog?

So, I'm extremely fortunate that I have the autonomy to pick the curriculum that I think matches the course description and what my district wants me to teach. So, I look for having too much content or at least a way to supplement things because I don't want my kids to get, I don't know, run out of things to do that would lead to disasters. So, I like the full year courses even though I only teach semester courses. But first and foremost is probably the topic that it's it's covering. Yeah, that's what I go with. And like projects. I prefer having the kids do more projects than like tests or quizzes. So, I really like that there's a good amount of projects that kids work on with the Picasso course.

Oh, I love that piece of advice. Yeah, I mean, we we want to make things real for students and I think projects are definitely the way to go. So would love to pick your mind about your favorite Picasso projects.

Gosh. I don't know actually.

Okay. Well, I'll let you chew on it. If any come to mind, we'll we'll show them off here in a little bit. It sounds like we have a lot of newer teachers in the audience. So, I would also love to hear advice on pacing. So if you're a first year user of CodeHS, you know, we're talking about 170 contact hours with students here for a year, 70-75 hours for a semester. It's a lot to get through. What pacing advice do you have for a first year teacher?

Yeah. So even as a not first year teacher, I still don't know how my class is going to progress before I go into it. This class may be completely different than all the other classes I've had in the past. They may go way faster, they may go slower. So I just take it like one day at a time. So, I like to always have backups in case, well, that part of the lesson I thought was going to take 40 minutes took 10 minutes. So I like to have, you know, oops or just in case of I like to plan extra things, but I would do one lesson per day to start off with and then you can kind of I like to especially at the beginning of the year or beginning of class, I like to do get to know you kind of things. So, I will intentionally have like engineering challenges, get to know you kind of brain breaky type activities that I pad in especially at the beginning so the kids can start to learn get to know each other. So I think that works really well. You can have them do a lesson and then just be aware it may not take we have 45 minute class periods. So, I should probably preface by saying that. So, typically it'll, my kids can do two lessons a day. Some kids will fly through it like crazy. Some kids will really really struggle. So, yeah, they'll I'll come back to this a little bit later, but I have kids just kind of go at their own pace. But I have markers for where they're going to meet. And so, as my advice for you is, start with one lesson a day. If it seems like your class is good with that, then stick with that. If it seems like they finished the first lesson in 20 minutes and you have a 90 minute class, go ahead and have them, you know, do a little bit more. But, and then don't be afraid to pad in other things.

So yeah, I definitely want to come back later to how you choose to run the classroom because you know some of our teacher trainers work at virtual schools. They never see their kids in person. They run even some teachers I know using CodeHS are completely asynchronous from their students in virtual school settings and so everybody is kind of at their own pace learning things at different times. Then at the other end of the spectrum, yesterday my teacher trainer Adriana, who was with me for our webinar, really likes to keep everybody pretty much on the same page, learning the same thing at the same time. She likes to do a lot of direct instruction with her students. She also likes to do lots of discussion and collaboration in her classroom. So, she kind of needs everybody to to at least be, you know, at this marker, as you said, Kim, at a certain point so everybody can be successful in those collaborative endeavors. And we have teachers who do every use case in between with CodeHS curriculum. And so I encourage you attendees today here to be thinking about what are the classroom routines that you're comfortable with in your teaching now because you don't have to throw those out when you come to teach computer science. You can still choose to do a lot of direct instruction if that's if that's your jam. You can still do a flipped classroom if if that has worked really well for you and your teaching situation. So be considering as we're going through some materials today as you're looking at the student experience, how is what I'm seeing, how does that fit with my teaching style? What do I want to continue in this new chapter of teaching computer science? So yes, we will definitely dive deeper into that.

For now, I would love to ask our attendees to put on their student hats and log into CodeHS as a student. So, earlier I asked you to create an account if you hadn't already. And you have to answer a couple questions about, you know, your your teaching and your school. So, hopefully you've had time to finish up those teacher questions because we're going to switch over to the student side. So, if you will, I'm going to ask you to join our section as a student. I'll put a link in the chat here. So, you can just click on that URL or type it in if you're feeling frisky. codehs.com/go/b64. And this will bring you to a student view and enroll you as a student in a course where Kim and I are actually the teachers. I love it. This is my favorite part of the job is playing teacher for a little bit. So what you'll see when you click that link to join the section is a page that looks like this. It'll just be a pretty basic page. It'll show me and Kim as the teachers and then there will be a big blue button that says join section. So go ahead and click that button and we are going to work through a lesson called introduction to HTML. Now I picked the coursework you're going to interact with here from a middle school course. So I believe it was Jennifer earlier. Yes, Jennifer, earlier you were talking about how you teach middle school and are looking for some resources for teaching web design and development. And I love this middle school mix and match course. It is an amazing entry point for middle schoolers into this world of web design and development. And I have selected specifically from the mix and match course. As you can probably tell from its title, it spans a lot of computer science fields and areas of study. I've selected to show you today just the ones related to the internet, digital citizenship, and web design and development.

All right, let me rescreen share because I want to move over to my student view and I want to make sure that I turn on the sound because some of our content delivery actually comes in the form of videos and you as students have access to those videos. And so I want to make sure there we go. Okay. So, we can all watch this from the student view. So, you can click along with me if you want to in your student account or you can just watch what I'm doing for now because like I said, we're looking for a specific lesson here called introduction to sorry, I'm trying to do 16 things at once. I need to find my chat because I need to enroll as a student in the course. All right. So we have clicked the link in the chat. We've clicked join section. And now we can find that lesson that I want. And here in the second module, exploring web design 1, we are going to work through together this introduction to HTML. So for now, you can just watch the Zoom. I'm going to play the video just as your students might if they were working self-paced through this lesson. And then we can work through this quiz together. There. It's just a quick check for understanding more than like a quiz I think is a misnomer. But that's the item type. So, multiple choice quiz there. We'll see an example program which I absolutely love and I'm definitely going to ask Kim how she uses example programs in her classroom because I think they're really they can be really powerful. They are fully coded programs. They already work. They're there for students to tinker, to experiment in without feeling like, "Oh my gosh, I'm going to break this and never be able to recover my code," right? Then we'll get into a coding assignment where we have to write some HTML and finish out our assignments here. So, let's jump into this video. Got your student hats on, attendees? Here we are learning about HTML.

Hi, in this video we'll be going through an introduction to one of the most important parts of web development and that is the language HTML. So here's a question. Have you ever wondered how exactly web pages are made? You probably view several websites a day today on the internet, but have you ever wondered what goes into making these web pages behind the scenes? Well, introducing HTML. HTML is the language for building web pages. So why learn HTML? Well, HTML lets us build our own web pages. When we build our own web pages, we can easily share our ideas and creations with the entire world. Web pages have become an incredibly valuable resource in our society for spreading information, spreading ideas, for artists to share their creations, for groups to get together and organize. Web pages are the new way information is shared between people. If you think about it, Facebook, Google, CodeHS, this very website that you're viewing this video on right now, every single web page on the internet, all of them are built with HTML. And all of them were built by people who learned HTML. No one started off knowing HTML. They had to learn it. So that's what we're going to do today is learn HTML so we can start building our very own web pages. Furthermore, what's incredible about HTML is that once you make a single HTML document, maybe your web page html, any browser on any device is able to take that HTML document and display a beautiful web page from it. Doesn't matter if someone's on a phone, on a tablet, on a computer, doesn't matter if they're using Chrome or Firefox, whatever browser they're using, they'll be able to view your web page. Now, a browser is simply an application on a computer that can take an HTML document and display it as a web page. Today, we'll be learning about how to make this part. How do we make the HTML document that turns into

All right, so I'm going to show you a little trick here because as a teacher, I can play this up on my projector and we can watch the whole thing start to finish, but I can also and students have access to this too because remember we are looking at the student view here. But as a teacher once I'm a little more familiar with this course, once my confidence is up, you have the option of actually doing this direct instruction from these slides yourself if you would like to and you have also option to open the slides and edit them if you want. And so, you know, I can also maybe skip through some of this because we already watched it and actually get to the tags that make up the HTML markup language. And so, I can say, oh, students, okay, here's our first tag we're going to learn. It's the H1 tag. And, you know, we have to be really careful when we are coding because every little character counts, right? We we have to start memorizing it. It just takes memorization. It'll take lots of typing and practice to learn these tags that allow us to add content to a web page. And so I can teach directly from the slides if in fact I am feeling confident, I am comfortable with the curriculum and I want to make sure that I can pause and check for understanding with my students. Kim, do you mostly do since your students are self-paced, do you find you spend a lot of time with the videos or do you use the slides in direct instruction?

Sometimes I go through the slides before as an intro if I feel like the kids could benefit from that. I actually in my bell work, and I was going to talk about this in another slide, but I'll preview it now, I pull bell work examples and questions from the presentations and the examples that I have the kids go through.

Well, I love that you brought that up because you know, we were talking about routines and what classroom routines do you like as a teacher and I was always a bell ringer teacher for sure, a do now teacher. And if you like exit tickets, I can show you where to go to find easy easy exit ticket questions and answers. But so, once we get through this introduction to the material, to the content we need to learn, we've watched the video all the way through or we've clicked through the slides all the way through, we're going to click this button, continue, and watch what happens down here at the very bottom of the screen here. You can see that I've got this yellow bubble currently because that means that oh I haven't finished watching this video yet. But you know once we play the video and we get all the way through to the end, "Now it's your turn," then we can see that the video now has been marked in this teal green and we're going to come back to those colors. So just keep that keep that in mind.

So let's continue on. We've watched our video. We've learned about some tags and now you can do this quick check for understanding as a whole class. You could have students complete this individually. Totally up to you. I think because these are really low stakes checks for understanding, I would love to implement these full class. So, let's do this together. Now, which of the following is a valid HTML tag? Well, we learned in the video that all tags have to have opening brackets and closing brackets and there will be some tag I guess I don't what do I want to say here characters in the middle that have been established many decades ago as the protocols for writing HTML. So, yay we can click that answer, we get it right. We get a little celebration. What does HTML stand for? It is hypertext markup language. Click that answer. Yay, we got it right. And we can submit our quiz.

And we see now in the bottom of our screen. And if I can zoom out and click explore this example. Then we now have marked that quiz check. We have done that one and have moved on now to an example. Okay. So I talked about my personal love of example programs. These are fully coded programs. They already work. And we can see this web page that has been coded by refreshing the page if we need to and clicking if we want to an expanded view and it looks like exactly like a web page. So how cool. We can switch from this block coding environment to a text-based HTML environment by clicking the banner at the top here. Me, I learned HTML with text-based coding, so the blocks throw me off. So, I'm going to stick with text-based HTML here. But for your students who maybe are used to a Scratch-based coding environment or another block-based coding environment, those blocks could be very very helpful. And so this is already finished code. There there isn't an assignment here. But we can see that there there's sometimes some instructions, sometimes little challenges hidden in the instructions here. Like what happens if there isn't an H1 tag, but instead there's an H2 tag. Well, I don't know. We didn't learn that in the video. So let's change this to an H2 tag. And let's refresh our web page. Nope. We can see that the font size changed for this header. And so, example programs are fully coded programs. They're meant for students to try things out, break things. You know, what would happen if I didn't have these brackets here at all and I run the page? Oh, well then I get this weird text here on my website. So, I love these, but I do think they're underutilized in the classroom. Kim, what is your opinion on the example programs?

Yeah, if you don't kind of call attention to it, the kids will be like, "Okay, cool. That works," and move on and so they won't actually play with it. So, I also like to demo. So, again, I was going to talk about this a little bit later, but I code through one of the activities every day in my class. I usually do the one from the previous day's assignment. But this is a perfect time where I kind of explain that too and I can actually go into it and I can lead them to start playing with or like do a demo of how you kind of play around with it just like Stephanie was doing. So, yep.

Yeah. And, you know, get the kids introducing some bugs into the code. Talk about well, yeah, that's that's a bug. We need to fix that, you know, once they've once they've messed something up. It's it's a great conversation piece for sure, but unless you really train your students to to do that experimentation piece, all they have to do technically is click next and then they can move on to the next exercise. So, this is an assignment. It's time to create your first HTML page. Starting with an HTML file, add two sets of H1 tags. Be sure to include both the open tag and closing tag for each inside of the tags. Introduce yourself and say something that you like to do. So we have an example here but when we start we have no code except for these framework tags and we're instructed that we can add our code inside the body tag. And if we paid attention to the video, we know we should properly indent and then start with our tags here. Kim, anything else you want to point out about the text editor here? How do students find this coding environment?

Yeah. So, they enjoy it, especially when it gets more complex and you start having multiple web pages. Being able to see all the different files on the left hand side and switch back and forth is really helpful. I try and encourage my kids to do the text coding rather than the block view. But some kids who someone asked a question about differentiation having kids who we have quite a few English as a second language or third language or fourth language kids and so having the blocks available is really helpful. Or kids who just, you know, struggle struggle with reading comprehension and whatnot and so it's really nice that that is an option that you can do and they can still do all the same coding, they still understand the concepts of what we're doing, but it's just a little less on the the typing side. So I very much enjoy that.

Yeah. And so another thing, another feature of the assignment area here is the docs tab. And so this is where yeah students can go to oh if I forget how to insert an image, you know, what is the tag for inserting an image, I can open up this docs tab, click on images and find that that example code, but it takes some teaching. Kim, how do you get your students relying more on themselves and less on raising their hand to ask you?

Yep. So definitely Docs is huge. I couldn't remember if I wanted to talk about that now or in the future so sorry. But yes, I also encourage them to talk to the people next to them. I just remind them that they're all working on the exact same stuff at the beginning. They have the exact same examples, exact same assignments, the projects things will be a bit different. But I encourage them to ask their partners first. Look in the docs and if you can't figure it out, then work with your partner.

I love that. Yeah. And we we all know from our classroom experiences, it it takes some routine building. It takes some reminders. They're they're not going to remember it's there the first time. So, yeah. All right, if students forget what they're supposed to be doing, they can click on the assignment tab and see the exact instructions they need. There is a grade tab here. And once this passes the autograder or once if you have set this to teacher graded and you've provided a grade to your students they would see it there. In the more tab, there's two things I love pointing out to folks because they are a little bit hidden. The first one is this video option in the more tab drop-down. It actually will bring students to the slides. I don't know why it says video. And I love this because then they can go find that slide that showed them the tag that they're supposed to be using and they can say, "Okay, here's how I build an H1 tag." And it's right there next to their code. Completely underutilized feature. I love that one. The other one is the conversations tab. So, this is where, you know, I'm in my student mode here. I can say I need help and send a message to my teacher. This is especially useful for folks who are teaching asynchronously, folks who are assigning homework, folks who teach in virtual schools because you don't have that opportunity of being right there with your student, right? Kim, do you find students find this feature themselves or do you have to kind of train your students? I guess do do you do you use this feature in your classroom since you are in person with your students?

Yeah. I don't use this much because I'm in person. But because I'm in person, I just float around the classroom while they're working and kind of monitor their progress. We also have a screen viewer program on my computer and so I can kind of see what they're doing. Some students have found that but we don't use that much.

Okay. Yeah. I think I like it and maybe even if I was in person, I would like it because you got five students' hands in the air and you're like we have two minutes till the bell, just conversations tab. I'll get back to you when you know on my prep period or whatever. Like yeah, at least letting them know letting students know it's there is a good one. Uh all right so that is our that's our environment. That's what students see when they are working through these web classes. I'm going to give you all a minute here to go back to your web course that we enrolled you in here and take a peek at these middle school focused web lessons and just play around. Open another video, see what other kinds of activities students might interact with. For example, this one is a YouTube embedded video, but maybe you might find like a clickable notebook somewhere. There's lots of different types of items that students interact with and can learn from in these courses. So, I'm going to give you a minute. Go ahead, attendees. See what you can find in this course where you are a student.

All right. Well, hopefully you've had some time to play and preview some lessons and some course content. So that was the student side of things. I want to flip us over to the teacher side of things. So folks, if you have landed in the student view of the platform, take a look up in the upper left-hand corner, there's a light blue drop-down menu where you can switch back to your teacher view. And I would love to go ahead and flip over to the teacher view now because we've seen what it looks like on the student side, but now I want to get Kim's opinions on some of the resources that we have available to teachers. So we just went through that as a student, the video, the quiz, the example, the exercise, and it looks a little bit different when you view it on the teacher side. And I do want to talk a little bit about lesson plans. Well, first let me back up. Kim, was there anything else you wanted to say? I kind of skipped some of the slides, but wanted to see if there was anything else you wanted to say about the student experience or how you establish routines in your classroom or facilitate lessons in your classroom. What's your best advice?

Yeah. So, I start with a bell work. Part of it was to help me get to know the kids. And then, part of it was also just kind of reinforcing what we learned the previous day and trying to get them to think through some of the topics that we're studying about. Then we would get into the video. If it's a class that benefits from playing the video, I would kind of introduce the topic and then play the video. We would go through the example together and then I'd let them work on the activities on their own. But if it's not a class that would benefit from me playing the video to the class, then I just kind of let them go right there. Sometimes we would do two lessons in a day. And we would always do some kind of exit ticket to kind of well what did we learn about? And while they're working I'm floating around the classroom just making sure that you know one, are they actually working on it, and two, like are they struggling? Because, you know, they may not want to raise their hands or anything, but then I just, you know, hey, you seem to be having some problems with that. Can I take a look? Or, you know, something like that. And as a teacher, and especially as a non-computer science person when I first started, having the solutions available to every single one was huge. So yeah, the the teachers have access to the answers, the students do not. But yeah, very very helpful.

That's a fantastic lead-in because I was I was going towards lesson plans. Before I switch over though, I wanted to ask you about bugs and about productive struggle. And you said that, you know, you walk around, you monitor, you check in with students. We know as experienced computer science teachers, all programmers introduce bugs into their programs. Everybody makes mistakes when they're coding. What does that look like for your students? What does that what does that look like for you? I know with the time pressure, I can't believe you get through two lessons in a day sometimes, that's amazing. With the time pressure to get through so much curriculum sometimes I was I was the teacher who was like, "Oh, let me just give you the answer. I've got five other kids with their hand in the air." I was not a good coach in the classroom. So tell me, what is your students' experience with introducing errors into code? How do you coach them in those moments? What is a typical kid's response to an error in their code?

So, on the first day of school, I tell them that struggling is a part of learning. And that they're going to struggle in the class. I say it in a loving way, I hope. But I just let them know like this is not going to be a piece of cake. You're going to have issues like struggling with this. And so I forgot when I was going through my typical day, after the bell work when I code one of the examples, I actually code that and so I just inherently make mistakes and so they they watch me do that and I go, "Oh, okay. That's weird. Now it's doing this. Okay, you know what? I bet I need to go back and do this." And so I try and talk through my thinking process as much as I can so that they can kind of understand how I'm approaching the problem, how I'm approaching the fact that my code isn't working, stuff like that. On top of that, some of the activities that CodeHS has the kids do is debugging. So the code doesn't work just right off the bat. And so then the kids get used to troubleshooting. And with my bell work questions, sometimes I'll have a what's wrong with my code where I'll have several different examples of what's wrong. And so then the kids kind of help me debug the example as a group. So yeah.

I love all of those ideas for just normalizing it, right? Like it's like everybody's going to happen to everybody. It happens to the the professionals every day. And I I love that it's it's just a normal part of learning for for your students. That's amazing. All right. So, lesson plans, that's where I wanted to land. Okay. Let me put a link in the chat for folks. Again, these knowledge-based article links are are are always available to you. I just wanted to provide them in the chat today so that if there is a particular feature or tool that you're interested in, you can come back after the webinar or, you know, next week and and read up on it a little bit more. Lesson plans, everybody gets the first five free. So, if you're on a free plan, you still get access to some of our lesson plans and handouts for the for the remainder of the semester. They are a pro feature. But Kim was mentioning answer keys and so I wanted to show you what a lesson plan document looks like. Where do I find those answer keys? Where do I get help when I the teacher need it, right? So I am going to hop into our section here and if you have never built a course and a section on the CodeHS platform, we did a webinar yesterday where we walked through step-by-step how to set up a course, how to create sections, and how to roster students. We are not going to cover that today. The focus of this webinar is the the curriculum and the content around web design and development. But if you want to go back and watch that webinar from yesterday, you can do that to get a step-by-step process of how to set up for next school year. You can find those webinars at codehs.com/webinars. But I'm going to go ahead and jump into our web section here and show you what lesson plans look like. So on the left-hand side navigation, we can open the assignments toolbox and then clicking on the assignments app brings us to a full page listing of every single assignment in this course and we can move we can open up expand these menus and then these maroon documents are your lesson plans and for every lesson plan we provide student-facing objectives. And we then you get a preview of the activities that students will engage in on their view of CodeHS for this lesson. And then solution references and problem guides. So problem guides I think are a great tool because not only do you get the answers, you get the code so you can help coach students through their bugs, but you can also find student misconceptions. So, our curriculum team has done a great job of thinking ahead of, you know, what do typical students struggle with in this lesson and highlighting those questions for teachers and providing some comments and coaching for students. And so let's open one of these up here. So you can just see here is the canonical solution code. And then here are those student misconceptions that I mentioned. And sometimes, not in this particular lesson because this coding exercise isn't super difficult, but in our more complex coding assignments, you'll also get an explain this to me video. And this is a curriculum professional from the CodeHS team walking you through step-by-step building the correct code for this assignment. So let's bump back to the lesson plan. Here is where you get those lesson openers and lesson closers. So I was talking about if you like bell ringers, keep your bell ringers. If you like exit tickets, keep your exit tickets. These discussion questions we list with the answers make fantastic quick little bell ringers and exit tickets. We also have those slides here where I said you could modify them to your liking once you get really comfortable with the curriculum. And then the activities are just estimates of the student work on the platform and how an estimate of how long it might take students to complete each of their assignments on the platform. Kim, am I missing anything? What's your favorite thing about the lesson plans?

Um, so I've been a free teacher for pretty much my entire time teaching computer science. So inside the lesson, I don't know if you want to show how you can pull up the specific answer for the specific lesson.

Well, tell me how you navigate to it as a free teacher.

Oh, yeah. So, go to my sections and then classroom sections and then click on the class. You have a few. Yes. And then you can click on one of the students or yourself would work too. And then we can do let's see. What's the writing one there? Nope, not that one. Let's look at number two maybe or yeah, module two. Okay. Go to the last one or yeah, dear diary or yeah, that one. Okay. And then under more there's solution. So this is a specific answer for the specific activity. So if you're helping kids and they say I really am stuck on dear diary, I don't know, you know, what to do or if you go through and say, "All right, you guys were coding dear diary yesterday. I'm going to code it for you today in class after bell work." And so this is where I can go just to make sure that I'm actually doing it correctly if I don't know how to do it or until I feel more comfortable with it. So there is yeah.

Yeah. I appreciate that because yes, you you are correct. Even if you don't have access to all of the lesson plans, you do still as a verified teacher, which is why we ask you when you sign up for a CodeHS account to answer some questions as a teacher. Only verified accounts get access to the solutions that way. So, perfect. Yes.

All right. Want to cover some basics if you are brand new to creating websites and designing websites. Some lingo here. HTML, hypertext markup language, is what we use to create webpage content. So, think about the text on a web page, links, images, list tables, video and audio players. All of that is built with HTML. And so you can kind of see how that shakes out here in this diagram. There are certain protocols that built the internet. And so we still have to follow those protocols even today as HTML, CSS, JavaScript has joined in. Coding languages evolve but we still have to learn some basic rules. And so HTML building the content of web pages is very foundational to learning how to build web pages. CSS is the language we use to style an HTML document. And this is what is really fun for students. But Kim, have you ever had a student that spent a little too much time with their with their HTML before we learn about CSS?

Yeah. And I was going to say, CSS stands for cascading style sheets. And so cascade like a waterfall cascades, the water cascades down. And so it's for how the files are read. So you can make stylistic changes in the HTML code, but then you can also attach a cascading style sheet and then you can have more detailed design choices with that. And so that's what that means. But yes, students have done that or more frequently they'll, you know, do a little bit of the stylistic stuff in HTML and then when we introduce CSS, they go, "Whoa, this is way cooler. This is way better. This is way easier." So yeah.

Yeah. And man, I would definitely have been that student who's like, "Well, I just have to get the right shade of purple for this font and I got to get the margin and padding just right on that." I would have spent so much time in CSS. Yes. And so this is what CSS code looks like. Students can spend a lot of time just customizing away and it's so much fun for them and they can just run with it. There is so much to learn. I would say CSS of the three languages that build websites, CSS is the one that is the most there's there's the most to it there. There's more options. There's so many options. All right. Now, JavaScript is the programming language we use to make websites interactive. So, the buttons, the text boxes, all that good stuff. And it's the one that, you know, might be the toughest for students because it's an actual programming language and there there's a lot to consider. What do you want to say about JavaScript, Kim?

Yeah. So if there are any other languages that you're also teaching or that the kids may have used before, JavaScript is going to do a lot of the same components. But the way we use it here with the HTML, it's to allow interactive aspects for your websites because just blank web pages is kind of boring. But then adding in JavaScript, you can make it so that they can click on it and they can type things and you can make things happen. So JavaScript makes it more cool.

Yeah. And then I think why I said it was more complicated because then you get into the file tree, right? You get in like you have your HTML file, then you have a separate CSS file once you get a little more advanced with the CSS, then you have an extra JavaScript file which has to talk to the HTML, right? So it just adds layers of complication. But we we walk the students through it. Yes. All right. So, some tools that as a web design and development teacher, you definitely want to know about on the CodeHS site. First is codehs.me pages. And I'm going to put a link to another knowledge-based article here in the chat so you can learn more at your leisure. But basically what it is, it's an actual out there on the internet website that students can build. And every CodeHS user has one that they can build via their sandbox. And so to create a web page, you open the sandbox, you click the green edit homepage button, and now you're in the code editor. You have an HTML file, you have a CSS file, you can add a JavaScript file, and make a real real website that is out there. Now, caution because this is a real website that is out there on the internet. And so, you want to make sure that your students understand that there are responsibilities that they have when building web pages. And there are also safety precautions that they have to take because they're building a real website. And so we want to make sure that we're encouraging students, always reminding them to protect their PII. Making sure that they are not sharing photos of themselves. Instead, you know, maybe use a stock photo or use AI to create a photo. Don't share any location information via these pages. So just some, you know, safety reminders and responsibility reminders that we need to make sure students understand if you are using the codehs.me sites. So what can students do with these? They can collaborate on web pages together. They can debug together. They can really internalize UI and UX concepts in real time. They can create final projects or portfolios of their work and practice real-world skills. For example, if you had like a case study where students could collaborate with somebody in your school, a department in your school who maybe needs a website built. So Kim, what are your best practices? What is your advice for utilizing the CodeHS homepages?

So, something that I like to do with my kids is have them create like a portfolio of all the different things that they've learned. And so by using the CodeHS homepage as a portfolio, they can just update it with the new things they've learned as we go on. And so they can, I don't know, kind of see how it changes and becomes more advanced the more they learn. So we do it as a portfolio.

I love that. So I want to show everybody live what that looks like. So the sandbox is located at the top menu across the top of the CodeHS site and we can click on sandbox. And I've already done some some work on my homepage. But this button here, this green edit homepage button here is how you access your codehs.me page. And you know I've got all my file tree over here on the left. I've got my code here in the center and then I can resize. So, you know, I've got mine set for mobile or an actual website. And then I can bump this out in a new tab if I want to. I did actually I think add Yeah, Kim and I were talking about gardening earlier before we started the session. We're both avid gardeners. But you know, I added some photos here, just stock photos again, being careful, and you know made this really interactive and like a real website so students can really take off with it and run it, build multi-page websites. What's the what's the coolest student project you've seen, Kim?

Oh my gosh. They get so creative. One girl did it as part of her college resume. And so she wanted to be an art major and so she did a super cool catalog of all of her art pieces and then descriptions of them and like what she wanted to do and stuff and so that was super cool.

Yeah, that is amazing and probably applicable to a future career as an artist, right? Like you you got to put yourself out there. You got to get your work out there. So I love that. And students can keep all of this too. We do have the ability for students to transfer their CodeHS work to a personal email address upon graduation. And so, yeah, I mean, the portfolio is like a real deal. Love that for students for sure. All right, the last thing I wanted to demo here before we move on to just some general best practice questions with Kim is our brand new feature called Vibe Coding. Again, this is available in the sandbox and there's a a new button you have available and it's well probably maybe not all of you have it available. It's still behind a feature flag, but if you want access to the vibe coding, I would recommend you write into hello@codehs.com or write into our support and request to be added to the beta group. So you are able, you and students would be able to create HTML-based projects. And this really is a moment in time where we can through the use of AI allow students low barriers to entry to coding and these super high ceilings of self-expression and creativity. You do have to enable vibe coding for your students. So that would be a setting you need to turn on once you are in the beta group. But once it's on, you can see exactly what it looks like here on the screen. You and students would be able to interact with our AI tool and build really cool HTML projects and then get into the code and be able to edit it. So that's what I like about it. It is still a teaching tool. Is it AI building? Yes, but you have direct access to the HTML, CSS, and JavaScript and students also can change things once they learn a little bit. So, I think it's a really great educational tool even though it it's AI. So, let's see if I have this on.

I can add in really quickly. So the kids are using generative AI for stuff, but how many of them have thought to have it make a website, you know? So, it's just it's another way that we can show them that, hey, this can be a tool, not just a cheating apparatus. So, yeah, absolutely.

Constructive conversations with students ongoing, right? All right, let's see. Maybe I just opened my pro account where I know I added myself as a beta group user. So, let me just see. Then I didn't see the button. Maybe they're working on it or something. I know, folks. I am so sorry. I wanted to show this to you live, but I checked my other demo account that I know I added to the beta group and didn't see the button. So, I'm sorry. Vibe coding coming soon is where we'll we'll we'll leave that.

All right. So, would love to get some advice from you, Kim. Um, first, thinking about coming into next semester in the fall. I know you just finished. Don't make me think about next year yet. But is there anything unique you do to kind of set up your course or set the tone for students in the first couple weeks of school?

Um, well, before setting up the the tone for the class, I love that you can import directly from Google Classroom because my district pushes Google Classroom and so being able to just import all the kids into the classroom immediately is so nice. So I love that. So, first off, getting set up, phenomenal. Love it. Second of all, to set the tone, I'll usually do some kind of introductory, hey, this is what HTML is activities. And then we kind of jump into the CodeHS course.

Do you find that your students like what kind of experience what kind of CS experience do your students have? Does it vary widely or do your students do they have some coding knowledge coming into your web class?

Yeah, excellent question. So my district has a little tiny bit of tech integration K-12 but in middle school they take a computer science rotation that lasts I think six weeks. So they do hour of code stuff then. And so by the time they get to me, they've done just a tiny bit of coding itself. Our state has just started or added to a graduation requirement, a computer science course. So that's actually the Carol course is what we use in that required course. So this would be after they've taken the required graduation course. So they've had a bit of computer science coding experience.

So yeah, I think that's teacher's biggest fear is that well maybe it's two-part. The students are just beginners. How am I ever going to get them through this course? But then you got that one kid who knows it all, right? And then you're trying to keep up with that kid flying through.

Advice that I would give, if it's okay to move on to the second question, just do the template what CodeHS has. There's a reason why they have put it there and it's good stuff. Maybe your second time through the course, you could say, "Hey, I'd really like to do something like this." And then you can find something else or, you know, we didn't have time for this, so you can remove that part. Don't worry about making any modifications, just your first time through, just go with what they have listed. So that would be my advice.

I can appreciate that advice. When I was in the classroom, I was definitely one of those teachers who was never handed curriculum because of the subjects I taught and I think I would have been mad if somebody had tried to hand me curriculum. But now that I'm on the other side of it and I've had a chance to dive into the research and really understand, teachers spend upwards, according to research, seven hours a week sourcing curricular materials. That's an almost an entire workday and I know there is not a teacher out there who is given a whole day of prep to do that in, right. So yes, I now that I understand the research behind high quality instructional materials, the equity piece that's behind those, I definitely tend to agree with Kim. Like use it straight out of the box with integrity. And I say with integrity because you know your students best. You know where they're going to need some help. You know what's going to interest them. So, yeah, make adjustments to engage your students, make adjustments to scaffold and support your students, but the the product is high quality. And if you stick with a course that matches your state standards, you're going to bring wonderful learning experiences to your students. Love that. And I'll step off my soapbox about hyper. Okay, what strategies have you found are helpful and effective for managing communication when students need help?

So, this is different for me because I'm in person every day with the kids, but while I'm floating around, I try and help or talk to kids at every every chance I get. Sorry. So they're because I didn't want them to I do that because I don't want them to be embarrassed like, "Oh no, she's coming over to talk to me. Everyone's going to know that I'm not understanding." So, I try and make it a point that I talk to as many kids as I can each day so that they don't feel, oh, she's picking on me because I don't understand or something. So I guess that's good. But also bell work has been a big eye-opener into what are these kids understanding, what are they not understanding, and who is understanding and who's not. I have kids put their names on their bell work so that and I grade it. I give them one point a day. So it's not worth much but it is worth something. And so that kind of helps me say, "Oh, this kid got all of those questions wrong. Maybe I should, you know, spend a little extra time."

There was one question Denise said about Python. So my Python course is only a semester also. And so we use Tracy the turtle who's very similar to Carol the dog except a turtle obviously. But I found that very helpful. So CodeHS has some great there's several different Python courses you can choose from. So that's my recommendation.

And Grant's, do students get burnt out through going I guess I haven't quite noticed them getting burnt out with it, but I really do try and switch things up a little bit. So, I mentioned that I will do get to know you type activities or like engineering. I have them so, like there's this cup stacking challenge is just one example that popped into my head. And so, like I'll stop us early from class and like the last 10 minutes of class or so, I'll have them do this challenge where they have to stack cups in a certain design, but they can't touch them with their fingers. They only have a piece of string and a rubber band and stuff like that. And so like I'll I'll do things like that to kind of break up the flow every now and then. I also like before breaks I'll do special things. So we do binary bingo where I have the kids read in binary and then it's just a bingo sheet and I call out like 35 and they have to calculate what it is. I'll go through it with them for the first several and actually I think I do it all of them. But anyways, just kind of things that are related. And for computer science education week, we'll go through like different pioneers in computer science. So, like I I add in a bunch of extra stuff, so I do try and break it up. I guess I haven't really noticed them feeling burned out, but yeah.

A midterm and a final. My district does not do midterms, but we do do finals. And so, I just do big projects. So for example in the web design course, the there is a final with okay I need to go back to I was looking oh project tell a story was what I was going to mention is my favorite from the Picasso course. I love that. I've had students create their own story which is super cool. But the there is a final project in the Picasso course that we use and so you can definitely use that as the final for the class. I like to do the portfolio. So I have them do the final project but it's not actually the final for the class and their portfolio is the final for the class. So yeah, I hope that's helpful.

Yeah, I love those out of the box ideas. And I want to come back and lift up this idea of unplugged activities. It sounds like your students actually spend a lot of time off the computer, which is fantastic. I am a huge advocate of taking computer science off devices because there's so many abstract ideas that come up in computer science and some students need a lot of extra exposure to make those abstract concepts concrete, you know, in in their mind. And there are students who can build code, especially in that drag and drop block coding environment, and make something and have no idea how it works. So when you get the kids unplugged, when you are asking students to speak about their code and explain their code, when you're asking students to write about their code, it is a fantastic check for understanding. I just wanted to reiterate that. I love that idea of of going unplugged and making sure that students are understanding what they're doing. Absolutely.

Yeah. Um and so not necessarily with this with HTML and CSS, but with like Java and JavaScript or Python, I have these unplugged activities with dice and like I don't remember what they're called. Not They're little they're wooden blocks of different shapes and colors. And so like I I've written out code. And by me I mean ChatGPT has written out code examples. And so the kids so like just a quick example that you get the directions say to grab two dice and then you're in a loop and you have to keep rolling until you get 11, until the sum is 11. And so it says like num one plus num two equals sum. And then while sum does not equal 11 roll and so things like that to reinforce concepts. I like to do some stuff like that but again my district's also pushing that. So like we have PD focused on that and have to tell our supervising administrators what we're doing with that. Yeah, that's kind of where that came from. But the kids really enjoy it and it does reinforce concepts and giving them another way to do it really helps reinforce it because I have kids who are like, "Yeah, I understood for loops, but like doing that activity really made me understand for loops, right?"

And I have had kids or we do have an assignment specifically with for loops in my Java class where they do have to explain code. So we do a project and then they have to explain it to me. So, I give them the option to write an essay style, to do a slides presentation, or to record a video or audio where they explain what every single line of code does for me. And I think that's super super important because getting them to explain it back is a further ability. It's just a further skill that they need to have. So, 100%.

Yeah. I never feel more confident once I've taught something, right? I'm like, "Yeah, I know this because I can teach it." I appreciate all these insights, Kim. Thank you so much. Unfortunately, we are running out of time. So, I'm going to really quickly answer Chris's question from the chat and then we will wrap up here. So, he's asking about suggestions on how to get content to certain students who might be interested in it. And if you are a free user, then yes, go ahead, create a section and enroll just the students who might be interested in the web design or the cyber security or the Java. You know, if you are a pro user, we do have a brand new feature we just rolled out where you can make groups for students and then you would be able to assign by groups and individual students. So depending on your situation, there are a couple options on how to get certain content to certain groups.

All right, folks. We're at time. It's been a fantastic and quick 90 minutes. I want to encourage you to stay in contact if you have questions. You will be receiving an email follow-up for this session in which you can view the recording, get a link to the slide deck, you have access to the knowledge base. I've been putting articles throughout our time together to the knowledge base and you can always contact support. We have a fantastic support team. Please stay in contact with us, social media if you have it. Also, we have more PD coming up and I want to encourage you to sign up for additional sessions if you are interested. So, codehs.com/freepd, find more topics for this summer series. Also would love to have your feedback on how this session went for you today. We did try something new this summer with our longer sessions where we are asking our teacher trainers like Kim to come in and just speak on their experience and their stories. And so we'd love to know if this was valuable to you today. And then the last thing of course I want to get you a certificate of completion for attending today. I know that it's summer. Some of you are on summer break and 90 minutes is is nothing to shake a stick at and so we want to make sure that you get recognition for your time here today. We definitely appreciate you coming out spending an afternoon with us learning about everything we have to offer as it relates to web design and development. So click that link for your certificate of completion. Click that link to fill out our survey.

And these are the sessions we have coming up soon. JavaScript will be next week along with AP CSA. Then we take a little bit of a break as we have an all company meetup and we'll come back with Python, CS principles from the college board and also our newest AP course, cyber security. Uh oh gosh, attendance link not working. Jennifer, I will add you via CSV later. I we'll make sure you get a certificate. I apologize that that link is not working. Thank you all so much. And Kim, thank you for sharing everything with us today. I I want to come be in your web class. That's that's what I've learned today. So, thank you all so much. And Denise, I will get that attendance uploaded and make sure that everybody gets a a correct certificate of completion. So, have a great afternoon or day wherever you're joining us from and we'll see you all soon.