hytechcamps / building-websites

Building Websites with HTML & CSS

In this workshop, students will explore the inner workings of the World Wide Web, and then create websites of their own. They will use HTML to add text and pictures to their pages, and CSS to update fonts, colors, and more. By the end of the workshop, they will have gained a basic understanding of web development, and each student will have a totally unique website of their own design.

Student Content

Student-facing content is available at hytechcamps.github.io.

Agenda

Here are some general guidelines for the overall flow of the camp:

Activity	Time
Icebreaker	30m
Presentation	15m
Code-Along	30m
Break	10m
Customization	10m
Sharing Sites	10m
Blooket	10m
Conclusion	5m

Tips

Here are some tips to ensure a successful run:

• Before the camp, read through this lesson plan thoroughly
• During the camp, ask the students questions as often as possible
  • Ask for their names, hobbies, movies they've seen, colors to use, fonts... anything!
  • Ask for suggestions about what to type next
  • Poll them to see what they know, or what they'd like to do
• Make sure to turn off notifications for Teams, Outlook, etc
• Make sure to zoom in properly on code or other smaller parts of the presenting screen
• Encourage students to make their own choices in the code
  • The more they personalize their websites, the more fun they tend to have!
• Take it slow at first, and always check to see how the students are progressing
  • Don't trust them to tell you; make sure to actually have an assistant look at their screens and give the go-ahead
  • Give students time to catch up before moving too far ahead, but...
  • Don't stall too long on any one part

Camp Outline

The entirety of the camp flows through the PowerPoint Presentation.

Icebreaker

Have students create a color scheme using coolors, and introduce themselves along with their colors.

Generation

Follow the guide to introduce the activity. There are a few tools to help the generation process. Note that students will be able to use the colors they generate during the activity if desired.

Submission

After a few minutes, students should submit their color schemes using the form linked on the camp homepage. View responses in the spreadsheet; make sure to filter by the current date and room.

Show and Tell

Go through the responses, and call on each student. They should introduce themselves by sharing their name, grade, school, and color inspiration.

Presentation

After students have warmed up with the icebreaker, it's time for the presentation portion of the PowerPoint. These slides contain a brief introduction to HTML and CSS, and there are talking points in the slide notes.

Code-Along

The next few slides introduce the code-along activity. Start by briefly explaining Glitch as an online platform for creating and sharing websites. It is totally free, and no accounts are required.

Next, have students open the starter project linked from the camp homepage. Make sure they properly open the preview, and are able to see it update by changing the code and clicking the Refresh button.

From there, follow the code-along instructions to show the students how to build their own websites!

Customization

Give students some time to add more to their websites. There are a bunch of things they can try by following the guide.

Site Sharing

Encourage the students to share the websites they've built with the room. They can share them through this form.

Click here to view submissions.

Blooket: Formative Assessment

Blooket is a fun formative assessment tool that's similar to Kahoot, but more game-based. There are a variety of game modes where the students compete against each other in different ways. Answering questions correctly helps them achieve more success in each game.

For a Blooket guide with screenshots, click here

An account is required to host the game; here are some credentials you can use:

• Username: techoutinst
• Password: Tech0utreach

When setting up the game, try to time it so that it ends just a couple minutes before the camp ends. Note that it will likely take 2-3 minutes for all the students to join the game, so a game time limit of 7 minutes might end up taking about 10 minutes.

1. Go to the Blooket Login Page
2. Enter the credentials above
3. Once logged into Blooket, go to the question set
4. Click the Host button
5. Select the Fishing Frenzy game mode (or another requested mode), and click the Host Game button
6. Adjust the time as needed, and click the Host Now button
7. Instruct students to go to play.blooket.com, enter the Game ID and a nickname, and join the game
8. Once all students have joined, click the Start button

From there, the students will work on their own, answering questions and trying to win the game!

Conclusion

Make sure to close out the camp on a strong, positive note of encouragement. Here are some key points to hit:

• Thank the students for participating
• Encourage them to continue learning about coding on their own
• Tell them they can reach us at [email protected] if they have any questions or would like any guidance
• Send them on their way!