---
title: 前端入门的项目
date: 2024-04-11
author: KazooTTT
tags:
  - 前端入门
  - 项目学习
  - 前端框架
  - 博客开发
  - Gemini
  - API
  - GROQ
  - GitHub项目
finished: true
published: true
category: 随手记
slug: projects-to-get-started-on-the-front-end
description: 这个项目列表提供了一些适合前端入门的项目建议，涵盖了基础知识学习、框架实践和个人项目开发等方面。其中包括了博客开发、UI设计、以及接入Gemini API和GROQ API等内容的示例。
type: Post
status: Published
NotionID-notionnext: 42131976-4124-47ec-aaad-2a9dfc0516d6
link-notionnext: https://kazoottt.notion.site/42131976412447ecaaad2a9dfc0516d6
rinId: 51
date_created: 2025-01-04T11:34:08+08:00
date_modified: 2025-01-22T13:25:22+08:00
toAstro: true
---

# 前端入门的项目

之前一个朋友问了我一下前端入门的项目，感觉是比较通用的，所以也同步到博客上吧。

---

我当时的学习路线是：先去 freecodecamp 学了一下前端的基础（css + js + html），做了它的练习之后对前端有一个大概的了解。

然后就是开始学框架做项目了。首先要挑一个框架作为主要的学习目标。这里有两种方式，一种是看文档学知识，另一种是从项目中去学习。

如果是文档的话，可以先看官方的文档，不需要记住所有的内容，对这个框架会有一个大概的了解，后面遇到问题检索一下关键词去搜索就可以了。

然后挑一个项目或者自己做项目来加深实践。

如果是看别的人项目，或者在别人的项目上休怪。目前前端比较适合入手的项目主要还是博客、gpt 的套壳 ui。

1. 博客的话，你可以想一下自己的博客里想加什么功能，或者看一下博客的某个功能是怎么实现的。比如说目录大概这个功能，它是怎么从一个 markdown 的内容中解析#标题，然后生成大纲的。怎么把自己 github 的热力图给嵌入到博客中，有哪些库可以使用，[GitHub - grubersjoe/react-activity-calendar: A flexible React component to display activity data in a calendar (heatmap).](https://github.com/grubersjoe/react-activity-calendar) 以及它的库实现思路。

这些博客都是做的很好的：

[Cali Castle | 开发者、设计师、细节控、创始人](https://cali.so/)

[静かな森 - 致虚极，守静笃。](https://innei.in/)

1. gpt 的套壳的话目前比较火。现在 google gemini api、groq api 都是可以免费使用的。可以看一下别人是怎么接入它的，以及流式和非流式是怎么解析和展示的。比较经典的例子是：
    <https://github.com/babaohuang/GeminiProChat>（比较简洁）

[GitHub - lobehub/lobe-chat: 🤯 Lobe Chat - an open-source, modern-design LLMs/AI chat framework. Supports Multi AI Providers( OpenAI / Claude 3 / Gemini / Perplexity / Bedrock / Azure / Mistral / Ollama ), Multi-Modals (Vision/TTS) and plugin system. One-click FREE deployment of your private ChatGPT chat application.](https://github.com/lobehub/lobe-chat)（大杂烩比较复杂）

然后如果是自己做项目的话，可以想一下平时有没有遇到过什么不便利的地方，“要是 xxx 就好了”，我一般都会把这种想法存下来，然后有空的时候就去实现它。

![Pasted image 20240405180056](https://pictures.kazoottt.top/2024/04/20240411-63ea5846be622124eba970ce3738abf0.png)

---

然后现在大模型也很用，无论是解释代码还是帮忙写代码。

可能开头的回答并不能拿来用，但是在完善提示词的过程中，也是对需求的进一步分析，写着写着自己也知道要怎么去做这个需求了。
