Not Logged In

Education is not to be finished

You have been logged out. Please log in to continue.

Notifications

No notifications yet

We'll notify you when something new arrives

Intro to Web Development

Name: Intro to Web Development
Price: 95 USD

In today's digital world, websites are the cornerstone of online presence. Whether it's a personal portfolio, a business platform, or a fun online game, understanding web development empowers you to create engaging experiences for users. This course is designed to equip you with the fundamental skills to build web applications from scratch. You'll learn the core languages of web development: HTML, CSS, and JavaScript, the building blocks that bring websites to life. But this course goes beyond just learning syntax. We'll focus on practical application, guiding you through the process of creating a web app from concept to completion.

4.9 star reviewsout of total 93

Next Batch Starting

9 November, 2026

Mon & Wed

1:00 PM - 2:00 PM

4 Months

1 Hour Class

Medium

Online - Zoom

Why take this course?

Web development is one of the fastest-growing and most sought-after skills in today's digital world. Mastering these skills opens doors to exciting career opportunities across various industries, from building websites for startups to shaping the future of web technology.

This course will equip you with the tools and techniques to build interactive websites, and web applications, learn about version control, and industry standards, and push the boundaries of what's possible on the web.

Prerequisites:

To maximize the benefits of this course, students must be age 12 and above or have the qualifications mentioned below.
Qualification of Scratch Level 3, Python Level 1, Unity Level 1, experience with browsing/hand-on experience with command-line interface in games, basics of computational thinking, or having any other programming or non-programming language experience that involves technical abilities, problem-solving, graphics, and interaction from the user.
A typing speed of 20 Words Per Minute (WPM) is recommended. For practice, you can visit the following website:
- monkeytype.com

Course Outline

4 Month Plan

1) Create, Deploy & Manage a Web App

a) Getting started with HTML, CSS & JavaScript

Build a personalized portfolio webpage with HTML and CSS in Notepad, unlocking creativity and foundational web development skills. [cite: 13]
Enhance your portfolio with JavaScript, adding interactive features while mastering dynamic content and problem-solving. [cite: 14]

b) Getting started with Visual Studio Code

Students will get hands-on experience with HTML, CSS & JavaScript files using Visual Studio Code software. [cite: 15]
Students will be able to create a heading, attach a font to the heading, and align the font and grid layout for the TIC TAC TOE game. [cite: 16]

c) Event Listeners & GitHub

Students will learn about event listeners to proceed with the TIC TAC TOE game. [cite: 17]
Students will understand version control through GitHub, follow industry standards, and proceed with the game's reset status and update the PlayerText. [cite: 18]

d) reset function & Netlify

Students will be able to update the Reset Function and figure out how to create the player status section exactly as it was before we updated it to PlayerWinning status
Students will create an account on Netify and host their app on it or on other free server subdomain names. [cite: 19, 20]

2) Mastering Responsiveness

a) Free Server Subdomains & Responsive Layout

Students will explore conventional options for buying a domain name and troubleshooting the app using a free subdomain on a Netlify website. [cite: 20]
Students will be able to make the grid and button responsive through media queries with aspect ratio. [cite: 21]

b) Responsive UI & Design

Students will create a responsive layout for a Tic Tac Toe game by placing it inside a new div, centering the grid, and adding a Scratch project below it without using absolute positioning. [cite: 22]
Students will enhance grid responsiveness by using media queries to adjust square sizes for smaller screens, focusing on height and specific pixel sizes. [cite: 23]

c) Pixels & Aspect Ratio

Create responsive designs for a button and Scratch project by using media queries to adjust the font size and iframe dimensions based on the viewport. [cite: 23]
Students will organize the website by creating separate pages for the homepage, a student achievements section, and a personal introduction page, while implementing linked CSS styling for a cohesive look. [cite: 24]

d) Research & Development for Personal Portfolio

Students will design engaging website pages, including a tic-tac-toe game and a personal project showcase, while exploring creative web layouts. [cite: 25]
Students will research inspiring portfolio designs and create their own personalized webpage, mastering headings, layouts, and size options. [cite: 26]

3) Interactive Objects

a) Perfecting RickRoll

Students will design the "About Me" section with appropriate tags for headings and paragraphs, choosing between grid and flexbox for a two-column layout that aligns text and images horizontally. [cite: 27]
Students will explore methods to embed a video on the webpage, including creating a modal that plays the video when triggered by a reset button. [cite: 28]

b) Refine Modal Styling

Students will implement a CSS fade-in effect for the modal by utilizing the opacity property and creating an active class that transitions opacity from 0 to 1 upon interaction. [cite: 29]
Students will utilize the pointer-events property to manage interactions between the modal and grid squares, ensuring clicks are directed appropriately while centering the video container within the modal. [cite: 30]

c) Can't Touch This

Students will learn to add a background image to the homepage and reorganize the project into smaller files while learning about z-index to manage element stacking. [cite: 31]
Students will add an audio tag with multiple sources for compatibility, ensure user interaction before playback, and use Boolean logic to control audio playback while keeping the volume low for a better user experience. [cite: 32]

d) Text Intersection

Students will experiment with text elements, highlighting or increasing opacity only for those intersecting with the canvas position, using getBoundingClientRect() to determine their boundaries. [cite: 33]
Evaluate the mouse position relative to the text elements to ensure the canvas appears only when necessary for the profile text. [cite: 34]

4) Node.JS & GitHub

a) Lumos

Students will create a sequence of audio plays triggered by mouseover events using setIntervals and an isPlaying flag to manage playback while moving the button around the screen during audio playback. [cite: 35]
Students will utilize z-index to layer the profile text above the glow effect, ensuring the glow only appears when the mouse hovers over the profile. [cite: 36]

b) Downloading & Installing Node.JS

Students will download and Install Node.JS to create a simple QR code. [cite: 37]
Students will search and install an express package to create a basic webpage using Node.JS. [cite: 38]

c) Functionality with Node.js and GitHub

Students will generate simple QR codes while exploring practical applications of Node.js. [cite: 39]
Students will create a basic webpage using Node.js, mastering foundational backend concepts. [cite: 40]

d) Deploy Projects

Students will modify Node.js code to prepare it for deployment on the web. [cite: 41]
Students will upload and deploy their projects using GitHub, showcasing their web development skills. [cite: 42]

Learning Outcomes

Schedule

Up Coming

Times shown in

Starts 9 Nov

Ends 28 Feb 2027

Mon & Wed

1:00 PM - 2:00 PM

Batch 416

5 seats left

Taught by
Mishal Ahmed

Fees: $95.00/month

Enroll now

Ongoing

No ongoing batches at the moment

Check back soon or explore upcoming batches above.

Book a free session

Teachers

Mishal Ahmed
Teaching Intro to Web Development
Joined: November, 2024
2 years and 0 months
We build simple websites from day one. Students learn how pages are structured with HTML and styled using CSS by actually creating and editing their own work. No copy-paste learning - just clear concepts, small projects, and steady progress. By the end, they’re comfortable making and adjusting their own webpages without needing step-by-step instructions.

Shuja ul Hasan
Teaching Intro to Web Development
Joined: October, 2020
6 years and 1 months
I've seen plenty of courses that focus a lot more on the technical part of web development, throwing jargons at students like frontend, backend, apis, or database schemas. But I believe the web is less about technical silos and more about building a home for your ideas. In this course, we don't just learn to code; we learn how to architect an experience. We treat the browser like a canvas and the code like our tools to build something that the whole world can interact with from a single link.

Projects

Scratch

Ali Ebrahim khan

3D MAZE

View Profile

Scratch

Maaz Uppal

Ping pong game

View Profile

Muhammad Ibraheem Ali

11 years old

Pirate adventure game

View Profile

See all projects

Why People Choose the STEM Educators

See all reviews

Find out if this course is suitable for your childSchedule your pre-assessment for free!

Book a free session

Think your kid is ready to take the course!
Enroll now and get started

Frequently Asked Questions

To enroll in any of our programming courses, your child must first attend a STEM Explorer Session. This helps us understand your child’s learning profile and ensures they are placed in a course that matches their skills and interests. After the session, we will share available time slots and course details and guide you through the next steps for enrollment.

Book a 30-minute STEM Explorer Session to find out the most suitable course for your child.

Learning to code helps build essential 21st-century skills such as critical thinking, problem-solving, and creativity. It fosters logical reasoning, boosts confidence in using technology, and prepares children for a future increasingly shaped by digital tools.

While we highly encourage punctuality and regular attendance, we understand that emergencies can happen. In such a case, parents must inform the instructor before the class and request a recording. In this way, the instructor can arrange a recording if informed in advance, as we do not usually record classes.

View All FAQs