Web Development Essentials 1

Welcome to our exciting web development class for high school students! In this class, you’ll learn the fundamental building blocks of a web application, starting with HTML, CSS, and JavaScript to create and style web frontends with interactive elements. We will also introduce web backend development using Python, covering server setup, database interaction, and API creation. Along the way, we’ll explore important topics like security, responsive design, and user experience. You’ll apply your knowledge in a hands-on project, designing and building your own website from scratch with a functional backend. Get ready to unleash your creativity and become a proficient web developer!

Category

High School

Difficulty

Beginner

Technologies

Web, HTML, CSS, JS, Python, Git, VS Code

Format

In-Person

Duration

12 hours

Structure

8 Weekly lessons, 1.5 hours each

SYllabus

COURSE STRUCTURE

Welcome to the first lesson of our web development course! In this lesson, we’ll start by understanding what the Internet is and explore the fundamental elements of a web page. You’ll be introduced to browser developer tools to inspect and debug web pages, and you’ll create your first web page using HTML. We’ll then dive into the client-server architecture, explaining how clients and servers communicate over the web. You’ll also learn about web backends, focusing on how they support the frontend, and explore the 3-tier architecture, which separates the presentation, logic, and data storage layers in web applications.

Ready to dive into some real web code? In this lesson, you’ll learn to set up a web development environment and dive into the basics of HTML and CSS, covering essential web page elements. You’ll explore creating both multi-page and single-page web applications, and build a basic multi-page web app. Additionally, you’ll set up a Python development environment to prepare for backend development.

In this lesson, you’ll deepen your understanding of HTML and CSS, focusing on advanced topics and techniques. You’ll learn how to create basic and complex web page layouts, and you’ll build and publish a more complete web page. We’ll cover web domains, URLs, and the process of publishing your web application. Additionally, you’ll be introduced to web backends using Python, enabling you to create dynamic and interactive web applications.

In this lesson, you’ll explore various computer image formats and how to effectively use images and videos in web pages. You’ll learn to add multimedia elements to enhance your web pages, utilize image editing tools, and revise web page images for optimal presentation. You will also learn about source control and using Git to store and collaborate on your source code. By the end of this lesson, you’ll be familiar with incorporating and managing multimedia content to create engaging and visually appealing web pages.

In this lesson, you’ll get an introduction to JavaScript and the Document Object Model (DOM), learning how to use basic JavaScript within a web page. We’ll cover creating and handling forms, including adding a submission form to your site. Additionally, you’ll be introduced to the Flask package for Python web development and the MySQL.connector package for database interactions. This comprehensive lesson will provide you with the foundational knowledge to enhance web pages with interactive elements and connect them to backend services.

In this lesson, you’ll be introduced to the cloud and its importance. We’ll then delve into responsive design principles to ensure your websites look great on all devices. You’ll go deeper into HTML, CSS, and JavaScript, understanding how to create and style more complex web pages while adding interactivity. Finally, you’ll apply these skills by working on a responsive site, solidifying your knowledge through hands-on practice.

In this lesson, we conclude the theoretical part of the course with a practical discussion and hands-on exericses focused on creating simple backends using Python and Flask. We’ll start with the basics of setting up a backend in Python, followed by building simple APIs with Flask to handle web requests. We’ll then progress to more advanced backend concepts, solidifying your understanding and skills in Python backend development. After recapping on the course materials and a final Q&A, we will shift to teamwork time and a project progress checkpoint, allowing the hackathon teams to plan, design and code their final project, and to prepare for their final presentation. The teams are encouraged to leverage the face-time with the trainer for feedback and advice.

The last lesson of this course will provide the students with a concluding trainer-guided slot to wrap up and perfect their team projects, leading to the final section where each team will be presenting and demonstrating its completed project to the entire class and invited guests. These final presentations will highlight the collaborative work of the students, will provide an excellent opportunity to obtain friendly feedback, and will allow them to celebrate their hard work and showcase the skills they gained throughout the course.