Scribd
Upload
17 views43 pages

Web Progrmming Assignment.

Uploaded by

Afreen Bash
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
17 views43 pages

Web Progrmming Assignment.

Uploaded by

Afreen Bash
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 43

BACHELORS IN INFORMATION TECHNOLOGY

(WITH HONORS)

SEM VI
MAY 2024

< CBWP2203 >


WEB PROGRAMMING

NAME: AFREEN BASHIR


LEARNING CENTRE: INTERNATIONAL COLLEGE OF LAW, BUSINESS
ADMINISTRATION AND TECHNOLOGY, AJMAN, U.A.E.
INDEX.

S.NO. CONTENTS. PAGE NO.

1. PROPOSAL. 3

2. WEBSITE CODES AND SCREENSHOTS.

QUESTION – 1 HOMEPAGE 4 – 10
ABOUT US PAGE 11 – 13
COURSES PAGE 14 – 17
TESTIMONIALS PAGE 18 – 20
CONTACT US PAGE. 21 – 23
DEVELOPER PAGE. 24 – 25
QUESTION – 2 RESGISTER PAGE. 26 – 29

3. CODING FOR VALIDATION FORM. 30

4. CODING FOR CSS STYLING. 31 – 40

5. ADDITIONAL EXPLANATION. 41

6. ZIP FILE LINK. 42

7. REFERENCE. 43

2
PROPOSAL.
The development of an extensive and user-friendly website for FutureSkills Training Institute is
described in this proposal. The website attempts to give the institute's commitment to excellent
professional development and education a vibrant and educational online presence.

Objectives:

• Improve online presence: To draw in prospective students, make a website that is both
aesthetically pleasing and simple to use.
• Provide necessary information: Ensure that all pertinent information about the institute,
courses, and services is easily accessible by providing comprehensive information.
• Optimize the User Experience: Create an intuitive user interface to facilitate interaction
and navigation.
• Encourage Registration: Put in place a productive system that makes it easy for potential
students to register.

Website Structure:

• Home: A welcoming homepage featuring a banner, course highlights, media section, value
proposition, and a footer.
• About Us: Detailed information about the institute's mission, history, and accreditation.
• Courses: A catalog of all available courses, including descriptions, durations, fees, and
prerequisites.
• Testimonials: Student testimonials showcasing the success stories and experiences of past
students.
• Contact Us: Contact information, including a form for inquiries and a map for location
details.
• Register: A registration page with a form for prospective students to sign up for courses.
• Developer: Information about the website developer, including educational background
and contact details for inquiries.

Structure and Elements:

• Website design: Make sure the website is aesthetically pleasing and easily navigable
across all platforms, such as smartphones, tablets, and PCs, by implementing responsive
design.
• Simple Navigation: To make it simple to access the various website areas, create a menu
that is both clear and straightforward to use.
• Visual Appeal: Make use of a contemporary layout, expert color palettes, excellent photos,
and captivating multimedia material.
• Content Management: For simple updates and upkeep, include an intuitive content
management system (CMS).

The FutureSkills Training Institute's proposed website will be a vital resource for expanding the
organization's online presence, offering vital details, and streamlining student registrations.
FutureSkills Training Institute will be in a better position to draw in and assist its students by
making an investment in a cutting-edge, user-friendly website, which will ultimately contribute to
the institute's expansion and success.

3
WEBSITE CODES AND SCREENSHOTS:
(QUESTION – 1 )

HOMEPAGE:
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>FutureSkills Training</title>
<link rel="stylesheet" href="style.css">

</head>
<body>
<header>
<div class="container">
<div class="logo">
<img src="logo.png" alt="FutureSkills Logo" class="logo-img">
<span class="logo-text">FutureSkills Training</span>
</div>
<nav>
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="about.html">About Us</a></li>
<li><a href="courses.html">Courses</a></li>
<li><a href="testimonials.html">Testimonials</a></li>
<li><a href="contact.html">Contact Us</a></li>
<li><a href="register.html">Register</a></li>
</ul>
</nav>
</div>
</header>

<main>
<section id="home" class="banner">
<div class="container">
</div>
</section>

4
<section id="featured-courses" class="section">
<div class="container">
<h2>Featured Courses</h2>
<div class="course-grid">
<div class="course-item">
<h3>Blockchain Technology</h3>
<p>Explore blockchain fundamentals, decentralized networks, and
cryptocurrency mechanics. Understand real-world applications in finance and supply chain.
Learn about blockchain architecture, smart contracts, and latest developments. Perfect for
beginners and professionals to stay ahead in tech.</p>
<p><strong>Duration:</strong> 4 weeks</p>
<p><strong>Fees:</strong> AED 4000</p>
<a href="courses.html" class="button">Learn More</a>
</div>
<div class="course-item">
<h3>Cybersecurity & Cloud Computing</h3>
<p>Cybersecurity and Cloud Computing Course

Master the essentials of cybersecurity, including threat analysis and


protective measures. Discover cloud computing principles, from infrastructure to service
models. Learn to safeguard systems and deploy applications on leading platforms like AWS
and Azure. Perfect for those seeking to enhance their digital security and cloud technology
skills.</p>
<p><strong>Duration:</strong> 6 weeks</p>
<p><strong>Fees:</strong> AED 5500</p>
<a href="courses.html" class="button">Learn More</a>
</div>
</div>
</div>
</section>

<section id="media" class="section">


<div class="container">
<h2>Media Section</h2>
<div class="media-grid">
<div class="media-item">
<img src="students_attending.png" alt="Training Image">
<p>Engaged minds at work: Students delving into the latest insights during a
dynamic lecture.</p>
<img src="lecturer.png" alt="Training image 2">
<p>Inspiring Minds: A dedicated lecturer guiding students through a
transformative learning experience at our institute.</p>
</div>
<div class="media-item">
<video controls>
<source src="!_Futureskills.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
<p>Discover the Future: An enlightening talk by FutureSkills Training on
empowering education and innovative learning pathways</p>
</div>
5
</div>
</div>
</section>

<section id="value-prop" class="section">


<div class="container">
<h2>Value Proposition</h2>
<p>At FutureSkills Training Institute, we empower students with <strong>cutting-
edge knowledge and practical skills</strong> essential for thriving in today’s dynamic job
market. Our <strong>comprehensive curriculum</strong>, <strong>expert
instructors</strong>, and <strong>hands-on training</strong> ensure that you are job-
ready upon completion. We provide <strong>personalized learning experiences</strong>,
<strong>state-of-the-art facilities</strong>, and a <strong>supportive
community</strong>, making us the perfect choice for your educational journey.</p>
</div>
</section>

<section id="why-choose-us" class="section">


<div class="container">
<h2>Why You Should Choose Us?</h2>
<ul>
<li><strong>Expert Faculty:</strong> Learn from industry professionals with
extensive experience and a passion for teaching.</li>
<li><strong>Hands-On Training:</strong> Gain practical experience through
real-world projects and interactive labs.</li>
<li><strong>Comprehensive Curriculum:</strong> Our courses cover the latest
trends and technologies, ensuring you stay ahead in your career.</li>
<li><strong>Flexible Learning:</strong> Choose from various learning formats,
including in-person, online, and hybrid options to fit your schedule.</li>
<li><strong>Career Support:</strong> Benefit from our career services,
including resume building, interview preparation, and job placement assistance.</li>
</ul>
</div>
</section>

<section id="course-recommendations" class="section">


<div class="container">
<h2>Course Recommendations</h2>
<p>We offer a diverse range of courses tailored to meet the demands of today’s job
market:</p>
<ul>
<li><strong>Blockchain Technology:</strong> Understand decentralized
networks and the mechanics of cryptocurrency.</li>
<li><strong>Cybersecurity:</strong> Learn to safeguard systems and data
against cyber threats.</li>
<li><strong>Cloud Computing:</strong> Master cloud infrastructure and service
models, and learn to deploy applications on leading platforms like AWS and Azure.</li>
<li><strong>Data Science:</strong> Dive into data analysis, machine learning,
and data visualization techniques.</li>

6
<li><strong>Artificial Intelligence:</strong> Explore the principles of AI,
from neural networks to natural language processing.</li>
</ul>
</div>
</section>

<section id="prerequisites-learning-methodologies" class="section">


<div class="container">

<h2>Prerequisites and Learning Methodologies</h2>


<p>Our courses are designed to cater to both beginners and advanced
learners:</p>
<ul>
<li><strong>Prerequisites:</strong> Depending on the course, some basic
knowledge of programming or IT fundamentals might be required. Specific
prerequisites are listed in each course description.</li>
<li><strong>Learning Methodologies:</strong> We employ a blend of
theoretical instruction, practical exercises, group projects, and case studies. Our learning
approach is interactive and student-centered, fostering collaboration and critical
thinking.</li>
<li><strong>Assessment:</strong> Continuous assessment through quizzes,
assignments, and project work ensures you are comprehending and applying what you
learn effectively.</li>
</ul>
<p>Join FutureSkills Training Institute and transform your career with skills
that matter!</p>
</div>
</section>

</main>

<footer>
<div class="container">
<p>&copy; 2024 FutureSkills Training. All rights reserved.</p>
</div>
</footer>
</body>
</html>

7
ATTACHMENTS:

8
9
• The homepage of the FutureSkills Training Institute's website is thoughtfully structured to
welcome visitors and provide them with essential information about the institute.
• The top of the page features the institute's logo alongside its name, "FutureSkills Training,"
providing clear branding. The navigation bar allows easy access to seven main pages:
Home, About Us, Courses, Testimonials, Contact Us, Register, and Developer. This ensures
that visitors can quickly find the information they need.
• A prominent hero image or banner visually represents the institute and creates an
engaging first impression. The banner effectively highlights the essence and values of the
institute.
• The homepage highlights two main courses offered by the institute. This section provides
a brief overview of these courses, encouraging visitors to explore further.
• Media section showcases various media related to the institute, such as photos and videos,
providing insights into the institute's environment and activities.
• The value proposition section outlines the advantages of registering for the courses
provided by the institute. It emphasizes the unique benefits and opportunities available to
students.
• The footer at the bottom of the page includes copyright information, ensuring that the
content is legally protected and providing a professional touch.

By presenting these sections in a clear and visually appealing manner, the homepage
effectively communicates the key aspects of the FutureSkills Training Institute,
encouraging visitors to explore the website further and consider enrolling in its courses.

10
ABOUT US PAGE:
CODE:

about.html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>About Us - FutureSkills Training</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<header>
<div class="container">
<div class="logo">
<img src="logo.png" alt="FutureSkills Logo" class="logo-img">
<span class="logo-text">FutureSkills Training</span>
</div>
<nav>
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="about.html">About Us</a></li>
<li><a href="courses.html">Courses</a></li>
<li><a href="testimonials.html">Testimonials</a></li>
<li><a href="contact.html">Contact Us</a></li>
<li><a href="register.html">Register</a></li>
</ul>
</nav>
</div>
</header>

<main>
<section id="about" class="section">
<img src="about_us.png" alt="">
<div class="container">
<h2>About Us</h2>
<p>Welcome to FutureSkills Training Institute, your gateway to cutting-edge
education and professional development. At FutureSkills, we believe in empowering
individuals with the knowledge and skills necessary to thrive in today's dynamic job
market. At FutureSkills, we prioritize student success. Our approach blends innovative
teaching methodologies with state-of-the-art facilities, creating a dynamic learning
environment that fosters collaboration and growth. Whether you're starting your career
journey or aiming to advance in your field, FutureSkills Training Institute is here to support
your educational aspirations.</p>
<h3>Our Mission</h3>
<p>Our mission is to provide high-quality education that combines theoretical
learning with practical application. We are committed to equipping our students with the
expertise needed to excel in their careers and make meaningful contributions to their
industries.</p>
11
<h3>History</h3>
<p>Established with a vision to redefine education, FutureSkills Training Institute was
founded in 1997 by visionary educators dedicated to bridging the gap between academic
learning and industry demands. From its inception, our institute has been committed to
empowering students with practical knowledge and skills essential for success in today's
competitive job market. Over the years, we have grown into a premier institution known for
our innovative curriculum, expert faculty, and commitment to student excellence.</p>
<h3>Accreditation</h3>
<p>FutureSkills Training Institute is proud to be accredited by CAA (Commission
for Academic Accreditation), ensuring that our programs meet rigorous standards of quality
and academic rigor. Accreditation from MOE (Ministry Of Education) signifies our
commitment to delivering education that meets or exceeds industry benchmarks and
prepares students for professional success. We continually uphold these standards through
ongoing evaluation and enhancement of our programs and services. </p>
</div>
</section>
</main>

<footer>
<div class="container">
<p>&copy; 2024 FutureSkills Training. All rights reserved.</p>
</div>
</footer>
</body>
</html>

ATTACHMENTS:

12
• The FutureSkills Training Institute's website provides a thorough and organized overview
of the organization's goals, core principles, background, and accreditation on its "About Us"
page. The purpose of this website is to provide readers with a thorough overview of
FutureSkills and the fundamental components that set it apart as a premier provider of
professional development and education.
• The page opens with a warm welcome to FutureSkills Training Institute. It emphasizes the
institute's commitment to cutting-edge education and professional development. The
message highlights the belief in empowering individuals with the necessary knowledge and
skills to succeed in today’s dynamic job market.
• It emphasizes the institute's mission to combine theoretical learning with practical
application, ensuring students gain the expertise needed to excel in their careers.
• Founded in 1997, FutureSkills Training Institute has a rich history of bridging the gap
between academic learning and industry demands.
• The page highlights the institute's accreditation by the Commission for Academic
Accreditation (CAA) and the Ministry of Education (MOE), ensuring high standards of
quality and academic rigor.

With state-of-the-art facilities and innovative teaching methodologies, FutureSkills is


committed to fostering a dynamic learning environment that supports student success.

13
COURSES PAGE:

CODE:

courses.html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Course Catalog - FutureSkills Training Institute</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<header>
<div class="container">
<div class="logo">
<img src="logo.png" alt="FutureSkills Logo" class="logo-img">
<span class="logo-text">FutureSkills Training</span>
</div>
<nav>
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="about.html">About Us</a></li>
<li><a href="courses.html">Courses</a></li>
<li><a href="testimonials.html">Testimonials</a></li>
<li><a href="contact.html">Contact Us</a></li>
<li><a href="register.html">Register</a></li>
</ul>
</nav>
</div>
</header>

<main>
<section id="course-catalog" class="section">
<div class="container">
<h2>Course Catalog</h2>
<div class="course-grid">
<div class="course-item">
<h3>Blockchain Technology</h3>
<p><strong>Duration:</strong> 4 weeks</p>
<p><strong>Fees:</strong> AED 4000</p>
<p><strong>Prerequisites:</strong> Basic understanding of computer
networks and cryptography.</p>
</div>
<div class="course-item">
<h3>Software Development Program</h3>
<p><strong>Duration:</strong> 6 weeks</p>
<p><strong>Fees:</strong> AED 5000</p>
<p><strong>Prerequisites:</strong> Basic knowledge of programming.</p>
</div>
14
<div class="course-item">
<h3>Hardware Programming Course</h3>
<p><strong>Duration:</strong> 5 weeks</p>
<p><strong>Fees:</strong> AED 4500</p>
<p><strong>Prerequisites:</strong> Understanding of basic electronics.</p>
</div>
<div class="course-item">
<h3>Ethical Hacking</h3>
<p><strong>Duration:</strong> 6 weeks</p>
<p><strong>Fees:</strong> AED 5500</p>
<p><strong>Prerequisites:</strong> Basic knowledge of networking and
programming.</p>
</div>
<div class="course-item">
<h3>Information Technology Specialist Program</h3>
<p><strong>Duration:</strong> 8 weeks</p>
<p><strong>Fees:</strong> AED 6000</p>
<p><strong>Prerequisites:</strong> None.</p>
</div>
<div class="course-item">
<h3>Cybersecurity and Cloud Computing</h3>
<p><strong>Duration:</strong> 6 weeks</p>
<p><strong>Fees:</strong> AED 5500</p>
<p><strong>Prerequisites:</strong> Basic understanding of IT
infrastructure.</p>
</div>
<div class="course-item">
<h3>Artificial Intelligence Program</h3>
<p><strong>Duration:</strong> 8 weeks</p>
<p><strong>Fees:</strong> AED 7000</p>
<p><strong>Prerequisites:</strong> Basic knowledge of programming and
mathematics.</p>
</div>
<div class="course-item">
<h3>AI and Robotics Development</h3>
<p><strong>Duration:</strong> 10 weeks</p>
<p><strong>Fees:</strong> AED 8000</p>
<p><strong>Prerequisites:</strong> Basic knowledge of AI and robotics.</p>
</div>
<div class="course-item">
<h3>Computer Networking Course</h3>
<p><strong>Duration:</strong> 5 weeks</p>
<p><strong>Fees:</strong> AED 4000</p>
<p><strong>Prerequisites:</strong> Basic understanding of networking
concepts.</p>
</div>
<div class="course-item">
<h3>Web Development Course</h3>
<p><strong>Duration:</strong> 6 weeks</p>
<p><strong>Fees:</strong> AED 5000</p>
<p><strong>Prerequisites:</strong> Basic knowledge of HTML and CSS.</p>
</div>
15
<div class="course-item">
<h3>System Operation and Technician Program</h3>

<p><strong>Duration:</strong> 6 weeks</p>
<p><strong>Fees:</strong> AED 5500</p>
<p><strong>Prerequisites:</strong> None.</p>
</div>
<div class="course-item">
<h3>Data Analytics Program</h3>
<p><strong>Duration:</strong> 8 weeks</p>
<p><strong>Fees:</strong> AED 7000</p>
<p><strong>Prerequisites:</strong> Basic understanding of SQL.</p>
</div>
</div>
</div>
</section>
</main>

<footer>
<div class="container">
<p>&copy; 2024 FutureSkills Training. All rights reserved.</p>
</div>
</footer>
</body>
</html>

ATTACHMENTS:

16
• The "Courses" page of the FutureSkills Training Institute's website offers a detailed catalog
of the diverse educational programs available.
• Each course listing includes comprehensive information such as duration, fees,
prerequisites, and a brief description. The page showcases a wide range of subjects, from
Blockchain Technology and Software Development to Ethical Hacking and Artificial
Intelligence, catering to various interests and career goals.

Designed to meet the demands of the modern job market, these courses emphasize both
theoretical knowledge and practical skills, preparing students for success in their
respective fields.

17
TESTIMONIALS PAGE:
CODE:

testimonials.html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Testimonials - FutureSkills Training</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<header>
<div class="container">
<div class="logo">
<img src="logo.png" alt="FutureSkills Logo" class="logo-img">
<span class="logo-text">FutureSkills Training</span>
</div>
<nav>
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="about.html">About Us</a></li>
<li><a href="courses.html">Courses</a></li>
<li><a href="testimonials.html">Testimonials</a></li>
<li><a href="contact.html">Contact Us</a></li>
<li><a href="register.html">Register</a></li>
</ul>
</nav>
</div>
</header>

<main>
<section id="testimonials" class="section">
<div class="container">
<h2>What Our Students Say</h2>
<div class="testimonial">
<img src="testimonial_1.png" alt="Student 1">
<p>"The courses at FutureSkills Training have given me the skills I need to
advance in my career. The instructors are knowledgeable and supportive."</p>
<h3>Ahmed Mansoor</h3>
<div class="student-info">Blockchain Technology</div>
</div>
<div class="testimonial">
<img src="testimonial_2.png" alt="Student 2">
<p>"The learning environment is amazing. I have gained a lot of practical
knowledge and hands-on experience."</p>
<h3>Rashid Makhtoum</h3>
<div class="student-info">Cybersecurity and Cloud Computing</div>
</div>
18
<div class="testimonial">
<img src="testimonial_3.png" alt="Student 3">
<p>"FutureSkills Training has equipped me with the necessary skills to excel in
the tech industry. I highly recommend their courses."</p>
<h3>Naomi James</h3>
<div class="student-info">Artificial Intelligence Program</div>
</div>
</div>
</section>
</main>

<footer>
<div class="container">
<p>&copy; 2024 FutureSkills Training. All rights reserved.</p>
</div>
</footer>
</body>
</html>

ATTACHMENTS:

19
• FutureSkills Training Institute's "Testimonials" page exhibits students' heartfelt reviews
and experiences. The beneficial effects of the courses on their professional development
and personal improvement are highlighted in this section.
• It offers potential students information about the knowledgeable faculty, the encouraging
learning environment, and the practical application of the skills acquired at FutureSkills
through a range of testimonials.

The testimonies showcase their dedication to providing top-notch instruction as well as the
varied and outstanding alumni's success stories.

20
CONTACT US PAGE:
CODE:

contact.html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Contact Us - FutureSkills Training</title>
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-
awesome/5.15.4/css/all.min.css">
</head>
<body>
<header>
<div class="container">
<div class="logo">
<img src="logo.png" alt="FutureSkills Logo" class="logo-img">
<span class="logo-text">FutureSkills Training</span>
</div>
<nav>
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="about.html">About Us</a></li>
<li><a href="courses.html">Courses</a></li>
<li><a href="testimonials.html">Testimonials</a></li>
<li><a href="contact.html">Contact Us</a></li>
<li><a href="register.html">Register</a></li>
</ul>
</nav>
</div>
</header>

<main>
<section id="contact-info" class="section">
<div class="container">
<h2>Contact Information</h2>
<ul>
<li><strong>Address:</strong> Al Fahidi St, Dubai, United Arab Emirates</li>
<li><strong>Phone:</strong> +971 4 123 4567</li>
<li><strong>WhatsApp Us On:</strong> +971 50 123 4567</li>
<li><strong>Email:</strong> [email protected]</li>
</ul>
<div class="social-media">
<a href="https://www.facebook.com/futureskills" target="_blank"><i class="fab
fa-facebook-f"></i></a>
<a href="https://www.twitter.com/futureskills" target="_blank"><i class="fab
fa-twitter"></i></a>

21
<a href="https://www.linkedin.com/futureskills" target="_blank"><i class="fab fa-linkedin-
in"></i></a>
</div>
</div>
</section>

<section id="map" class="section">


<div class="container">
<h2>Location</h2>
<div class="map-responsive">
<iframe
src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d57725.2172794962
8!2d55.27610120976644!3d25.20484947210161!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f1
3.1!3m3!1m2!1s0x3e5f5c9f8c0e5eb7%3A0x1fb59c76080e5a40!2sAl%20Fahidi%20St%2C
%20Dubai%2C%20United%20Arab%20Emirates!5e0!3m2!1sen!2sus!4v1625751972541!
5m2!1sen!2sus" width="600" height="450" frameborder="0" style="border:0;"
allowfullscreen="" aria-hidden="false" tabindex="0"></iframe>
</div>
</div>
</section>
</main>

<footer>
<div class="container">
<p>&copy; 2024 FutureSkills Training. All rights reserved.</p>
</div>
</footer>
</body>
</html>

ATTACHMENTS:

22
• The "Contact Us" page of FutureSkills Training Institute is designed to provide
comprehensive contact information for prospective and current students.
• It includes the actual address of the institute, its phone number, email address, and an easy-
to-use form for questions and comments.
• To make it easier to find the institute, the page also has an interactive map.
• This area highlights the institute's commitment to timely and approachable communication
by making sure that anyone with queries about registration, courses, or other programs
may get in touch with the support team with ease.

23
DEVELOPER PAGE:
CODE:

developer.html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>About the Developer - FutureSkills Training</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<header>
<div class="container">
<div class="logo">
<img src="logo.png" alt="FutureSkills Logo" class="logo-img">
<span class="logo-text">FutureSkills Training</span>
</div>
<nav>
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="about.html">About Us</a></li>
<li><a href="courses.html">Courses</a></li>
<li><a href="testimonials.html">Testimonials</a></li>
<li><a href="contact.html">Contact Us</a></li>
<li><a href="register.html">Register</a></li>
<li><a href="developer.html">Developer</a></li>
</ul>
</nav>
</div>
</header>

<main>
<section id="developer-info" class="section">
<div class="container">
<h2>About the Developer</h2>
<p><strong>Name:</strong> Afreen Bashir</p>
<p><strong>Education:</strong> Bachelor's in Information Technology (with
honors) from Open University Malaysia</p>
<p><strong>Contact:</strong> <a
href="mailto:[email protected]">[email protected]</a></p>
<p><strong>Location:</strong> Al Wahda St, Sharjah, United Arab Emirates</p>
<p>If you have any enquiries related to the website, please feel free to contact the
developer via the email address provided above.</p>
</div>
</section>
</main>

<footer>
24
<div class="container">
<p>&copy; 2024 FutureSkills Training. All rights reserved.</p>
</div>
</footer>
</body>
</html>

ATTACHMENTS:

• The "Developer" page of FutureSkills Training Institute provides information about the
individual responsible for the website's creation.
• It provides information about the developer's educational history, emphasizing their
pursuit of an Information Technology Bachelor's degree. The page also provides contact
details, such as a residence and an email address, for any questions pertaining to the
website.

The institute's dedication to open communication and transparency is emphasized on this


page.

25
(QUESTION – 2 )

REGISTER PAGE:

CODE:

Register.html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Register - FutureSkills Training</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<header>
<div class="container">
<div class="logo">
<img src="logo.png" alt="FutureSkills Logo" class="logo-img">
<span class="logo-text">FutureSkills Training</span>
</div>
<nav>
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="about.html">About Us</a></li>
<li><a href="courses.html">Courses</a></li>
<li><a href="testimonials.html">Testimonials</a></li>
<li><a href="contact.html">Contact Us</a></li>
<li><a href="register.html">Register</a></li>
<li><a href="developer.html">Developer</a></li>
</ul>
</nav>
</div>
</header>

<main>
<section id="register-form" class="section">
<div class="container">
<h2>ADMISSION ENQUIRY FORM</h2>
<form onsubmit="validateForm(event)">
<div class="form-group">
<label for="full-name">Full Name:</label>
<input type="text" id="full-name" name="full-name" placeholder="Enter Your
Name" required>
</div>
<div class="form-group">
<label for="email">Email:</label>

26
<input type="email" id="email" name="email" placeholder="Enter Correct
Email Format" required>
</div>
<div class="form-group">
<label for="course">Interested Course:</label>
<select id="course" name="course" required>
<option value="" selected disabled>Select Your Interested Course</option>
<option value="Blockchain Technology">Blockchain Technology</option>
<option value="Software Development Program">Software Development
Program</option>
<option value="Hardware Programming Course">Hardware Programming
Course</option>
<option value="Ethical Hacking">Ethical Hacking</option>
<option value="Information Technology Specialist Program">Information
Technology Specialist Program</option>
<option value="Cybersecurity and Cloud Computing">Cybersecurity and
Cloud Computing</option>
<option value="Artificial Intelligence Program">Artificial Intelligence
Program</option>
<option value="AI and Robotics Development">AI and Robotics
Development</option>
<option value="Computer Networking Course">Computer Networking
Course</option>
<option value="Web Developing Course">Web Developing Course</option>
<option value="System Operation and Technician Program">System
Operation and Technician Program</option>
</select>
</div>
<div class="form-group">
<label>Category of Enquiry:</label>
<div class="checkbox-group">
<div class="checkbox-item">
<input type="checkbox" id="enrollment" name="enquiry-category[]"
value="Enrollment">
<label for="enrollment">Enrollment</label>
</div>
<div class="checkbox-item">
<input type="checkbox" id="course-structure" name="enquiry-category[]"
value="Course Structure">
<label for="course-structure">Course Structure</label>
</div>
<div class="checkbox-item">
<input type="checkbox" id="study-fees" name="enquiry-category[]"
value="Study Fees">
<label for="study-fees">Study Fees</label>
</div>
<div class="checkbox-item">
<input type="checkbox" id="others" name="enquiry-category[]"
value="Others">
<label for="others">Others</label>
</div>
</div>
27
</div>
<div class="form-group">

<label for="detailed-enquiry">Detailed Enquiry:</label>


<textarea id="detailed-enquiry" name="detailed-enquiry" rows="4"
placeholder="Type here..."></textarea>
</div>
<div class="form-group">
<button type="submit">SUBMIT</button>
<button type="button"
onclick="window.location.href='index.html'">CANCEL</button>
</div>
</form>
</div>
</section>
</main>

<footer>
<div class="container">
<p>&copy; 2024 FutureSkills Training. All rights reserved.</p>
</div>
</footer>

<script src="script.js"></script>
</body>
</html>

ATTACHMENTS:

28
• The "Register" page of FutureSkills Training Institute offers a streamlined process for
prospective students to enroll in various courses.
• Users can fill out a comprehensive registration form on the page with their personal details,
course preferences, and other required information.
• It offers precise directions and guidelines to guarantee a seamless registration process. The
portal also provides important details regarding prerequisites, costs, enrollment deadlines,
and available courses.

The "Register" page highlights FutureSkills Training Institute's dedication to provide high-
quality education to everyone by making enrollment simple and effective.

29
CODING FOR VALIDATION FORM.
Script.js

function validateForm(event) {
event.preventDefault();
var fullName = document.getElementById("full-name").value;
var email = document.getElementById("email").value;
var course = document.getElementById("course").value;
var enquiryCategory = document.querySelectorAll('input[name="enquiry-
category[]"]:checked');
var detailedEnquiry = document.getElementById("detailed-enquiry").value;

if (fullName == "") {
alert("Please enter your full name.");
return false;
}

if (email == "") {
alert("Please enter your email address.");
return false;
}

if (course == "") {
alert("Please select a course.");
return false;
}

if (enquiryCategory.length == 0) {
alert("Please select at least one category of enquiry.");
return false;
}

// Open a new window to show the confirmation message


var confirmationWindow = window.open("", "Confirmation",
"width=500,height=400");
confirmationWindow.document.write("<h3>Congratulations...!!!</h3>");
confirmationWindow.document.write("<p><strong>Name:</strong> " + fullName +
"</p>");
confirmationWindow.document.write("<p><strong>Email:</strong> " + email +
"</p>");
confirmationWindow.document.write("<p><strong>Selected Program:</strong> " +
course + "</p>");
confirmationWindow.document.write("<p><strong>Detailed Enquiry:</strong> " +
detailedEnquiry + "</p>");
confirmationWindow.document.close();

return true;
}

30
CODING FOR CSS STYLING.
Style.css

/* General Styles */
body {
margin: 0;
font-family: Arial, sans-serif;
line-height: 1.6;
color: #333;
background-color: #f4f4f4;
}

.container {
width: 80%;
margin: auto;
overflow: hidden;
}

header {
background: #003366;
color: #fff;
padding-top: 20px;
min-height: 70px;
border-bottom: #77aaff 3px solid;
}

header a {
color: #fff;
text-decoration: none;
text-transform: uppercase;
font-size: 16px;
}

header ul {
padding: 0;
list-style: none;
}

header li {
display: inline;
padding: 0 20px;
}

header .logo {
display: flex;
align-items: center;
}

31
header .logo-img {
width: 50px;
height: auto;
margin-right: 20px;
}

header .logo-text {
font-size: 24px;
font-weight: bold;
white-space: nowrap;
}

header nav {
float: right;
margin-top: 10px;
}

header a:hover {
color: #77aaff;
}

.main {
padding: 20px;
}

.section {
padding: 20px 0;
overflow: hidden;
}

section h2 {
margin: 20px 0;
font-size: 32px;
color: #003366;
}

section h3 {
font-size: 28px;
color: #003366;
}

section p {
margin-bottom: 20px;
}

.logo{
position:absolute;
height:auto;
left:0px;
width:100px;
}
32
footer {
background: #003366;
color: #fff;
text-align: center;
padding: 10px 0;
margin-top: 30px;
}

/* Homepage Styles */
.banner {
background: url('banner.png') no-repeat center center/cover;
color: #fff;
height: 90vh;
width: 100%;
background-size: cover;
background-position: top 25% right 0;
padding: 0 80px;
display: flex;
flex-direction: column;
align-items: flex-start;
justify-content: center;
}

.banner h1 {
font-size: 55px;
margin-top: 0;
}

.course-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
grid-gap: 20px;
}

.course-item {
background: #fff;
padding: 20px;
border-radius: 5px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.course-item h3 {
color: #003366;
}

.course-item p {
margin-bottom: 10px;
}

33
.media-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
grid-gap: 20px;
}

.media-item {
overflow: hidden;
}

.media-item img, .media-item video {


max-width: 100%;
height: auto;
border-radius: 5px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

/* About Us Page Styles */


.instructor {
margin-bottom: 20px;
}

.instructor h4 {
color: #003366;
}

/* Contact Us Page Styles */


.map-responsive {
overflow: hidden;
padding-bottom: 56.25%;
position: relative;
height: 0;
}

.map-responsive iframe {
left: 0;
top: 0;
height: 100%;
width: 100%;
position: absolute;
border: 0;
}

/* Specific section styling */


#value-prop {
background-color: #f0f0f0;
}

34
#value-prop ul {
list-style-type: disc;
margin-left: 20px;
}

#value-prop ul li {
position: relative;
padding-left: 30px;
margin-bottom: 10px;
font-size: 16px;
color: #444;
}

#value-prop ul li::before {
content: "\2713"; /* Checkmark symbol */
position: absolute;
left: 0;
color: #1a5276;
font-size: 20px;
}

#why-choose-us {
background-color: #f5f5f5;
}

#why-choose-us ul {
list-style-type: disc;
margin-left: 20px;
}

#why-choose-us ul li {
position: relative;
padding-left: 30px;
margin-bottom: 10px;
font-size: 16px;
color: #444;
}

#why-choose-us ul li::before {
position: absolute;
left: 0;
color: #1a5276;
font-size: 20px;
}
#course-recommendations {
background-color: #f0f0f0;
}

#course-recommendations ul {
list-style-type: disc;
margin-left: 20px;
}
35
#course-recommendations ul li {
position: relative;
padding-left: 30px;
margin-bottom: 10px;
font-size: 16px;
color: #444;
}

#course-recommendations ul li::before {
position: absolute;
left: 0;
color: #1a5276;
font-size: 20px;
}

#prerequisites-learning-methodologies {
background-color: #f5f5f5;
}

#prerequisites-learning-methodologies ul {
list-style-type: disc;
margin-left: 20px;
}

#prerequisites-learning-methodologies ul li {
position: relative;
padding-left: 30px;
margin-bottom: 10px;
font-size: 16px;
color: #444;
}

#prerequisites-learning-methodologies ul li::before {
position: absolute;
left: 0;
color: #1a5276;
font-size: 20px;
}

#value-prop ul, #why-choose-us ul, #course-recommendations ul, #prerequisites-


learning-methodologies ul {
list-style-type: none;
padding-left: 20px;
margin-bottom: 20px;
}

#value-prop ul li::before, #why-choose-us ul li::before, #prerequisites-learning-


methodologies ul li::before {
content: "\2713";
position: absolute;
left: 0;
color: #1a5276;
36
font-size: 20px;
}

#course-recommendations ul li::before {
content: "\2022"; /* Dot symbol */
position: absolute;
left: 0;
color: #1a5276;
font-size: 20px;
}

/* Specific section styling */


#value-prop {
background-color: #f0f0f0;
}

#why-choose-us {
background-color: #f5f5f5;
}

#course-recommendations {
background-color: #f0f0f0;
}

#prerequisites-learning-methodologies {
background-color: #f5f5f5;
}

/* Specific Section Styles */


.course-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
grid-gap: 20px;
}

course-item {
background: #fff;
padding: 20px;
border-radius: 5px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.course-item h3 {
color: #003366;
margin-top: 0;
}

.course-item p {
margin: 10px 0;
}

37
footer {
background: #003366;
color: #fff;
text-align: center;
padding: 10px 0;
margin-top: 30px;
}

/* Testimonial Styles */
#testimonials {
text-align: center;
padding: 50px 0;
background-color: #fff;
}

#testimonials .testimonial {
display: inline-block;
width: 30%;
margin: 1%;
background-color: #f9f9f9;
padding: 20px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
border-radius: 10px;
}

#testimonials img {
width: 150px;
height: 100px;
object-fit: cover;
border-radius: 10%;
margin-bottom: 15px;
}

#testimonials p {
font-style: italic;
}

#testimonials h3 {
margin: 10px 0 5px;
}

#testimonials .student-info {
margin-top: 10px;
font-size: 14px;
color: #777;
}

.social-media {
margin-top: 20px;
}

38
.social-media a {
margin: 0 10px;
color: #003366;
font-size: 24px;
text-decoration: none;
}

.social-media a:hover {
color: #77aaff;
}

/* Form Styles */
#register-form {
text-align: center;
}

form {
display: inline-block;
text-align: left;
width: 400px;
background: #fff;
padding: 20px;
border-radius: 10px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

.form-group {
margin-bottom: 15px;
}

.form-group label {
display: inline-block;
width: 140px;
text-align: right;
margin-right: 10px;
vertical-align: top;
}

.form-group input[type="text"],
.form-group input[type="email"],
.form-group select,
.form-group textarea {
width: 200px;
padding: 8px;
font-size: 14px;
border: 1px solid #ccc;
border-radius: 4px;
box-sizing: border-box;
}

39
.checkbox-group {
display: flex;
flex-direction: column;
margin-left: 150px;
}

.checkbox-item {
display: flex;
align-items: center;
margin-bottom: 5px;
}

.checkbox-item input[type="checkbox"] {
margin-right: 5px;
}

.form-group textarea {
width: 200px;
height: 100px;
resize: vertical;
}

.form-group button {
margin-right: 10px;
padding: 10px 20px;
font-size: 14px;
cursor: pointer;
background-color: #003366;
color: #fff;
border: none;
border-radius: 4px;
}

.form-group button:hover {
background-color: #77aaff;
}

40
ADDITIONAL EXPLANATION.
The FutureSkills Training Institute's website has been developed effectively, offering a feature-
rich, easy-to-use platform that satisfies the demands of the organization for improved online
visibility, efficient student registration, and effective information distribution. The website uses a
well-organized blend of JavaScript, HTML, and CSS to provide a smooth surfing experience.

HTML Programming

The website's structure was made organized and neat by carefully crafting the HTML code.
Important characteristics consist of:

• Header and Navigation Bar: The header contains links to key pages including Home,
About Us, Courses, Testimonials, Contact Us, Register, and Developer in addition to the
institute's logo.
• Principal Sections: Every page has a unique layout with the right headings, sections, and
material to give comprehensive details about the institute and its programs.
• Forms: To make communication simple and course enrollment easier, registration and
contact forms are supplied.

CSS Design

The website's visual appeal and consistency with the institute's branding are guaranteed by the
CSS styling. Important components consist of:

• Dynamic Design: The website is entirely responsive and offers the best possible viewing
experience across a range of devices like desktop PCs.
• Visual Elements: The website's visual appeal is enhanced with contemporary color
schemes, excellent photographs, and captivating multimedia material.
• Typography and Layout: Readability and ease of navigation are enhanced by consistent
typography and thoughtfully planned layouts.

JavaScript Validation Form

Form validation was implemented using JavaScript, guaranteeing that user input is correct and
comprehensive before to submission. Important characteristics consist of:

• Validation of the Registration Form: Personal and course-related data are requested in
the registration form's fields. JavaScript verifies the existence of required fields, correct
data, and proper format (like email addresses).

The project showcases a dedication to offering a top-notch, user-friendly web platform that
upholds the objective of FutureSkills Training Institute, which is to equip people with the
necessary information and abilities for their career advancement. The institute's continued
success and expansion are facilitated by the website's current strategic positioning, to draw in and
assist students.

41
ZIP FILE LINK.
https://drive.google.com/file/d/16szbJOFpj-mkeJMaByQTeLTlKxwLyQi0/view?usp=sharing

! Copy and paste the link on your browser (preferably Google Chrome).
! Download the website.zip file.
! Open the website folder.
! Run the website.

42
REFERENCES.
Anoriega. (2021, October 14). How to Create a Website From Scratch (Step-By-Step Beginner’s
Guide) | Berkeley Boot Camps. Berkeley Boot Camps.
https://bootcamp.berkeley.edu/blog/how-to-create-website-from-scratch-guide/

43

You might also like