Beginner
Web Adventures for kids: From HTML, CSS to JavaScript and Databases
In a world increasingly dominated by AI-generated content, the demand for skilled web developers has never been higher. While GenAI can create, it can't replace the ingenuity and hands-on expertise of a web developer who truly understands the craft. That's where you come in.
Don't let the AI wave pass you by. Equip yourself with the skills that will set you apart in an automated world. Our web programming course is more than just education—it's your ticket to a future-proof career. Enroll now and start building the web, one line of code at a time!
Welcome to Web Adventures for kids, a exciting and interactive course designed to introduce young learners to the world of web development! In this course, students will embark on a journey to create their own websites and web applications, learning essential programming skills along the way. From HTML and CSS to JavaScript, databases, and popular web frameworks, this course provides a comprehensive foundation in web programming.
What Will You Learn?
- HTML & CSS: Discover how to build and style beautiful web pages using HTML for structure and CSS for design.
- JavaScript: Dive into the world of programming with JavaScript, where you'll learn to create interactive features and dynamic content.
- Web Frameworks: Explore powerful tools like Flask and React to build robust applications quickly and efficiently.
- Databases: Understand how to store and retrieve data using databases like MongoDB, making your applications data-driven.
- Version Control: Learn how to manage your code and collaborate with others using Git and GitHub.
Course Highlights
- Hands-On Learning: Each week includes engaging activities and projects where students can apply what they've learned in real-world scenarios.
- Creative Expression: Encourage creativity by allowing students to design and personalize their own web projects, from websites to games and apps.
- Problem-Solving Skills: Develop critical thinking and problem-solving abilities as students tackle challenges and debug their code.
- Collaborative Projects: Work in teams to build projects, fostering collaboration and communication skills while making new friends.
- Capstone Project: Showcase your skills with a final project where students can create a complete web application, demonstrating everything they’ve learned throughout the course.
Benefits of Learning Web Programming
- In-Demand Skills: The digital world is rapidly evolving, and web development skills are highly sought after in today's job market.
- Foundation for Future Learning: This course lays the groundwork for further studies in computer science and technology, opening doors to advanced topics in programming, game development, and more.
- Empowerment Through Technology: Learning to code gives kids the tools to bring their ideas to life, empowering them to create their own digital experiences.
- Fun and Engaging Environment: With interactive lessons, games, and challenges, students will enjoy the learning process and develop a passion for technology.
Join us for an adventure in web programming and unlock the potential to create amazing online experiences! Whether you're a complete beginner or have some experience, this course is designed to be fun, informative, and inspiring. Let's build the web together!
Curriculum
- 8 Sections
- 122 Lessons
- 18 Quizzes
- 30h Duration
Introduction to the course
3 Lessons
- Course Logistics
- To Parents
- Syllabus of Web Adventure course, and What you will learn
What is Internet, how it works?
12 Lessons
- What is the Internet?
- What is Local area network ( LAN) , what is Wide Area network ( WAN )
- Network diagram : home network, corperate network
- OSI 7 layer and TCP/IP
- How Ethernet works?
- How IP packet send within Local area network
- How IP packets are sent between two LANs, how routing works?
- Useful network commands
- How DNS works?
- What is firewall
- Application Protocols
- TLS, HTTPS, and Encryption
HTML - Foundations of Web Development
5 Lessons3 Quizzes
- Introduction to the Web Deveopment
- Sample HTTP header and content
- HTML Basics and development tools
- Homework1: Simple HTML using vscode
- Common HTML Elements
- Home work 2: introduction of yourself
- HTML forms
- homework: design a survey form
CSS - Beautify your web
10 Lessons3 Quizzes
- Introduction to CSS (Cascading Style Sheets) Syntax
- Homework basic css
- CSS examples
- CSS examples - 2 ( transformation, animation, position)
- Homework: css animation
- Homework CSS animation review
- CSS layout: flexbox
- CSS grid ( for layout)
- Advanced CSS
- Homework : advanced CSS
- CSS frameworks
- Tailwind CSS
- From design to css
Javascript - Make the web dynamic
29 Lessons6 Quizzes
- Introduction to JavaScript in Web Development
- JavaScript Fundamentals
- Advanced Topic: const reference or to variable
- Homework: write a factorial function in javascript and show output using console.log
- Advanced Javascripts : arrow function, ===, ... (spread/merging/rest) syntax/grammer
- Advanced Topic: reduce, map, foreach etc in Javascript
- Advanced Topic: this and new for function
- Advanced topics: Understanding lexical scope for arrow function and this in a regular function
- Javascript plain object
- JavaScript an Object-Oriented Language
- Advanced topics: difference between plain objects and classes/objects
- DOM Manipulation
- Advanced Topic: global objects in browers: document, window, navigator, history
- JavaScript Events
- Advanced Topic: Named Function and Arrow function , and anonymous function
- Advanced : how to list all event.target properties
- HOMEWORK Event Handling - Respond to Input Changes
- HTML Canvas, and javascript animation
- Add audio to html from javascript
- Add video in html/javascript
- Write a simple game: Guess the Number!
- Game: catch falling objects
- Javascript games , art: p5.js
- HOMEWORK: use p5.js to check boundary of a moving ball
- HOMEWORK: draw circle, rectange, triangle,
- Advanced Topic: keyboard in javascript
- Introduction to Asynchronous JavaScript
- Advanced: Understanding about promise(), resolve(), reject(), then(), catch()
- Advanced topic: async and parallel
- Local Storage and State Management
- Working with Cookies in JavaScript
- Advanced: server side cookie
- Advanced topic: cookie and modern web framework
- Advanced Topic: three.js
- Advanced Topic: Babylon.js
Back-end (Server side) Web programming
18 Lessons2 Quizzes
- Introduction to Version Control
- Introduction to git
- Git in VSCode
- How to use github
- Enable github copilot in vscode
- Enable GitHub Pages on a Repository ( for easy access, your own simple web host)
- Advanced Topic: what is 0t ed25519 mean?
- Python for Web Development ( flask)
- Homework : write a beautify letter in html/css and use flask to serve it
- JSON Introduction
- Flask Jsonify
- Flask ( server side) file structure
- Use Flask to handle HTTP get/post methods
- Design a form to collect information about student who are interested in USACO
- Understanding HTTP GET and POST and How Browsers Interact with Web Servers
- Working with APIs and JSON in JavaScript
- CORS (Cross-Origin Resource Sharing)
- Project Week
- Project Presentations
- Simple Web Page Examples
Advanced Web Development: Databases
19 Lessons2 Quizzes
- Introduction to Databases
- SQLite Installation
- Some sqlite tools
- SQL Basics
- SQLite Cheat Sheet
- How to use SQLite3 Editor
- Advanced topic: SQLite3 Transactions
- Advanced topis: SQLite3 Triggers
- Advanced SQL Concepts: A Comprehensive Guide
- Database Normalization: 1/2/3 Normal Form History
- Database Normalization 1st Normal Form (1NF)
- Normalization 2nd Normal Form (2NF)?
- Database Normalization 3NF
- Database Normalization Boyce-Codd Normal Form (BCNF)
- HOMEWORK: design db for student, course, score
- Scenario: A Student-CourScenario: A Student-Course-Instructor Systemse-Instructor System
- Database Normalization : 4/5 NF
- Database Normalization and Performance Tuning in SQLite
- Introduction to MongoDB
- Connecting Node.js with MongoDB
- Design a db for online training platform for who are interested in USACO training
Advanced Web Development: Full-Stack Applications
26 Lessons2 Quizzes
- Introduction to SQLAlchemy
- Advanced topic: many_to_one, one_to_many relationship in SQLAlchemy
- Advanced topic:What is relationship in SQLAlchemy?
- Advanced Topic: backref and cascades
- Adanced topic: when to use secondary table, where to use association_proxy?
- Advanced topic: What does session.query(Post, User).join(User).all() do?
- Advanced Topic: sqlakchemy support other databases
- Homework: design todo list using sqlalchemy
- Flask + SQLAlchemy Blog System
- User Authentication and Sessions with Flask
- Advanced topic: where is session data stored?
- Flask session using server-side session
- Homework: project, a web app: todo list with user login/logout
- Introduction to Django ( MVC framework)
- Integrating Python with Databases
- API Development with Flask
- User Authentication
- SQLite in flask/python
- React.js Tutorial
- Connecting React with Flask
- Introduction to a Web Framework (React)
- Introduction to Node.js
- Advanced Flask Concepts
- React.js
- React.js in the Next.js Framework
- Advanced React
- Express.js for Building Servers
- Final Project Demo/showoff
5 out of 5
Jan 1, 2025 @ 4:01 pm
Best class ever. Highly recommend.
Very well structured and easy-to-follow course for kids, instructor’s explanations were very engaging and practical!
You must be logged in to submit a review.
Related Courses
USACO fundemntal: Introduction to Algorithm I
Basic Algorithms
Easy to understand
Tailed for USACO
0m
0
0
173
