Programming Assignment

Construct a Website (multiple Web pages) containing ‘Resume’ and Bio -data by using relevant HTML elements and appropriate styling for presentation with CSS/jQuery/JavaScript. Host the Website on a cloud platform.

Part 1: Code for the Website

1. Folder Structure

Create a folder named resume_website with the following structure:

resume_website/
│
├── index.html        // Home page
├── resume.html       // Resume page
├── bio.html          // Bio-data page
├── styles.css        // CSS for styling
├── script.js         // Optional JS functionality
└── images/           // Folder for images (optional)

2. Home Page (index.html)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My Website</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <header>
        <h1>Welcome to My Website</h1>
        <nav>
            <a href="index.html">Home</a>
            <a href="resume.html">Resume</a>
            <a href="bio.html">Bio-data</a>
        </nav>
    </header>
    <main>
        <h2>About Me</h2>
        <p>Hi, I'm [Your Name]. Welcome to my personal website!</p>
    </main>
    <footer>
        <p>&copy; 2024 [Your Name]. All rights reserved.</p>
    </footer>
</body>
</html>

3. Resume Page (resume.html)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Resume</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <header>
        <h1>My Resume</h1>
        <nav>
            <a href="index.html">Home</a>
            <a href="resume.html">Resume</a>
            <a href="bio.html">Bio-data</a>
        </nav>
    </header>
    <main>
        <h2>Experience</h2>
        <ul>
            <li><strong>Software Developer</strong> at XYZ Corp (2022-Present)</li>
            <li><strong>Intern</strong> at ABC Ltd. (2021-2022)</li>
        </ul>
        <h2>Education</h2>
        <ul>
            <li>Bachelor of Technology in Computer Science - 2021</li>
        </ul>
    </main>
    <footer>
        <p>&copy; 2024 [Your Name]. All rights reserved.</p>
    </footer>
</body>
</html>

4. Bio-data Page (bio.html)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Bio-data</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <header>
        <h1>Bio-data</h1>
        <nav>
            <a href="index.html">Home</a>
            <a href="resume.html">Resume</a>
            <a href="bio.html">Bio-data</a>
        </nav>
    </header>
    <main>
        <table>
            <tr>
                <th>Field</th>
                <th>Details</th>
            </tr>
            <tr>
                <td>Name</td>
                <td>[Your Name]</td>
            </tr>
            <tr>
                <td>Date of Birth</td>
                <td>01-01-1995</td>
            </tr>
            <tr>
                <td>Address</td>
                <td>[Your Address]</td>
            </tr>
        </table>
    </main>
    <footer>
        <p>&copy; 2024 [Your Name]. All rights reserved.</p>
    </footer>
</body>
</html>

5. CSS Styling (styles.css)

body {
    font-family: Arial, sans-serif;
    line-height: 1.6;
    background: #f9f9f9;
    color: #333;
    margin: 0;
    padding: 0;
}

header {
    background: #007BFF;
    color: white;
    padding: 10px 0;
    text-align: center;
}

header nav a {
    color: white;
    margin: 0 10px;
    text-decoration: none;
}

header nav a:hover {
    text-decoration: underline;
}

main {
    padding: 20px;
    background: white;
    margin: 20px auto;
    max-width: 800px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

footer {
    text-align: center;
    background: #333;
    color: white;
    padding: 10px 0;
    position: fixed;
    bottom: 0;
    width: 100%;
}

6. Optional JavaScript (script.js)

console.log("Website loaded successfully!");

Part 2: Hosting the Website on a Cloud Platform

You can host the website on GitHub Pages, Netlify, or Vercel. Here's the step-by-step procedure for each:

Option 1: Hosting on GitHub Pages

Create a GitHub Repository:
- Log in to GitHub and create a new repository (e.g., resume-website).

Push Your Code:

Initialize Git in your project folder:

git init
git add .
git commit -m "Initial commit"
git branch -M main
git remote add origin https://github.com/yourusername/resume-website.git
git push -u origin main

Enable GitHub Pages:
- Go to the repository settings.
- Scroll down to the Pages section.
- Select the branch (main) and root directory. Save.
- Your website will be available at https://yourusername.github.io/resume-website.

Option 2: Hosting on Netlify

Sign Up for Netlify:
- Go to Netlify and create an account.
Upload Your Website:
- Drag and drop the resume_website folder into the Netlify dashboard.
Get Your URL:
- Netlify will provide a live URL for your website.

Option 3: Hosting on Vercel

Sign Up for Vercel:
- Go to Vercel and create an account.
Deploy Your Project:
- Use the CLI:
```
npm install -g vercel
vercel
```
- Follow the prompts to deploy your project.
Access Your Website:

Vercel will provide a live URL for your website.

-:END:-

Search This Blog

Web Technology Lab by Dr. G Anil Kumar

Programming Assignment - 1