Session 3: Coding Adventures

Explore GitHub, programming languages, and create your own projects

Session Overview

Welcome to Session 3!

In this session, we'll explore the world of coding more deeply. We'll learn about GitHub - a platform for sharing code, discover different programming languages, and create our own interactive web projects using HTML and CSS!

Learning Objectives

  • Understand what GitHub is and how it's used
  • Learn about different programming languages and their uses
  • Create interactive web pages using HTML and CSS
  • Build a simple project to showcase your skills
  • Learn basic version control concepts

Introduction (10 minutes)

Review from Session 2 and introduce today's coding adventure

GitHub & Version Control (25 minutes)

Discover how programmers share and collaborate on code

Programming Languages Tour (20 minutes)

Explore different programming languages and their purposes

Break (10 minutes)

Time to stretch and ask questions

HTML & CSS Workshop (35 minutes)

Create interactive web pages with styling

Project Showcase (10 minutes)

Share your creations and get inspiration

Wrap-up and Preview (10 minutes)

Review what we've learned and preview Session 4

Activities

GitHub & Version Control

GitHub logo

What is GitHub?

GitHub is a platform where programmers store, share, and collaborate on code. It's like a social network for coders, where people can work together on projects!

GitHub uses something called version control, which keeps track of all changes made to code over time. This means you can:

  • See who made what changes and when
  • Go back to previous versions if something breaks
  • Work on different parts of a project at the same time
  • Share your code with others around the world

How GitHub Works

1
Create a Repository

A repository (or "repo") is a project folder that contains all your files and their history.

2
Make Changes to Files

Write code, add images, or create documents in your repository.

3
Commit Your Changes

Save your changes with a message explaining what you did.

4
Push to GitHub

Upload your commits to GitHub so others can see them.

5
Collaborate with Others

Others can suggest changes, report bugs, or add new features.

Activity: GitHub Explorer

Let's explore some cool projects on GitHub!

  1. Visit beginner-friendly projects on GitHub
  2. Look at a project's README file to understand what it does
  3. Find a project that interests you
  4. Explore its code structure and files

Extra Challenge:

Create your own GitHub account (with parent/guardian permission) and start a simple repository!

Explore All Activities

Programming Languages

What are Programming Languages?

Programming languages are special languages that humans use to give instructions to computers. Each language has its own syntax (grammar rules) and is designed for different purposes.

Just like human languages (English, Spanish, Chinese, etc.), there are many different programming languages. Each one has strengths and weaknesses, making them better for certain tasks.

Popular Programming Languages

Python logo

Python

Difficulty: Easy

Best for: Beginners, data science, AI

Fun fact: Named after Monty Python!

HTML/CSS logo

HTML & CSS

Difficulty: Easy

Best for: Websites, web apps

Fun fact: Creates everything you see on the web!

JavaScript logo

JavaScript

Difficulty: Medium

Best for: Interactive websites, games

Fun fact: Not related to Java!

Scratch logo

Scratch

Difficulty: Very Easy

Best for: Learning concepts, animations

Fun fact: Uses blocks instead of text!

Choosing the Right Language

If you want to make... Consider using...
Websites HTML, CSS, JavaScript
Games Scratch, Python, JavaScript
Mobile Apps Swift (iOS), Kotlin (Android)
Data Analysis Python, R
Robots Python, C++

Activity: Language Matchmaker

What do you want to create with code? Think about your interests and what you'd like to build. Then, identify which programming language would be best to learn!

Try Coding Challenges

HTML & CSS Workshop

HTML & CSS: The Building Blocks of the Web

HTML (HyperText Markup Language) provides the structure of web pages, while CSS (Cascading Style Sheets) makes them look good!

Think of it like building a house:

  • HTML is like the foundation and walls - it gives structure
  • CSS is like the paint, furniture, and decorations - it adds style

HTML Basics - Creating Structure

<!DOCTYPE html>
<html>
<head>
    <title>My Web Page</title>
</head>
<body>
    <h1>Welcome to My Page!</h1>
    <p>This is a paragraph of text.</p>
    <img src="picture.jpg" alt="A cool picture">
    <ul>
        <li>List item 1</li>
        <li>List item 2</li>
    </ul>
    <a href="https://example.com">Click here!</a>
</body>
</html>

CSS Basics - Adding Style

/* This is CSS code */
body {
    background-color: #f0f0f0;
    font-family: Arial, sans-serif;
}

h1 {
    color: blue;
    text-align: center;
}

p {
    font-size: 16px;
    line-height: 1.5;
}

img {
    border: 2px solid black;
    border-radius: 10px;
}

a {
    color: green;
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

Interactive HTML & CSS Playground

Let's create a fun personal web page!

HTML/CSS Editor
<!-- Type your HTML code here --> <h1>My Awesome Page</h1> <p>This is my first web page! I'm learning to code.</p> <style> /* Type your CSS code here */ h1 { color: purple; } </style>
Preview

My Awesome Page

This is my first web page! I'm learning to code.

HTML/CSS Challenge:

Can you add the following to your page?

  • A list of your favorite hobbies
  • A colorful background
  • A larger font size for paragraphs
  • A border around some elements
Open Full HTML Playground

Coding Projects

Bringing It All Together

Now it's time to apply what you've learned by creating your own coding projects! Here are some ideas to get you started:

Personal Web Page

Create a web page about yourself, your interests, or a topic you love using HTML and CSS.

Skills used: HTML, CSS

Difficulty: Beginner

Start This Project

Interactive Quiz

Build a quiz about a topic you know well, with questions and answers.

Skills used: HTML, CSS, JavaScript basics

Difficulty: Intermediate

Start This Project

Digital Pet

Create a simple virtual pet that you can feed and play with.

Skills used: HTML, CSS, JavaScript

Difficulty: Intermediate

Start This Project

Story Adventure

Build a choose-your-own-adventure story with multiple paths.

Skills used: HTML links

Difficulty: Beginner

Start This Project

Sharing Your Projects

Once you've created something amazing, you might want to share it with others! Here are some ways to do that:

  • Post your code on GitHub
  • Share screenshots with friends and family
  • Ask for feedback from other coders
  • Keep improving your project with new features
View Project Gallery

Resources

Additional Learning Materials

GitHub Logo

GitHub Skills

Interactive GitHub tutorials

 W3Schools Logo

HTML Tutorial

Complete guide to HTML

 W3Schools Logo

CSS Tutorial

Learn CSS step-by-step

 Scratch Logo

Scratch

Visual programming for beginners

Interactive Activities

Coming Up Next

Session 4: AI Exploration

In our final session, we'll explore the exciting world of Artificial Intelligence and how tools like GitHub Copilot can help us code!

  • Understand what AI is and how it works
  • Explore ChatGPT and similar AI tools
  • Learn how GitHub Copilot helps programmers
  • Create projects with AI assistance
  • Discuss AI ethics and responsible use
GitHub Copilot visualization
Preview Session 4