Web Development Assignment
1a. As a web developer there are things you should have in mind before starting a web application
project. Critically explain them with clear examples. (10 Marks)
Before starting a web application project, a developer should consider the following:
1. Purpose of the Website: Clearly define the website's purpose: e.g., Is it for e-commerce, blogging,
education, or social networking?
Example: An e-commerce site like Amazon requires payment gateway integration, while a blog
does not.
2. Target Audience: Understand the users' age group, language, location, and technology usage.
Example: A site for teenagers may use more animations and mobile-first design, while one for
professionals may focus on clean UI.
3. Technology Stack: Decide whether to use front-end frameworks (React, Angular) and back-end
([Link], PHP, Python Django).
Example: A real-time chat app might use [Link] and WebSocket, while a blog might use PHP
and MySQL.
4. Scalability and Performance: Plan for the website's growth in traffic and features.
Example: Choosing cloud hosting like AWS for scalability vs. shared hosting.
5. Security: Include HTTPS, data validation, SQL injection prevention, and user authentication.
Example: Implementing reCAPTCHA to prevent bots on forms.
1b. What does it take to be a full-fledged web developer? (10 Marks)
To be a full-fledged web developer, one must possess:
- Front-end Skills: HTML, CSS, JavaScript, frameworks like React, Vue, or Angular.
- Back-end Skills: PHP, Python, [Link], databases like MySQL or MongoDB.
- Version Control: Git and GitHub for collaboration and change tracking.
- Deployment Skills: Hosting, DNS, FTP, CI/CD pipelines.
- Soft Skills: Problem-solving, communication, and time management.
- Security Knowledge: Understanding of HTTPS, authentication, and encryption.
2. What is the relationship between HTML, CSS, and JavaScript? Give any reasonable illustration.
(15 Marks)
- HTML (HyperText Markup Language): Defines the structure of a web page.
- CSS (Cascading Style Sheets): Controls the appearance or design of the HTML elements.
- JavaScript: Adds interactivity and dynamic behavior.
Illustration:
Imagine a human body:
- HTML is the skeleton (structure),
- CSS is the clothes (design/styling),
- JavaScript is the brain/nerves (behavior/interactivity).
3a. Write a simple HTML code to display your profile textually. (10 Marks)
<!DOCTYPE html>
<html>
<head><title>My Profile</title></head>
<body>
<h1>My Profile</h1>
<p><strong>Name:</strong> John Doe</p>
<p><strong>Email:</strong> johndoe@[Link]</p>
<p><strong>Occupation:</strong> Web Developer</p>
<p><strong>Skills:</strong> HTML, CSS, JavaScript, Python</p>
</body>
</html>
3b. Can we have a web page created without CSS? Why? (5 Marks)
Yes, a web page can be created without CSS because HTML alone structures content. However,
without CSS, the content appears plain as per browser defaults. CSS improves the presentation and
user interface.
4. Explain the concept of Internet and Web Browser, HTTP, SQL, FTP. (15 Marks)
- Internet: A global network for sharing information.
- Web Browser: Software used to access and view websites (e.g., Chrome, Firefox).
- HTTP (HyperText Transfer Protocol): Protocol for transferring web pages.
- SQL (Structured Query Language): Language for managing and retrieving database data.
- FTP (File Transfer Protocol): Used to upload or download files between client and server.
5. Write an HTML code to do the following; Insert image, create table with rows and columns, and
create a registration form. (20 Marks)
<!DOCTYPE html>
<html>
<head><title>Web Page Example</title></head>
<body>
<h2>My Picture</h2>
<img src="[Link]" alt="My Profile Picture" width="200">
<h2>My Skills Table</h2>
<table border="1">
<tr><th>Skill</th><th>Level</th></tr>
<tr><td>HTML</td><td>Advanced</td></tr>
<tr><td>CSS</td><td>Intermediate</td></tr>
</table>
<h2>Registration Form</h2>
<form action="/submit" method="post">
<label for="fullname">Full Name:</label>
<input type="text" id="fullname" name="fullname" required><br><br>
<label for="email">Email:</label>
<input type="email" id="email" name="email" required><br><br>
<label for="password">Password:</label>
<input type="password" id="password" name="password" required><br><br>
<input type="submit" value="Register">
</form>
</body>
</html>