Arif Sheikh

-- How-To Guides | Personal Webpage at CSU | Template --

Featured Guides | Personal Webpage Template

How to Use a Generic HTML Template for Your Personal Webpage

This section provides a reusable HTML template for graduate students and faculty to create personal webpages. The template is simple to customize, with detailed comments for guidance. Copy and paste the following code into a file named index.html, then upload it to your public_html directory.

How to Use This Template

  1. Copy the HTML code: Paste it into a new file named index.html.
  2. Edit the placeholder text: Replace [Your Name], [Your Department], and other placeholders with your information.
  3. Customize styles: Edit the CSS in the <style> section to adjust colors, fonts, and layout as needed.
  4. Upload the file: Save the file in your public_html directory on your CSU Engineering account.
  5. Preview your webpage: Visit http://www.engr.colostate.edu/~yourusername/ to see your live webpage.

Example Output

Below is an example of how your webpage will look using the default template:

Download ZIP (CSS + HTML Template + README)

Editable HTML + CSS Template

Copy the code below and save it as style.css:

/* General Styling */
body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
    line-height: 1.6;
    background-color: #f9f9f9;
    color: #333;
}
header {
    background: #00796b;
    color: #fff;
    padding: 20px 0;
    text-align: center;
}
header h1 {
    margin: 0;
    font-size: 2.5em;
}
nav ul {
    background: #004d40;
    padding: 10px 0;
    list-style: none;
    text-align: center;
    margin: 0;
}
nav ul li {
    display: inline;
    margin: 0 10px;
}
nav ul li a {
    color: #fff;
    text-decoration: none;
    font-size: 1.2em;
}
nav ul li a:hover {
    text-decoration: underline;
}
main {
    padding: 20px;
}
footer {
    background: #004d40;
    color: #fff;
    text-align: center;
    padding: 10px 0;
    position: relative;
    bottom: 0;
    width: 100%;
}
footer a {
    color: #80cbc4;
    text-decoration: none;
}
footer a:hover {
    text-decoration: underline;
}

Copy the code below and save it as index.html:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>[Your Name] | Personal Webpage</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <header>
        <h1>[Your Name]</h1>
        <p>Graduate Research Student | Faculty | [Your Department]</p>
    </header>
    <nav>
        <ul>
            <li><a href="#about">About</a></li>
            <li><a href="#research">Research</a></li>
            <li><a href="#publications">Publications</a></li>
            <li><a href="#contact">Contact</a></li>
        </ul>
    </nav>
    <main>
        <section id="about">
            <h2>About Me</h2>
            <p>Write a brief introduction about yourself, your research interests, and academic background here.</p>
        </section>
        <section id="research">
            <h2>Research</h2>
            <p>Describe your ongoing research projects and areas of expertise.</p>
        </section>
        <section id="publications">
            <h2>Publications</h2>
            <p>Include a list of your most notable publications or link to your full publication list.</p>
        </section>
        <section id="contact">
            <h2>Contact</h2>
            <p>Provide your email address, office location, or any relevant contact information.</p>
        </section>
    </main>
    <footer>
        © 2024 [Your Name]. All Rights Reserved. | Email: <a href="mailto:your.email@example.com">your.email@example.com</a>
    </footer>
</body>
</html>

Useful Resources

Disclaimer

This guide is a knowledge-sharing initiative based on my experience to assist fellow graduate students and researchers at CSU/SE. Please note:

  1. These steps are provided as-is and may not apply universally.
  2. Verify steps with official CSU resources before proceeding.
  3. The author is not responsible for issues arising from these instructions.