Chapter 5: Workflow & Tools

Workflow & Tools for HTML + CSS (and soon JavaScript) development.

Think of this as:

• Workflow = your daily routine / step-by-step cooking recipe when building websites
• Tools = your kitchen tools, stove, mixer, knife set (without good ones, even best recipe fails)

simple, modern, realistic workflow — not the fancy 2026 AI-full-stack-meta-framework stuff pros use yet. We keep it focused on pure HTML + CSS (what you’ve been learning so far), but ready to grow.

I’ll explain like we’re sitting together with chai, screen-sharing your VS Code — very detailed, real example at the end.

What is a “Workflow” in Web Development?

Workflow = repeatable process you follow every time you create/update a webpage.

Why care? Random coding → frustration, lost files, hard to fix bugs, can’t show progress to others. Good workflow → fast progress, clean code, easy to come back after 2 weeks, looks professional in portfolio/GitHub.

Beginner HTML + CSS Workflow in 2026 (Step-by-Step)

1. Idea / Planning (5–15 mins) Decide what to build today.
   • Sketch on paper/phone: layout, colors, sections
   • Example: “Personal card → photo left, name + bio right, skills list below”
   • Or: “Clone simple landing page from Unsplash/Dribbble for practice”
2. Setup Project Folder (1 min)
   • Create new folder: my-portfolio-card-1 or restaurant-landing
   • Open in VS Code: File → Open Folder
   • Inside: create files
     text

     PHP

     0 1 2 3 4 5 6 7 8 9 10 11

     restaurant-landing/ ├── index.html ├── style.css ├── images/ │   └── hero-bg.jpg     (download from Unsplash) └── README.md           (optional note)

3. Write HTML Structure First (10–20 mins)
   • Use Emmet: type ! + Tab → full boilerplate
   • Add semantic tags: <header>, <main>, <section>, <footer>
   • Focus on content & meaning (no styles yet)
   • Save often (Ctrl+S)
4. Style with CSS – Mobile First (20–40 mins)
   • Link CSS: <link rel=”stylesheet” href=”style.css”>
   • Start with reset: * { margin:0; padding:0; box-sizing:border-box; }
   • Mobile styles first (small screen)
   • Use Flexbox/Grid for layout
   • Add colors, fonts (Google Fonts), spacing
   • Test on phone view in browser (DevTools → toggle device toolbar)
5. Live Preview & Instant Feedback (ongoing)
   • Right-click index.html → Open with Live Server
   • Every save → browser auto-refreshes → see changes in 0.5 seconds
   • This is the #1 thing that makes learning fun & fast
6. Debug & Polish (10–30 mins)
   • Open Chrome DevTools (F12 or right-click → Inspect)
   • Check mobile/desktop
   • Fix spacing, colors, hover effects
   • Use DevTools to test changes live (edit CSS directly in inspector → copy good ones to file)
7. Version Control / Save Progress (daily)
   • Initialize Git (once per project): open terminal in VS Code (Ctrl+) → git init`
   • Add & commit:
     text

     PHP

     0 1 2 3 4 5 6 7

     git add . git commit -m "First version - hero section done"

   • Push to GitHub (free portfolio showcase): create repo → follow instructions
8. Deploy / Share (optional but awesome – 5 mins)
   • Free forever options in 2026:
     • Netlify (drag-drop folder)
     • Vercel (connect GitHub repo)
     • GitHub Pages (enable in repo settings)
   • Get link like https://webliance-portfolio.netlify.app → share with friends/family
9. Review & Next (end of session)
   • Ask: What looks good? What sucks?
   • Note ideas for next session
   • Close VS Code → feel proud

Core Tools You Should Use Right Now (2026 Beginner Stack)

Optional future adds (after 1–2 months):

• Tailwind CSS IntelliSense (if you try Tailwind)
• GitLens ext (see who changed what line)
• Thunder Client (test APIs later)

Real Example: Your 30-Minute Workflow in Action

Goal today: Build a simple “Chai Break Card”

1. New folder: chai-break-card
2. Open in VS Code
3. Create index.html → type ! Tab
4. Add this structure:

5. Create style.css → paste:

6. Right-click index.html → Open with Live Server
7. Tweak colors/spacing → save → instant magic
8. Happy? → git add . → git commit -m “Chai break card v1”
9. Later → push to GitHub

This exact workflow is what 90% of beginners-turned-pros use daily — even in 2026 for quick prototypes.

How does this feel? Want to try this chai card right now? Or say “next → add mobile responsive to this workflow” or “introduce Git step-by-step” or “when should I learn Tailwind”?

You’re building real habits now — this is how you go from beginner to confident. Chai khatam? Let’s code! ☕🚀