WEB DESIGNING LABORATORY LIST OF EXPERIMENTS : 1) Event Registration Form 2) Sticky Navbar 3) Developer Portfolio Page 4) Pricing Card List with CSS Flexbox 5) Registration Form with JavaScript Validation 6) Website with JSON Placeholder 7) PHP CRUD Server 8) User Authentication with PHP and MySQL 9) PHP Form Processing and Cookie Management 10) XML Data Processing with XSL Transformation 11) Dynamic Web Page with DOM Manipulation 12) Responsive Web Application with Modern Features TOTAL: 60 PERIODS 2 TABLE OF CONTENTS S.NO. DATE EXPERIMENT TITLE MARKS SIGN. 1. Event Registration Form 2. Sticky Navbar 3 Developer Portfolio Page 4 Pricing Card List with CSS Flexbox 5 Registration Form with JavaScript Validation 6 Website with JSON Placeholder 7 PHP CRUD S erver 8. User Authentication wi th PHP and MySQL 9 PHP Form Processing and Cookie Management 10. XML Data Processi ng with XSL Transformation 11 Dynamic Web Page with DOM Manipulation 1 2 Responsive Web Application with Modern Features 3 Exp No: 1 Event Registration Form Date: AIM: Design and develop an event registration form using HTML and CSS Algorithm: 1. Create HTML structure with form elements 2. Add input fields for name, email, phone, event selection 3. Reference a separate CSS file for all layout/styling 4. Make the form responsive and neat using only classes/id selectors 5. Add a submit button Note: Use VS Code; create two files: eventform.html and style.css HTML code : eventform.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF - 8"> <meta name="viewport" content="width=device - width, initial - scale=1.0"> <title>Event Registration Form</title> <link rel="stylesheet" href="style.css"> </head> <body> <div class="form - container"> <h2>Event Registration Form</h2> <form> <div class="form - group"> <label>Full Name:</label> <input type="text" name="fullname" required> </div> 4 <div class="form - group"> <label>Email:</label> <input type="email" name="email" required> </div> <div class="form - group"> <label>Phone Number:</label> <input type="tel" name="phone" required> </div> <div class="form - group"> <label>Select Event:</label> <select name="event"> <option value="workshop">Technical Workshop</option> <option value="seminar">Seminar</option> <option value="conference">Conference</option> </select> </div> <button type="submit" class="submit - btn">Register Now</button> </form> </div> </body> </html> CSS CODE: style.css body { font - family: Arial, sans - serif; margin: 20px; background: #f4f4f4; } .form - container { 5 background: white; padding: 30px; border - radius: 8px; max - width: 500px; margin: 0 auto; } .form - group { margin - bottom: 15px; } label { display: block; margin - bottom: 5px; font - weight: bold; } input, select { width: 100%; padding: 10px; border: 1px solid #ddd; border - radius: 4px; } .submit - btn { background: #007bff; color: white; padding: 12px 20px; border: none; border - radius: 4px; cursor: pointer; } 6 OUTPUT: RESULT: 7 Exp No: 2 Sticky Navbar Date: AIM: Develop a sticky navigation bar that remains fixed at the top while scrolling. ALGORITHM: 1. Create HTML navigation structure 2. Link external CSS file 3. Apply CSS position: sticky property in stylesheet 4. Add styling for navigation links in CSS 5. Implement hover effects using CSS Note: Use VS Code for development HTML CODE: Index.html <!DOCTYPE html> <html> <head> <meta charset="UTF - 8"> <meta name="viewport" content="width=device - width, initial - scale=1.0"> <title>Sticky Navbar</title> <link rel="stylesheet" href="style.css"> </head> <body> <div class="navbar"> <a href="#home">Home</a> <a href="#about">About</a> <a href="#services">Services</a> <a href="#portfolio">Portfolio</a> <a href="#contact">Contact</a> </div> <div class="content"> 8 <h1>Welcome to Our Website</h1> <p>Scroll down to see the sticky navbar in action. The navigation bar will remain fixed at the top of the page.</p> <p>This is a long content section to demonstrate the sticky navigation functionality.</p> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p> <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p> <p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p> <p>Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> </div> </body> </html> CSS CODE : Style.css body { margin: 0; font - family: Arial, sans - serif; } .navbar { background - color: #333; overflow: hidden; position: sticky; top: 0; z - index: 1000; } .navbar a { float: left; display: block; color: white; text - align: center; padding: 14px 20px; text - decoration: none; } 9 .navbar a:hover { background - color: #ddd; color: black; } .content { padding: 50px; height: 2000px; background: linear - gradient(45deg, #f0f0f0, #e0e0e0); } h1 { color: #333; } OUTPUT : RESULT: 10 Exp No: 3 Developer Portfolio Page Date: AIM: Create a personal developer portfolio webpage with sections for skills, projects, and contact information ALGORITHM: 1. Design HTML structure with header, about, skills, projects sections 2. Link external CSS file 3. Apply CSS grid/flexbox layout in stylesheet 4. Add responsive design elements using CSS media queries 5. Style with modern CSS properties Note: Use VS Code for development HTML CODE: Index.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF - 8"> <meta name="viewport" content="width=device - width, initial - scale=1.0"> <title>Developer Portfolio</title> <link rel="stylesheet" href="style.css"> </head> <body> <header class="header"> <div class="container"> <h1>John Doe</h1> <h3>Full Stack Developer</h3> <p>Passionate about creating amazing web experiences</p> </div> </header> <section class="section"> <div class="container"> <h2>About Me</h2> <p>I am a passionate web developer with expertise in creating modern, responsive web applications.</p> 11 </div> </section> <section class="section"> <div class="container"> <h2>Skills</h2> <div class="skills - grid"> <div class="skill - card"> <h3>Frontend</h3> <p>HTML, CSS, JavaScript, React</p> </div> <div class="skill - card"> <h3>Backend</h3> <p>PHP, MySQL, Node.js</p> </div> <div class="skill - card"> <h3>Tools</h3> <p>Git, VS Code, Docker</p> </div> </div> </div> </section> <section class="section projects"> <div class="container"> <h2>Projects</h2> <div class="project - card"> <h3>E - commerce Website</h3> <p>Built with PHP and MySQL</p> </div> <div class="project - card"> <h3>Portfolio Website</h3> <p>Responsive design with CSS Grid</p> </div> </div> </section> <footer class="footer"> <div class="container"> <p>Contact: john@example.com</p> </div> </footer> </body> </html> 12 CSS CODE: Styles.css: * { margin: 0; padding: 0; box - sizing: border - box; } body { font - family: Arial, sans - serif; line - height: 1.6; } .header { background: linear - gradient(135deg, #667eea 0%, #764ba2 100%); color: white; text - align: center; padding: 100px 0; } .container { max - width: 1200px; margin: 0 auto; padding: 0 20px; } .section { padding: 60px 0; } h2 { margin - bottom: 30px; color: #333; } .skills - grid { display: grid; grid - template - columns: repeat(auto - fit, minmax(250px, 1fr)); gap: 30px; } .skill - card { background: #f8f9fa; padding: 30px; 13 border - radius: 10px; text - align: center; } .projects { background: #f8f9fa; } .project - card { background: white; padding: 20px; border - radius: 8px; margin - bottom: 20px; } .footer { background: #333; color: white; text - align: center; padding: 20px 0; } OUTPUT: RESULT: 14 Exp No: 4 Pricing Card List with CSS Flexbox Date: AIM: Develop responsive pricing cards using CSS Flexbox layout. ALGORITHM: 1. Create HTML structure for pricing cards 2. Link external CSS file 3. Apply CSS Flexbox for card layout in stylesheet 4. Style individual pricing cards using CSS classes 5. Add hover effects and animations in CSS Note: Use VS Code for CSS Flexbox implementation HTML CODE: index.html <!DOCTYPE html> <html> <head> <meta charset="UTF - 8"> <meta name="viewport" content="width=device - width, initial - scale=1.0"> <title>Pricing Cards</title> <link rel="stylesheet" href="style.css"> </head> <body> <h1 class="main - title">Choose Your Plan</h1> <div class="pricing - container"> <div class="pricing - card"> <h2 class="plan - name">Basic</h2> <div class="price">$9<span class="period">/month</span></div> <ul class="features"> <li>5 Projects</li> <li>10GB Storage</li> 15 <li>Email Support</li> <li>Basic Analytics</li> </ul> <button class="btn">Choose Plan</button> </div> <div class="pricing - card popular"> <div class="badge">Popular</div> <h2 class="plan - name">Pro</h2> <div class="price">$19<span class="period">/month</span></div> <ul class="features"> <li>25 Projects</li> <li>100GB Storage</li> <li>Priority Support</li> <li>Advanced Analytics</li> </ul> <button class="btn">Choose Plan</button> </div> <div class="pricing - card"> <h2 class="plan - name">Enterprise</h2> <div class="price">$39<span class="period">/month</span></div> <ul class="features"> <li>Unlimited Projects</li> <li>1TB Storage</li> <li>24/7 Support</li> <li>Custom Analytics</li> </ul> <button class="btn">Choose Plan</button> </div> </div> </body> </html> CSS CODE: Style.css: body { font - family: Arial, sans - serif; background: #f5f5f5; margin: 0; padding: 40px; 16 } .main - title { text - align: center; color: #333; margin - bottom: 40px; } .pricing - container { display: flex; justify - content: center; gap: 30px; flex - wrap: wrap; } .pricing - card { background: white; border - radius: 15px; padding: 40px 30px; text - align: center; box - shadow: 0 10px 30px rgba(0, 0, 0, 0.1); transition: transform 0.3s; flex: 1; max - width: 300px; position: relative; } .pricing - card:hover { transform: translateY( - 10px); } .popular { border: 3px solid #007bff; } .badge { background: #007bff; color: white; padding: 5px 15px; border - radius: 20px; position: absolute; top: - 15px; left: 50%; transform: translateX( - 50%); } 17 .plan - name { font - size: 24px; color: #333; margin - bottom: 10px; } .price { font - size: 48px; color: #007bff; font - weight: bold; margin: 20px 0; } .period { font - size: 18px; } .features { list - style: none; padding: 0; margin: 20px 0; } .features li { padding: 10px 0; border - bottom: 1px solid #eee; } .btn { background: #007bff; color: white; padding: 15px 30px; border: none; border - radius: 25px; cursor: pointer; font - size: 16px; transition: background 0.3s; } .btn:hover { background: #0056b3; } 18 OUTPUT: RESULT: 19 Exp No: 5 Registration Form with JavaScript Validation Date: AIM: Create a registration form with CSS styling and JavaScript validation displaying error messages ALGORITHM: 1. Create HTML registration form structure 2. Link external CSS file for styling 3. Write JavaScript validation functions in script tag 4. Implement real - time error display using JavaScript 5. Handle form submission with validation Note: Use VS Code for JavaScript development HTML CODE: Index,html <!DOCTYPE html> <html> <head> <meta charset="UTF - 8"> <meta name="viewport" content="width=device - width, initial - scale=1.0"> <title>Registration Form</title> <link rel="stylesheet" href="style.css"> </head> <body> <div class="form - container"> <h2>Registration Form</h2> <form id="registrationForm"> <div class="form - group"> <label>Full Name:</label> <input type="text" id="fullname" name="fullname"> <div class="error" id="nameError">Please enter a valid full name</div> </div> <div class="form - group"> 20 <label>Email:</label> <input type="email" id="email" name="email"> <div class="error" id="emailError">Please enter a valid email address</div> </div> <div class="form - group"> <label>Phone:</label> <input type="tel" id="phone" name="phone"> <div class="error" id="phoneError">Please enter a valid 10 - digit phone number</div> </div> <div class="form - group"> <label>Password:</label> <input type="password" id="password" name="password"> <div class="error" id="passwordError">Password must be at least 8 characters</div> </div> <button type="submit" class="submit - btn">Register</button> </form> </div> <script src="script.js"></script> </body> </html> CSS CODE: Style.css body { font - family: Arial, sans - serif; background: #f4f4f4; padding: 20px; } .form - container { background: white; padding: 40px; border - radius: 10px; max - width: 500px; margin: 0 auto; } .form - group {