explaingit

mhiskall282/novice-dev-with-ai

Analysis updated 2026-05-18

17PythonAudience · vibe coderComplexity · 1/5Setup · easy

TLDR

A 4-day beginner web development course teaching HTML, CSS, and Flexbox while using AI tools like Claude as guided tutors instead of code generators.

Mindmap

mindmap
  root((Novice Dev AI))
    What it does
      4-day web course
      AI as guided tutor
      PR based submissions
    Tech stack
      HTML and CSS
      Claude
      GitHub Copilot
    Use cases
      Learn HTML and CSS
      Practice PR workflow
      Ask AI for explanations
    Audience
      Coding beginners
      Bootcamp students

Code map

Detail Auto

An interactive map of this repo's files and how they connect — its source is parsed live in your browser. Click Visualize to build it.

filefunction / class

What do people build with it?

USE CASE 1

Follow a 4-day live Zoom curriculum to learn HTML, CSS, and Flexbox from scratch.

USE CASE 2

Practice a real pull request workflow by submitting daily coding work on a personal branch.

USE CASE 3

Use a prompt template to ask an AI to explain a bug instead of asking it to write the fix.

What is it built with?

HTMLCSSClaudeGitHub CopilotGit

How does it compare?

mhiskall282/novice-dev-with-ai0petru/sentimoalingalingling/akasha-wechat
Stars171717
LanguagePythonPythonPython
Setup difficultyeasymoderatehard
Complexity1/53/54/5
Audiencevibe coderdeveloperdeveloper

Figures from each repo's GitHub metadata at analysis time.

How do you get it running?

Difficulty · easy Time to first run · 30min

Requires joining live Zoom sessions and using Git for the pull request workflow.

In plain English

This repository is a structured 4-day classroom for learning basic web development from scratch, designed for complete beginners. Each day is a 2-hour live session conducted over Zoom. The curriculum covers setting up a development environment on day one, then progresses through HTML basics, CSS styling, and finally CSS Flexbox and responsive design, ending with each student building a personal web page. What makes this repository different from a standard tutorial is the integration of AI tools directly into the learning workflow. The project uses Claude and GitHub Copilot as teaching aids, but the AI is configured to explain and guide rather than just write code for the student. A hidden folder called .claude contains the AI's instruction files, including specialized tutors for HTML and CSS, code review standards, and 125 knowledge topics the AI can draw from when answering questions. Students are told not to edit this folder. Students follow an 8-step workflow at the start of every session: pull the instructor's latest changes, switch to their personal branch, open their project folder, start a live server that refreshes the browser automatically as they type, then read the lesson notes before writing any code. Before asking the AI for help, students fill in a prompt template with their current module, goal, existing code, and specific question. The template approach is intentional: the repository treats asking an AI to write code for you as the wrong move, and asking it to explain why your code is not working as the right one. The full curriculum has 8 modules that go beyond the 4 live days. After the core sessions, students work through CSS Grid, responsive design, accessibility, and basic JavaScript. All student work goes into individual subfolders and is submitted via pull requests, giving everyone practice with a real developer workflow from day one. The repository is structured as both a student resource and an instructor playbook. A teaching guide gives the instructor a minute-by-minute script for each Zoom session. The code standards files define what the AI uses when reviewing student HTML and CSS.

Copy-paste prompts

Prompt 1
Help me set up the 8-step session workflow, from pulling instructor changes to starting a live server.
Prompt 2
Fill in the prompt template to ask an AI tutor why my CSS Flexbox layout isn't centering correctly.
Prompt 3
Explain the difference between asking an AI to write my code versus asking it to explain my bug.
Prompt 4
Walk me through building my personal web page using the day-one HTML and CSS lessons.

Frequently asked questions

What is novice-dev-with-ai?

A 4-day beginner web development course teaching HTML, CSS, and Flexbox while using AI tools like Claude as guided tutors instead of code generators.

What language is novice-dev-with-ai written in?

Mainly Python. The stack also includes HTML, CSS, Claude.

How hard is novice-dev-with-ai to set up?

Setup difficulty is rated easy, with roughly 30min to a first successful run.

Who is novice-dev-with-ai for?

Mainly vibe coder.

Open on GitHub → Explain another repo

This repo across BitVibe Labs

Verify against the repo before relying on details.