Welcome to the awesome world of web development! This course is designed to teach you the skills you need to create your own cool websites. Let's dive in!
- Age Group: 11-15 years old
- Session Length: 1 hour per session
- Main Goal: Build a basic website that you can share with friends and family!
Get ready to add a touch of magic to your websites! In this module, we'll learn JavaScript, the coding language that makes websites interactive and fun, and use GitHub Pages to publish them.
-
JavaScript Events: Make Your Website Respond!
- Learn how to make your website react to clicks, hovers, and other actions.
- Mini-Project: Add a button that changes color when hovered over.
-
JavaScript and the DOM: Changing Things on the Fly!
- Discover how to modify your website’s content with JavaScript.
- Mini-Project: Change the text content of a paragraph when a button is clicked.
-
Project 4: Clickable Image Gallery!
- Create a gallery where images change when you click on them.
- Use JavaScript to change the main image when a thumbnail is clicked.
-
JavaScript Decisions: If/Else Statements!
- Learn how to make your website make choices based on conditions.
- Mini-Project: Create a simple quiz with multiple-choice questions and provide feedback based on the answer.
-
JavaScript Loops: Repeat After Me!
- Learn about
forloops andwhileloops. - Mini-Project: Create a script that counts from 1 to 10 and displays the numbers on the webpage.
- Learn about
-
JavaScript Functions: Reusable Magic Spells!
- Learn how to create reusable code blocks for your website.
- Mini-Project: Create a function that calculates the area of a rectangle and use it to display results on the webpage.
-
Project 5: Guess the Number Game!
- Create a fun game where visitors try to guess a secret number.
- Use loops and conditionals to provide feedback to the user (e.g., "Too high!" or "Too low!").
-
JavaScript and Forms: Do More with User Input!
- Process information that visitors enter into forms on your website.
- Mini-Project: Create a simple contact form and display a thank-you message after submission.
-
JavaScript Animations: Make Things Move!
- Add fun animations to your website to make it more engaging.
- Mini-Project: Animate a button to change size or move across the screen when clicked.
-
JavaScript Timers: Tick Tock!
- Make things happen on your website after a certain amount of time.
- Mini-Project: Create a countdown timer or a simple clock that displays the current time.
-
JavaScript and APIs: Get Data from the Web!
- Learn how to fetch information from other websites and use it on your own.
- Mini-Project: Display a random joke on your webpage.
-
GitHub Pages: Your Website’s Home!
- Learn how to create a free website using GitHub Pages.
- Milestone: Publish a basic HTML page to GitHub Pages.
-
Git: Your Website’s Time Machine!
- Learn how to save different versions of your website and go back in time if needed.
- Milestone: Commit changes to your project and roll back to a previous version.
-
GitHub: Collaborating on Code!
- Understand the basics of GitHub for version control and collaboration.
- Milestone: Collaborate with a partner on a small project using GitHub.
-
GitHub Pages: Sharing Your Creation!
- Publish your website on GitHub Pages so everyone can see it.
- Milestone: Update your published website with new content and features.
-
Module 2 Challenge!
- Show off your JavaScript skills with a final project that demonstrates all you’ve learned.
- Milestone: Incorporate multiple JavaScript concepts and publish the final project on GitHub Pages.
Are you excited? We are! Each session will be packed with learning and fun activities to help you become a web developer extraordinaire.
Happy Coding! 💻