Final Term Exam
Web System and Technologies (WST) Course
Paper Pattern
- There will be FIVE questions.
- Each question carries 10 marks.
- All questions will be code-based; there will be no theoretical questions.
- Questions will be based on tasks and practical work covered in class and lab sessions.
- Possible question types:
- Write code for a given statement.
- Page structure will be given and you will have to write code for creation of the page
Understanding of questions is also a part of the exam. Therefore, don't call teacher for explanation of the questions. If there is misprinting in the question-paper, then you can ask the invigilator. If question is wrong in the quetion-paper, then the teacher will be responsible for giving you grace marks.
Course Contents for the Exam
Following topics are included for the Exam. These are categorized on base of different parts of the course.
Hypertext Markup Language (HTML)
| Lesson # | Title | Description | Controls |
|---|---|---|---|
| 1 | Basic Structure and Run Code | Tags like Doctype, html, head, title and body. How to run the code. | |
| 2 | Text Elements | Heading, Paragraph, Line break, Bold, Italic, Emphasize, Underline, Deleted, Inserted, Subscript and Superscript, Abbreviation and Citation | |
| 3 | Lists | Ordered, unordered and descriptive lists | |
| 4 | Link using Anchor Tag | Use only Anchor tag <a>, for internal-links and external-link | |
| 5 | Images | <img> tag to display images on web pages, including best practices for attributes like src, alt, width, height, and responsive image handling for better performance and design. | |
| 6 | Inline and Block Elements | List of inline and block elements in HTML. Explanation of their behavior | |
| 7 | Tables | Use <table>, <tr>, <th>, and <td> elements, along with <thead> and <tbody> | |
| 8 | Website Layouts | Components like header, navigation, content area, sidebar, and footer, along with common layout types such as 1-column, 2-column, and 3-column designs for responsive web development. |
Cascading Style Sheets (CSS)
| Lesson # | Title | Description | Controls |
|---|---|---|---|
| 1 | Basic Structure | Inline, internal, and external CSS, along with concepts like classes, IDs, CSS precedence, and the :hover pseudo-class for interactive styling. | |
| 2 | Display as flex | Flexible and responsive layouts using properties like display: flex, flex-direction, justify-content, align-items, and flex-wrap for efficient alignment and positioning of elements. | |
| 3 | Responsive Web Designing | Use flexible layouts, media queries, and scalable elements, providing a consistent user experience and mobile-friendliness |
JavaScript DOM
| Lesson # | Title | Description | Controls |
|---|---|---|---|
| 1 | Change HTML Element | Update content, attributes, and styles for dynamic and interactive web pages. |
React Js Concepts
| Lesson # | Title | Description | Controls |
|---|---|---|---|
| 1 | Run Custom Code | Learn how to write and execute custom React code within a TypeScript project to build and test your application | |
| 2 | Creating Multiple Components | Understand how to create and organize multiple reusable components in React for better code structure and scalability | |
| 3 | Navigation Between Components | Implement navigation between different components using routing to build a multi-page React application | |
| 4 | useState Hook | Learn how to manage component state in React using the useState hook for dynamic and interactive user interfaces | |
| 5 | useEffect Hook | Explore the useEffect hook to handle side effects such as data fetching and lifecycle events in React applications |