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 Event Registration Form

Event Registration Form

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 Sticky Navbar

Welcome to Our Website

Scroll down to see the sticky navbar in action. The navigation bar will remain fixed at the top of the page.

This is a long content section to demonstrate the sticky navigation functionality.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

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 Developer Portfolio

About Me

I am a passionate web developer with expertise in creating modern, responsive web applications.

Skills

Frontend

HTML, CSS, JavaScript, React

Backend

PHP, MySQL, Node.js

Tools

Git, VS Code, Docker

Projects

E - commerce Website

Built with PHP and MySQL

Portfolio Website

Responsive design with CSS Grid

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 Pricing Cards

Choose Your Plan

Basic

$9/month

5 Projects
10GB Storage
Email Support
Basic Analytics

Popular

Pro

$19/month

25 Projects
100GB Storage
Priority Support
Advanced Analytics

Enterprise

$39/month

Unlimited Projects
1TB Storage
24/7 Support
Custom Analytics

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 Registration Form

Registration Form

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 {

الإبلاغ عن إساءة

تفاصيل ال-PDF

معلومات الاتصال

WEB_DESIGN_LAB_MANUAL