Assignment 1

Announced Date: Khizer Abdul Salam CMS ID: 1798-2021 Total Marks = 3
Teacher Name: Zaheen Fatima Course: Internet Programming Marks Obtained = ____
Assignment 1
Question 1: Differentiate between CSS and Bootstrap.
CSS (Cascading Style Sheets) Bootstrap
CSS: Style sheet language defining the Bootstrap: Pre-designed, responsive front-end
Nature appearance and formatting of HTML framework with HTML, CSS, and JavaScript
documents in web design. components for web development.
CSS enables full customization of web page Bootstrap provides customizable pre-designed
Customization styling and layout, allowing designers to components and layouts, serving as a design
create unique styles. starting point.
In CSS, developers have granular control over Customization in Bootstrap may not offer the
Control design elements and properties for individual same level of fine-grained control as coding
webpage elements. CSS from the ground up.
CSS can create responsive web designs but Bootstrap is inherently responsive and
Responsiveness involves manual coding and testing. It's more designed to adapt to different screen sizes
labor-intensive. and devices.
Using CSS effectively requires a good It's relatively easy to learn and use, making it
Learning Curve understanding of the language and design accessible for developers and designers with
principles. varying skill levels.
Question 2: Application – Management of the CS Graduate Course

Application two aims to manage the graduate course of the ADP-CIS department because all the management was
done using paper forms. For instance, to obtain the transcript of a graduate student, it was necessary to search for
all his data in different paper files (the course has about 150 students). The application is divided into three sets of
components: (1) CRUD applications, (2) listings, and (3) general consistency checking. The consistency checks are
various, for instance, students that fail the exams lose their scholarships. The data model should contain
information about students, professors, scholarships, courses, classes, grades, and others.
How do you build a client-side and server-side application for the above Application?
Client-Side Application:
User Interface (UI): Design the user interface for the application, which should include screens for student
information, professor details, course management, grades, and other relevant data. Use web technologies like
HTML, CSS, and JavaScript to create a user-friendly interface.
Front-End Framework: Consider using a front-end framework like React, Angular, or Vue.js to create dynamic and
responsive user interfaces. These frameworks provide tools for managing data and user interactions efficiently.
Client-Server Communication: Implement mechanisms for the client to communicate with the server. This is usually
done through HTTP requests. You can use JavaScript libraries like Axios or the built-in Fetch API to make requests to
the server.
Data Validation: Ensure data entered by users is validated on the client side to minimize errors before sending it to
the server.
Page 1 of 2
Announced Date: Khizer Abdul Salam CMS ID: 1798-2021 Total Marks = 3
Teacher Name: Zaheen Fatima Course: Internet Programming Marks Obtained = ____
Server-Side Application:
Choose Back-End Technology: Select a server-side technology like Node.js with Express, Ruby on Rails, Django, or
ASP.NET.
Design Database: Create a database schema for storing student, professor, scholarship, course, class, and grade
data. Use a DBMS like MySQL, PostgreSQL, or MongoDB.
Develop API: Build RESTful API endpoints for CRUD operations, defining routes and controllers to manage data.
Implement Data Validation: Ensure server-side validation to maintain data integrity and consistency.
Create Consistency Checks: Develop logic for checks like handling scholarship loss due to grades.
Authentication and Authorization: Secure the app with user authentication and authorization mechanisms.
Testing: Perform rigorous testing, including unit, integration, and end-to-end testing.
Deployment: Deploy the app on a web server or cloud platform, making it accessible to the client-side app.
Monitoring and Maintenance: Set up monitoring tools for performance and security, with regular maintenance and
updates.
Question 3: Why choose a web-based system in the bank for handling customer requests software?
Accessibility: Customers can submit requests from anywhere with an internet connection.
24/7 Availability: Services are available around the clock, improving convenience.
Efficiency: Bank staff can efficiently manage and process requests online.
Reduced Waiting Times: Customers can avoid long lines and hold times.
Data Accuracy: Online forms help minimize errors and ensure accurate customer information.
Security: Robust security features protect customer data and transactions.
Scalability: Systems can handle increasing customer numbers and requests.
Cost Savings: Reduces operational costs and infrastructure needs.
Integration: Can integrate with other banking software for streamlined operations.
Customer Experience: Aligns with modern customer preferences for online interactions.
Question 4: What is Responsive Web Design?

Responsive Web Design (RWD) is an approach to web design that aims to make web pages render well on a variety
of devices and window or screen sizes. It involves designing and coding a website so that it automatically adjusts and
adapts to the user's device, whether it's a desktop computer, laptop, tablet, or smartphone. Here are the key
principles and components of responsive web design:
Fluid Grid Layout: RWD uses a fluid grid system that allows page elements to be sized in relative units like
percentages, rather than fixed units like pixels. This ensures that elements resize and reflow to fit different screen
sizes.
Media Queries: CSS3 media queries are used to apply different styles to a page based on the characteristics of the
device, such as its screen width, height, or orientation (portrait or landscape). This allows for customized styling for
various devices.
Flexible Images and Media: Images and media should be scalable and flexible, so they adapt to the screen size
without losing quality or breaking the layout. CSS properties like max-width: 100%; are often used to achieve this.
Viewport Meta Tag: The viewport meta tag in HTML helps control the viewport's behavior on mobile devices. It's
important for ensuring that mobile devices display web pages correctly.
Content Prioritization: On smaller screens, not all content may be displayed, or it may be rearranged to prioritize the
most important information. This ensures a good user experience on smaller screens without overwhelming users
with too much content.
Testing and Debugging: RWD requires thorough testing on various devices and screen sizes. Tools and browser
developer features are used to identify and fix issues.
Page 2 of 2

Assignment 1

Uploaded by

Copyright:

Available Formats

Assignment 1

Uploaded by

Document Information

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Assignment 1

Uploaded by

Copyright:

Available Formats

Announced Date: Khizer Abdul Salam CMS ID: 1798-2021 Total Marks = 3

Question 2: Application – Management of the CS Graduate Course

Question 4: What is Responsive Web Design?

You might also like