تازہ ترین ویڈیوز | TeacherFlix | Free Classroom Videos & Ready-to-Use Lesson Resources

MENU

گھر
مضامین

MORE VIDEOS

مزید دریافت کریں۔

مدد

تازہ ترین ویڈیوز

NotebookLM + Gemini = Website Builder (Free & No Code)

NotebookLM + Gemini = Website Builder (Free & No Code) Teacherflix 0 مناظر • پہلے 5 دن

We all know Google's NotebookLM is incredible for organizing research and summarizing dense documents. But what if those insights shouldn't just stay in a notebook?

In this tutorial, I’ll show you how to take a stack of complex research (using NASA's Artemis Missions as an example) and turn it into a stunning, interactive, single-page website using Gemini. The best part? We are going to build it, add functional download links, export the file, and publish it live on the internet for free—all without writing a single line of code.

Whether you are building a resource hub for your classroom, organizing project files, or just want to present information in a more professional way, this AI workflow will change how you use your research.

👇 Links Mentioned in the Video:

Google NotebookLM: https://notebooklm.google/

Gemini: https://gemini.google.com/

Netlify Drop: app.netlify.com/drop

Test it with my NotebookLM: https://notebooklm.google.com/....notebook/422742fa-72

Artemis SLS Specs Demo PDF: https://drive.google.com/file/....d/11-j1pxhoyPvwNNkRM

🤖 Prompts Used in This Video:

Prompt 1: The Blueprint

Act as an expert UX designer and educational technologist. Analyze the attached NotebookLM research and design the architecture for a single-page educational hub about the NASA Artemis Missions. Break the content into logical sections: a compelling 'Mission Overview' hero banner, a 'Deep Dives & Technical Data' section for payloads and engineering specs, and a 'Launch Timeline'. For each section, dictate the heading, the core takeaways to extract from the research, and suggest a specific visual layout. Suggest a space-inspired, modern color palette.

Prompt 2: The Code Generation

Take the structural blueprint we just agreed upon and generate the complete single-page website in a single HTML file. Use Tailwind CSS via CDN. The design language should be clean and technical—deep space blues, stark white text, soft rounded corners, and vibrant accent buttons. Implement a sticky top navigation bar with smooth scrolling to sections. Use responsive CSS flexbox/grid for the technical data cards, and ensure interactive hover states.

Prompt 3: Adding Interactive Elements

Let's make this more interactive. Add a new section just above the footer called 'Downloadable Mission Guides.' Generate a responsive CSS grid of project cards based on the research. Each card needs a placeholder for an icon, a bold title, a brief description, and a high-contrast 'Download PDF' button with a subtle pulse animation on hover.

Prompt 4: Fixing the Download Links

Update the download button for the Space Launch System (SLS) specs. Change the href link destination to this exact URL: https://drive.google.com/file/....d/11-j1pxhoyPvwNNkRM. Keep all the existing Tailwind CSS classes, layout, and hover animations exactly the same.

⏱️ Video Chapters:
0:00 - The Ultimate AI Web Workflow
0:33 - Step 1: Organizing Research in NotebookLM
1:05 - Step 2: The Architect Prompt (Gemini Pro)
2:39 - Step 3: Generating Code with Gemini Canvas
4:21 - Step 4: Adding Interactive Downloads
4:52 - Step 5: Fixing Links (Google Drive Integration)
7:30 - Step 6: Exporting the Code (Windows Notepad Trick)
9:07 - Why You Shouldn't Use the Gemini Share Link
9:44 - Step 8: Hosting for Free with Netlify Drop

Showing 24 out of 25