ACES
Discord

Ultimate Web Development Workshop

Duration: one week

Learn to build interactive websites using HTML, CSS, and JavaScript through hands-on sessions.

thumbnail

Overview The Ultimate Web Development Workshop is a 7-day hands-on training program starting from Jestha 15, specially designed for beginners eager to explore the world of website creation. This workshop introduces participants to the core technologies of the web — HTML, CSS, and JavaScript — through practical sessions and interactive projects.

Each day focuses on essential web development concepts, combining theory with real-world application. From structuring webpages to styling them beautifully and making them interactive, participants will gain the skills and confidence needed to start building their own websites.

Whether you're completely new or looking to sharpen your skills, this workshop is your first step toward becoming a web developer.

Date: Jestha 15 – Jestha 22 Time: 6:00 – 8:00 AM Venue: Purwanchal Campus, Room No. 213 Registration Fee: Rs. 100 (ACES & EXCESS card holders), Rs. 200 (others)

HTML CSS JS - Syllabus

🟥 HTML Syllabus

📌 Fundamentals

  • What is HTML and how browsers interpret it
  • Structure of an HTML document (<!DOCTYPE html>, <html>, <head>, <body>)
  • Basic elements:
    • Headings (<h1> to <h6>)
    • Paragraphs (<p>)
    • Links (<a href="">)
    • Lists (<ul>, <ol>, <li>)
    • Line breaks and horizontal rules (<br>, <hr>)
    • Buttons (<button>)
  • Grouping content:
    • <div>, <span>

📌 Multimedia Tags

  • Images: <img src="" alt="">
  • Audio: <audio controls src="">
  • Video: <video controls src="">
  • Attributes: controls, autoplay, loop, muted

📌 Document Structure & Semantics

  • Semantic tags: <header>, <nav>, <main>, <section>, <article>, <footer>
  • Nesting and indentation best practices
  • HTML comments

📌 Forms and Inputs

  • Form structure: <form>, action, method
  • Input fields: <input> with type attributes (text, email, password, checkbox, radio, etc.)
  • Other form elements: <textarea>, <select>, <option>, <label>
  • Submit and reset buttons

🟦 CSS Syllabus

📌 Fundamentals

  • What is CSS – Introduction to styling web pages.
  • CSS Syntax – Selectors, properties, and values.
  • Ways to Apply CSS – Inline, internal, external.
  • Basic Text and Color Styling – Fonts, colors, backgrounds, alignment.

📌 Selectors and Specificity

  • Types of Selectors – Element, class, ID, group, and combined.
  • Pseudo-classes – :hover, :focus, :first-child, etc.
  • Specificity Basics – How CSS rules are prioritized.

📌 Box Model

  • Box Components – Content, padding, border, margin.
  • Sizing – width, height, box-sizing, and spacing behavior.

📌 Layout and Positioning

  • Display – Block, inline, inline-block, none.
  • Flexbox – One-dimensional layout system for aligning items in rows or columns.
  • Grid – Two-dimensional layout system using rows and columns.
  • Positioning – static, relative, absolute, fixed, sticky.
  • z-index – Layering elements on top of each other.

📌 Responsive Design

  • Media Queries – Adapting styles for different screen sizes.
  • Viewport Units – Using %, vh, vw for fluid layouts.
  • Mobile-First Approach – Designing for smaller screens first.

🟨 JavaScript Syllabus

📌 Introduction to JavaScript

  • What is JavaScript – Role in making web pages interactive.
  • How to Add JS to HTML – Using the <script> tag, internal and external scripts.

📌 Variables and Data Types

  • Declaring Variables – var, let, const and their differences.
  • Data Types – Strings, numbers, booleans, null, undefined, arrays, objects.

📌 Operators

  • Arithmetic Operators – +, , , /, %.
  • Comparison Operators – ==, ===, !=, !==, >, <.
  • Logical Operators – &&, ||, !.

📌 Control Flow

  • Conditional Statements – if, else if, else, switch.
  • Loops – for, while, do...while.

📌 Functions

  • Function Declaration and Execution – Creating reusable code blocks.
  • Parameters and Return Values – Passing data and getting results.
  • Arrow Functions – Shorter syntax for functions.

📌 Arrays and Objects

  • Working with Arrays – Create, access, update elements.
  • Array Methods – push, pop, shift, unshift, forEach, map.
  • Objects – Key-value pairs, accessing and updating properties.

📌 DOM Manipulation

  • Selecting Elements – getElementById, querySelector, etc.
  • Modifying Content – .innerText, .innerHTML, .textContent.
  • Styling with JS – Changing CSS via .style.
  • Creating and Removing Elements – createElement, appendChild, removeChild.

📌 Events and Interactivity

  • Event Listeners – click, submit, input, keydown, etc.
  • Event Object – Understanding and using event data.
  • Form Handling – Accessing form data, simple validation.

✅ Final Project: ……..