Arif Sheikh

This guide is a knowledge-sharing initiative to assist fellow graduate students and faculty at Colorado State University in building and hosting personal webpages. These steps are based on my experience and are provided as-is. For technical issues, please reach out to Engineering Technology Services (ETS).

Part 1: Setting Up Your Account and Files

Step 1: Open Your CSU Engineering Account

1. Go to CSU Account Setup and create or view your Engineering account.
2. Follow the instructions to log in or set up your account.

Step 2: Connect via VPN

1. Download and install GlobalProtect VPN for secure remote access.
2. Log in using your CSU credentials before accessing Engineering resources.

Step 3: Map Your Network Drive

1. Follow these instructions to map your network drive.
2. Once mapped, your drive (e.g., Z:) will be accessible through File Explorer.

Step 4: Set File Permissions

1. Adjust file permissions to make your webpage files publicly accessible.
2. Ensure permissions are set correctly; otherwise, your pages won't be viewable.

Step 5: Upload Your Files

1. Navigate to your public_html folder in the mapped network drive.
2. Copy your HTML, CSS, and related files into this directory.

Part 2: Designing and Structuring Your Webpage

Step 1: Choose an HTML Editor

1. Download CoffeeCup Free HTML Editor or use alternatives like Sublime Text or Visual Studio Code.

Step 2: Create Your Webpage

1. Create a file named index.html using your editor.
2. Follow CSU Branding Guidelines for colors, fonts, and logos.

Step 3: Test and Publish

1. Test your HTML locally in a browser.
2. Upload files to your mapped drive and access them at: http://www.engr.colostate.edu/~yourusername/.

Step 4: Add Content

1. Create new pages for tutorials or research content and link them in your navigation menu.
2. Example of linking:

   <nav>
     <ul>
       <li><a href="tutorials.html">Tutorials</a></li>
       <li><a href="research.html">Research</a></li>
     </ul>
   </nav>
                           

Step 5: Make It Mobile-Friendly

1. Ensure responsiveness with CSS media queries. Example:

   @media screen and (max-width: 768px) {
       body {
           font-size: 14px;
       }
   }