DESIGNGuide + Studio
Web Design Guide & Studio
Plan a useful website, experiment with colors and typography, and export a design brief and CSS.
12 lessons · Live design tools
Open Design Studio →Free resources. Practical skills.Learn it.
Learn it.
Build it.
Put it to work.
Design a website, practice your code, or automate a task. Explore interactive guides, useful tools, and quizzes that explain the reasoning—created by Laurence Svekis.
New ways to learn and createMore than a guide.
See all guides →More than a guide.
Something you can use.
Read a lesson, try it in a studio, and leave with a plan or a result for your own project.
LEARNGuide + Studio
Vibe Learning Guide & Studio
Turn a topic into a practice plan, build recall, and keep a workbook of what you can explain and do.
12 lessons · Learning Studio
Explore Vibe Learning →V4Guide + Studio
Vibe Coding for Beginners V4
Take a small app from idea to tested result with guided lessons, Prompt Studio, and project practice.
16 lessons · Prompt Studio
Start Vibe Coding V4 →Just added · 15 quizzesChallenge your thinking.
Browse all 58 quizzes →Challenge your thinking.
Understand every answer.
150 new questions on frontend code, Google Apps Script, vibe coding, and vibe learning. Work through real scenarios, read the explanations, and return to your saved progress.
JavaScript: Async UI States & Race Conditions
Read code, spot layout bugs, and reason about browser behavior.
10 questions · Intermediate
Try this quiz →Apps Script: Range & Array Code Challenges
Work through spreadsheet ranges, events, callbacks, and reliable automation.
10 questions · Intermediate
Try this quiz →Vibe Coding: Evidence-Led Debugging
Practice clear requirements, focused changes, and evidence-led debugging.
10 questions · Intermediate
Try this quiz →Vibe Learning: Retrieval & Misconception Checks
Check your understanding of recall, feedback, and independent practice.
10 questions · Intermediate
Try this quiz →Your progress stays in this browser. Quizzes include explanations, answer review, and another attempt when you’re ready.
A useful addition to your workflowPlan the prompt.
View all 37 tools →Plan the prompt.
Fine-tune the page.
Prepare clear AI instructions, review a prompt, or work out a layout and color combination. These tools help with a specific task so you can get back to building.
AI
AI Prompt Generator & Writing Guide
Build detailed prompts with task templates, context, examples, output formats, and a practical writing guide.
Open tool →AI
AI Context Pack Builder
Organize reference material into a labeled context pack with sources and instructions.
Open tool →AI
Prompt Checklist Reviewer
Inspect prompt structure with transparent local checks and create a revision brief.
Open tool →CSS
CSS Grid Builder
Build responsive auto-fit or fixed-column grids with a resizable preview and ready-to-copy CSS.
Open tool →Accessibility
Color Contrast Checker
Check WCAG contrast ratios for text and background colors.
Open tool →CSS
Fluid Typography Calculator
Generate CSS clamp() font sizes that scale smoothly between your chosen viewport widths.
Open tool →The AI preparation tools create prompts and structured inputs locally; they do not call an AI model.
Your learning library
Explore every guide →Pick a skill. Start practicing.
Explore the newer studios alongside the HTML, CSS, JavaScript, design, and automation guides.
DESIGNOpen guide →LEARNOpen guide →V4Open guide →HTMLOpen guide →CSSOpen guide →JSOpen guide →GASOpen guide →WEBOpen guide →
Web Design Guide & Studio
Plan a useful website, experiment with colors and typography, and export a design brief and CSS.
Vibe Learning Guide & Studio
Turn a topic into a practice plan, build recall, and keep a workbook of what you can explain and do.
Vibe Coding for Beginners V4
Take a small app from idea to tested result with guided lessons, Prompt Studio, and project practice.
HTML Learning Guide
Create meaningful page structure with semantic elements, forms, and accessible interactions.
CSS Learning Guide
Build responsive layouts and reusable visual styles with hands-on CSS exercises.
JavaScript Learning Guide
Build browser interactions and reason through data, events, async code, and debugging.
Google Apps Script Learning Guide
Automate Google Workspace and build reliable workflows through practical examples.
Web Design Learning Guide
Work through the design process with layout labs, critique challenges, and accessibility checks.
Looking for an earlier Vibe Coding edition? All guide versions are in the directory.
Connect what you learn
Find your next step.
Pair a guide with a practical tool or a quiz to put the ideas to use.
Build your frontend foundations
Start with meaningful HTML, add responsive CSS, then bring the page to life with JavaScript.
Automate everyday work
Learn Apps Script, then test your reasoning about ranges, event guards, and resumable jobs.
Design a website with purpose
Learn the design process and use the studio to explore readable type, clear colors, and consistent spacing.
Learn and build with AI
Use guided practice to develop your understanding, then apply it to a small app you can test and explain.
Explore DiscoveryVIP
More ways to keep learning
Explore courses, books, and the wider DiscoveryVIP collection when you’re ready to go deeper.
Learn with Laurence
View learning paths →Turn curiosity into working skills
Explore practical courses, coding tutorials, and AI-supported learning built around real projects.
U
Udemy courses
JavaScript, Google Apps Script, AI learning, productivity, and web development.
Browse courses ↗BBaseScripts
Code examples, tutorials, and practical developer resources from Laurence Svekis.
Explore tutorials ↗VVibe Learning
A guided approach to learning any topic with AI as an active learning partner.
Start learning ↗Fresh tutorials
See all BaseScripts articles →Latest from BaseScripts
Recent coding articles and practical walkthroughs, refreshed automatically from the BaseScripts feed.
BaseScripts
Free AI and Developer Tools: Build Faster, Work Smarter, and Improve Your Development Workflow
Discover a growing collection of free browser-based developer tools on DiscoveryVIP, designed to help you work with AI, generate better code, format data, improve websites, and si…
Read tutorial ↗BaseScriptsVibe Coding V4: A Beginner’s Playbook for Building Real Skills with AI
Learn how to turn your ideas into working applications with AI, even if you have never written code before. Discover a practical, step-by-step approach to vibe coding that helps y…
Read tutorial ↗BaseScriptsJavaScript Is Changing: Learn Vibe Coding with 4 Free Interactive Guides
JavaScript development is changing quickly. We still need to understand the fundamentals—variables, functions, objects, arrays, events, the DOM, APIs, debugging, and application s…
Read tutorial ↗Books by Laurence
Explore all selected books →Go deeper with a structured guide
Project-based books about JavaScript, practical AI, critical thinking, Google Workspace automation, and Vibe Learning.
JavaScript from Beginner to Professional
Learn JavaScript quickly by building fun, interactive, and dynamic web apps, games, and pages
A comprehensive project-based path through core JavaScript, browser interaction, asynchronous code, regular expressions, Canvas, and real web applications. This project-focused guide develops practical JavaScript and frontend skills through browser examples, exercises, games, APIs, and interactive applications. Readers strengthen problem-solving skills while learning how the language, DOM, events, data, and modern development patterns work together.
Find on Amazon ↗Gemini with Google Apps Script
A Complete Beginner’s Guide to Building AI-Powered Tools in Google Workspace
Build practical Gemini-powered tools for Google Docs, Sheets, Gmail, and Apps Script while learning request structure, validation, error handling, and responsible automation. Readers learn how Google Apps Script, Gemini, APIs, and Google Workspace services can work together to create useful automations and AI-powered applications. The emphasis is on practical workflows, reusable code, responsible data handling, and projects that can be adapted for real work.
Find on Amazon ↗Learning That Lasts Using AI
Vibe Learning — A Practical Guide to Using AI Without Replacing Thinking
A human-centred framework for using AI to strengthen intent, practice, feedback, reflection, retention, and transferable understanding. This book explores human-centred ways to use AI for learning, teaching, feedback, retention, and deeper understanding without replacing critical thinking. It provides practical prompts, activities, reflection strategies, and repeatable methods for building durable knowledge and independent judgment.
Find on Amazon ↗Latest insights
Browse all articles →Learn something useful
AI
Vibe Coding: A Practical Beginner’s Guide
Learn a repeatable workflow for turning an idea into working software with AI—without losing control of the code.
Read article →BooksWhich JavaScript Book Should You Start With?
Choose the right JavaScript learning path based on your experience, goals, and preferred style of practice.
Read article →Vibe CodingVibe Coding from Idea to Testable Specification
Turn a rough app idea into a focused specification an AI coding assistant can implement and you can verify.
Read article →