Styling the Personal Tutor Interface with CSS in Go and Fiber

Welcome to the final lesson of our "Developing a Personal Tutor Web Application With Go and Fiber" course! In the previous lesson, you enhanced your personal tutor application by adding query suggestions, making it more user-friendly and efficient for students. Today, we will complete our application by focusing on styling the interface to make it visually appealing and professional. Styling is crucial in educational web applications, as it enhances the learning experience by providing a clean and intuitive interface. We will use CSS to achieve this, ensuring that our tutor application not only functions well but also looks great.

To style our personal tutor interface, we first need to create a directory for our static files, such as CSS. This directory will be served by our Fiber application so that the browser can access the styles.

1. Create the Static Directory: Inside your project directory, create a folder named static. This is where we'll store our CSS file.

2. Serve the Static Directory in Fiber: Update your main Go application file to serve static files by using the app.Static() method.

Here's a simplified example of how you can do it in Go with Fiber:

package main

import (
    "github.com/gofiber/fiber/v2"
)

func main() {
    app := fiber.New()

    // Serve static files from the "static" directory at the "/static" URL path
    app.Static("/static", "./app/static")

    // ... your other routes and handlers

    app.Listen(":3000")
}

This code snippet demonstrates how to serve the static directory so that files like CSS can be accessed by the browser at the /static URL path. The app.Static() method specifies the URL path and the directory on disk.

With the static directory set up, the next step is to create a CSS file and link it to your HTML template.

1. Create the CSS File: In the static directory, create a file named style.css. This file will contain all the styles for your application.

2. Link the CSS File in HTML: Open your tutor.html template file and add a <link> tag within the <head> section to link the CSS file. In Fiber, you can reference static files using a relative path like app/static/style.css:

<!DOCTYPE html>
<html>
<head>
    <title>Your Personal Tutor</title>
    <link rel="stylesheet" href="/static/style.css">
</head>
<body>
    <!-- Header section... -->
    <!-- Suggestion buttons for common academic queries -->
    <!-- Chat container and input elements... -->
    <!-- Script functions... -->
</body>
</html>

The <link> tag uses the /static/style.css path to load the CSS file, ensuring that the styles are applied to the HTML elements. This setup allows your personal tutor interface to be styled effectively using the CSS rules defined in style.css.