Back to Homework List

HOMEWORK 1

Project Management - Prepare

Homework 1: Prepare

1. Prepare

We will use the following tools to build our own webpage:

2. Web page setting

注意：仓库是原先已经建好的，下面是操作示范。

Create a new repository on GitHub to host your website

Create a public repository where you can collaborate with your team to create web content.

创建GitHub仓库
在 GitHub 上创建新的公开仓库

Configure GitHub Pages

Set the page to be empty. Click on the settings of the repository and select "Pages" on the left. Choose "main" and "/root" and save. The link above allows you to view the page.

GitHub Pages Settings 1
Configure GitHub Pages - Access Pages settings from repository Settings
GitHub Pages Settings 2
Select main branch and /root directory, then save

Add Collaborators

Click on "Settings", find "Collaborators" on the left, then click "Add people", enter their email addresses, and set their role (maintainer).

添加协作者步骤1
点击 Settings → Collaborators → Add people
添加协作者步骤2
输入邮箱地址并设置 Maintainer 角色

3. Clone the repository to GitHub

Open GitHub Desktop and Login

Open the software and log in to your GitHub account.

Clone the Repository

Clone the repository and select one to save to your computer.

Clone Repository
Clone the repository to your local computer

Use Lingma for Website Development

提示词：请为我生成一个创意团队”Aether Studio”的品牌官网，HTML/CSS/S全在一个文件中。整体风格参考圣罗兰官网:深色背景(#000000或#0A0A0A)、大面积留白、无衬线大标题、极简导航、细腻的滚动动画和悬停效果。品牌调性要体现”空灵、科技、艺术"，主色调为黑、白、银，点缀色使用淡紫色(#B8A9FF)或金属银。风格大气高端，搭建完成后部署到github 的github action，调整相关配置，在Hero 区(全屏)的背景添加动态视频文件地址为“C\Users陈梓琦04126effea5eebe759563d88b21ca812014_raw.mp4”,添加小组成员介绍，分别是陈梓琦，王琦琦，李琳，章悦，朱诗瑶，何昱璇，徐思瑜，内容包含主页，团队介绍，平时作业，最终项目，主页需要一个视频背景，左上角放置logo，标签页的logo需要在深色模式下为白色，团队介绍内有七位成员的介绍卡片，卡片点进去链接到每位成员的个人网页，平时作业有九项，点进去后可展示作业内容包含文字图片有返回键，Markdown格式

Lingma is an AI-powered coding assistant that helps us write code and documents efficiently. It can generate code snippets, explain complex concepts, and assist with debugging, making the website development process faster and more productive.

Lingma Usage 1
Using Lingma to generate code and documentation
Lingma Usage 2
Lingma assists with code explanation and debugging
Navigation Bar Setup Process

提示词：在首页上方建立导航栏分别通往四个页面 Home ,About US,Daily homework,Finalwork

The navigation bar is created at the top of the homepage, providing links to four main sections: Home (主页), About Us (团队介绍), Daily Homework (平时作业), and Final Work (最终项目). This allows users to easily navigate between different parts of the website.

Modify Files and Commit

After modifying the files, write a commit note on the left side.

提交更改
编写提交说明（Commit Message）

Push to GitHub

Click Push origin in the upper right corner to upload to GitHub.

Push to GitHub
Click "Push origin" to upload code to GitHub

Project Directory Structure Organization

After pushing to GitHub, we organized the project directory structure to improve maintainability. We created dedicated folders for documentation, images, videos, and other resources, making the project easier to navigate and manage.

Directory Structure
Organized project directory structure with dedicated folders

7. 项目文件与目录说明

根目录文件

图片资源目录 (image/)

视频资源目录 (videos/)

GitHub工作流目录 (.github/workflows/)

其他辅助文件