Hello there!

Let's learn something today.

YOU'RE BUILDING

Pharmasift Part I

ROADMAP

Frontend

DIFFICULTY LEVEL

Beginner

Sections
0 / 33 Chapters Completed (0%)

6. Setup Index Files

Now that your PharmaSift project is cloned locally, it's time to set up your index files. The index files, typically index.html and style.css, serve as the foundation for your web application. Follow these steps to get started:

Step 1: Open Your Code Editor

  • Open your preferred code editor. If you don't have one, you can use Visual Studio Code, Sublime Text, Atom, or any editor of your choice.

Step 2: Navigate to Your PharmaSift Project Directory

  • Use the file explorer in your code editor or your system's file explorer to navigate to the pharmasift directory.

Step 3: Create index.html

  • Inside the project directory, create a new file named index.html. This file will serve as the main entry point for your web application.

Step 4: Add HTML Structure

  • Open index.html and add the basic HTML structure:

    <!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>PharmaSift</title>
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <h1>Welcome to PharmaSift</h1>
  </body>
</html>

Step 5: Create style.css

  • Inside the project directory, create a new file named style.css. This file will handle the styling for your web application.

Step 6: Add Basic Styling

  • Open style.css and add some basic styling:

    body {
  font-family: 'Arial', sans-serif;
  text-align: center;
  margin: 50px;
}

h1 {
  color: #3498db;
}

Step 7: Save Changes

  • Save your changes in both index.html and style.css.

Step 8: Verify Changes Locally

  • Open your web browser and navigate to the local copy of your PharmaSift project. You can do this by opening the index.html file in your browser.

Next Steps:

With your index files set up, you've created the initial structure for PharmaSift. In the next chapter, we'll guide you through making your first commit and pushing these changes to your GitHub repository.

Head over to Chapter 7 for the next steps in building PharmaSift!

Great work—let's continue building PharmaSift together!