book

Modern Web Design in 30 Days

Name: Modern Web Design in 30 Days
Author: Laurence Lars Svekis
ISBN: 9781807604493

by Laurence Lars Svekis

May 2026

Beginner

358 pages

3h 5m

English

Packt Publishing

Read now

Unlock full access

Preface
Who this book is forGet in touch
What Is Web Design & How the Web Really Works
Learning Objectives (What You Will Be Able to Do)Vibe Learning Mindset (Chapter Focus)1. What Is Web Design?Web Design vs Web DevelopmentExample: A Simple Blog Page2. The Three Core Layers of the Web (Deeper Understanding)HTML — The Structure LayerCSS — The Presentation LayerJavaScript — The Behavior Layer3. How a Website Loads (Step-by-Step Mental Model)Example Analogy: A Restaurant4. Learning Object 1 — Identify Web Layers in the WildExercise 1 — Website BreakdownExercise 2 — Screenshot & Annotate5. Learning Object 2 — Exploring the Browser ToolsExercise 3 — Inspecting HTMLExercise 4 — Live Style Changes6. Learning Object 3 — Thinking Like a Web DesignerExercise 5 — Design IntentExercise 6 — UX AwarenessAI-Assisted Learning Prompts (Expanded)Prompt 1 — Mental Model ReinforcementPrompt 2 — Contrast LearningPrompt 3 — Guided CuriosityPrompt 4 — Reflection Support7. Learning Object 4 — Mini Experiments (Low Risk)Exercise 7 — Breaking & Fixing (Conceptual)Exercise 8 — Role SwapKnowledge Check (Expanded Quiz)Question 1Question 2Question 3Reflection & Learning LogVibe Learning Wrap-UpDay 2 Preview
Your First Website: Writing HTML from Scratch
Learning ObjectivesVibe Learning Mindset (Chapter Focus)What You’re Building Today1. What Is HTML (Really)?2. The Minimal HTML Page (Your Foundation)What Each Part Does3. Learning Object 1 — Build Your First FileExercise 1 — Create index.html4. Core HTML Elements You’ll Use ConstantlyHeadingsParagraphsLinks (Anchor Tags)ImagesLists5. Learning Object 2 — Build a Real Starter HomepageWhy This Structure Matters6. Learning Object 3 — Debugging Like a BuilderMistake 1 — Forgetting closing tagsMistake 2 — Incorrect nestingMistake 3 — Broken image path7. MicroExperiments (Vibe Learning Core)Exercise 2 — Change One Thing at a TimeExercise 3 — “Break It On Purpose”AI Prompts (Chapter 2)Prompt 1 — Explain My CodePrompt 2 — Idea GenerationPrompt 3 — Debugging HelperPrompt 4 — Accessibility CheckMini Project (End of Chapter)Exercise 4 — “About Page Upgrade”Knowledge Check (Quiz + Explanations)Q1: What belongs inside <head> ?Q2: Why is alt important?Q3: Which is a semantic element?Reflection (Vibe Learning)Chapter WrapUpDay 3 Preview
Text, Links, Images & Page Structure
Learning ObjectivesVibe Learning Mindset (Chapter Focus)What You’re Building Today1. How People Read on the WebVisual Hierarchy (Without CSS Yet)2. Headings: Your Page’s SkeletonHeading Levels and MeaningExercise 1 — Improve Heading Structure3. Paragraphs, Line Breaks & EmphasisParagraphsEmphasisLine Breaks (Use Sparingly)4. Links: Navigation & ActionsBasic LinkOpening in a New TabEmail LinkCommon Beginner MistakeExercise 2 — Improve Your Links5. Images: Meaningful, Not DecorativeBasic Image TagFolder Organization (Best Practice)Exercise 3 — Image Audit6. Semantic Page Structure (Expanded)Common Layout StructureExample: Improved Page Layout7. Learning Object — User Flow ThinkingExercise 4 — Reading Path8. MicroExperiments (Vibe Learning Core)Exercise 5 — Small Changes, Big ImpactExercise 6 — Content ReductionAI Prompts (Chapter 3)Prompt 1 — Content ClarityPrompt 2 — Accessibility ReviewPrompt 3 — UX PerspectivePrompt 4 — Structural SuggestionsMini Project — Homepage Content UpgradeExercise 7Knowledge Check (Quiz + Explanations)Q1: Why use semantic elements?Q2: What makes good link text?Q3: Why avoid long paragraphs on the web?Reflection (Vibe Learning)Chapter WrapUpDay 4 Preview
Introduction to CSS: Making Your Website Look Like a Website
Learning ObjectivesVibe Learning Mindset (Chapter Focus)What You’re Building Today1. What Is CSS (And Why It Exists)?CSS Controls:2. How CSS Works (Mental Model)Exercise 1 — Read CSS Out Loud3. Connecting CSS to HTMLStep 1 — Create a CSS FileStep 2 — Link CSS in HTML <head>Exercise 2 — Test the Connection4. Styling Text (Your First Design Tools)Font BasicsFont SizeText ColorExercise 3 — Improve Readability5. Colors & BackgroundsBackground ColorSection BackgroundsColor Choices MatterExercise 4 — Color Experiment6. Spacing: Margin & Padding (Critical Concept)Margin — Space outside an elementPadding — Space inside an elementVisual DifferenceExercise 5 — Spacing Control7. Learning Object — Styling Your Page Step by StepStarter CSS Example8. MicroExperiments (Vibe Learning Core)Exercise 6 — One Change RuleExercise 7 — Remove & CompareAI Prompts (Chapter 4)Prompt 1 — Design FeedbackPrompt 2 — Color TheoryPrompt 3 — Debugging HelperPrompt 4 — Incremental ImprovementMini Project — First Visual UpgradeExercise 8Knowledge Check (Quiz + Explanations)Q1: What does CSS stand for?Q2: Where should CSS be linked?Q3: What is padding?Reflection (Vibe Learning)Chapter WrapUpDay 5 Preview
CSS Selectors & the Cascade: How Styles Are Applied
Learning ObjectivesVibe Learning Mindset (Chapter Focus)What You’re Building Today1. What Is a CSS Selector?Read Selectors Like Sentences2. Element (Type) SelectorsExercise 1 — Element Selector Practice3. Class Selectors (Reusable Styling)HTMLCSSWhy Classes MatterExercise 2 — Create Reusable Classes4. ID Selectors (Unique Elements)HTMLCSSExercise 3 — ID Usage5. Combining Selectors (More Control)Another ExampleExercise 4 — Context Styling6. The Cascade (The Core Idea)7. Specificity (Who Wins?)ExampleSpecificity Order (Simplified)Exercise 5 — Predict the Outcome8. Order Matters (Last Rule Wins)Exercise 6 — Order Experiment9. Inheritance (What Flows Down)Not Everything InheritsExercise 7 — Inheritance Test10. Common Beginner Mistakes (And Fixes)❌ “My CSS Isn’t Working”❌ Overusing IDs❌ Styling Without StructureAI Prompts (Chapter 5)Prompt 1 — Debugging HelpPrompt 2 — Selector ImprovementPrompt 3 — Learning ReinforcementPrompt 4 — Refactoring SupportMini Project — CSS Cleanup & ControlExercise 8Knowledge Check (Quiz + Explanations)Q1: Which selector is most specific?Q2: If two rules have equal specificity, which applies?Q3: Which property is inherited?Reflection (Vibe Learning)Chapter Wrap-UpDay 6 Preview
The CSS Box Model: Spacing, Borders & Visual Balance
Learning ObjectivesVibe Learning Mindset (Chapter Focus)What You’re Building Today1. Every HTML Element Is a BoxThe Four Parts of the Box Model2. Padding: Space Inside the ElementIndividual Padding SidesShorthand PaddingExercise 1 — Padding Exploration3. Margin: Space Outside the ElementVertical Spacing ControlExercise 2 — Vertical Rhythm4. Borders: Seeing the InvisibleExercise 3 — Debug with Borders5. Width, Height & Box SizingDefault Behavior (Important!)Example Problem6. Fixing the Problem: boxsizingBest PracticeExercise 4 — Box Sizing Test7. Centering Content (Beginner Win)Center a Block HorizontallyExercise 5 — Content Centering8. Common Box Model Mistakes❌ Using <br> Instead of Margin❌ Inconsistent Spacing❌ Padding vs Margin Confusion9. Learning Object — Spacing SystemExercise 6 — Create a Spacing Scale10. MicroExperiments (Vibe Learning Core)Exercise 7 — Remove All SpacingExercise 8 — Compare Two VersionsAI Prompts (Chapter 6)Prompt 1 — Layout DiagnosisPrompt 2 — Visual BalancePrompt 3 — Beginner DebuggingPrompt 4 — Design ThinkingMini Project — Spacing UpgradeExercise 9Knowledge Check (Quiz + Explanations)Q1: Which property controls space inside an element?Q2: What does boxsizing: borderbox do?Q3: Why are borders useful for beginners?Reflection (Vibe Learning)Chapter WrapUpDay 7 Preview
CSS Layout Basics: Display, Flow & Positioning
Learning ObjectivesVibe Learning Mindset (Chapter Focus)What You’re Building Today1. Normal Document Flow (The Default Behavior)Example2. BlockLevel ElementsBlock ExampleExercise 1 — Block Observation3. Inline ElementsInline ExampleExercise 2 — Inline Awareness4. InlineBlock Elements (The Hybrid)ExampleExercise 3 — InlineBlock Cards5. The display Property (Your Layout Switch)ExampleExercise 4 — Display Experiments6. Hiding Elements (Without Deleting Them)Exercise 5 — Toggle Visibility7. Positioning Basics (Introduction)Static (Default)Relative PositioningExercise 6 — Gentle Positioning8. Why Layouts Break (Common Beginner Issues)❌ Expecting Inline Elements to Accept Width❌ Fighting the Flow❌ Overusing position9. Learning Object — Flow AwarenessExercise 7 — HTML Order Test10. MicroExperiments (Vibe Learning Core)Exercise 8 — Layout PredictionsExercise 9 — SimplifyAI Prompts (Chapter 7)Prompt 1 — Layout ExplanationPrompt 2 — Debugging HelperPrompt 3 — Mental ModelPrompt 4 — Beginner MistakesMini Project — Navigation Bar LayoutExercise 10Knowledge Check (Quiz + Explanations)Q1: Which elements stack vertically by default?Q2: Why use inlineblock?Q3: What controls layout order?Reflection (Vibe Learning)Chapter WrapUpDay 8 Preview
Flexbox Fundamentals: Designing One-Dimensional Layouts
Learning ObjectivesVibe Learning Mindset (Chapter Focus)What You’re Building Today1. What Is Flexbox?2. Flex Container vs Flex ItemsFlex ContainerFlex ItemsExercise 1 — Identify Flex Roles3. Main Axis vs Cross Axis (Critical Concept)Visual ThinkingExercise 2 — Axis Awareness4. flexdirection: Controlling Layout DirectionExercise 3 — Direction Switch5. Aligning Items with justifycontentExample — Center NavigationExercise 4 — Alignment Practice6. Aligning Items with alignitemsExample — Vertical CenteringExercise 5 — CrossAxis Control7. Flexbox in Real Layouts (Navigation Example)HTMLCSS8. Spacing with gap (Modern Best Practice)Exercise 6 — Replace Margins with Gap9. Common Flexbox Mistakes (And Fixes)❌ Forgetting display: flex❌ Mixing Up Axes❌ Applying Flexbox to the Wrong Element10. Learning Object — Predict Before You CodeExercise 7 — Prediction Practice11. MicroExperiments (Vibe Learning Core)Exercise 8 — Flex Layout VariationsExercise 9 — Column LayoutAI Prompts (Chapter 8)Prompt 1 — Flexbox DebuggingPrompt 2 — Axis ExplanationPrompt 3 — Layout SuggestionPrompt 4 — Refactoring HelpMini Project — Flexbox Card RowExercise 10Knowledge Check (Quiz + Explanations)Q1: What does Flexbox control?Q2: Which property aligns items along the main axis?Q3: Where does display: flex go?Reflection (Vibe Learning)Chapter WrapUpDay 9 Preview
Flexbox Advanced: Wrapping, Sizing & Responsive Behavior
Learning ObjectivesVibe Learning Mindset (Chapter Focus)What You’re Building Today1. Why Layouts Break on Small Screens2. Wrapping Flex Items with flexwrapEnable WrappingExercise 1 — Wrapping Experiment3. Combined Shorthand: flexflowExercise 2 — FlexFlow Practice4. Flexible Sizing: The flex PropertyWhat This MeansExercise 3 — Size Control5. Understanding flexgrowExercise 4 — Proportional Layout6. Understanding flexshrinkExercise 5 — Shrink Test7. Understanding flexbasisExercise 6 — Responsive Card Grid8. Aligning Wrapped RowsExercise 7 — Row Alignment9. Common Flexbox Responsiveness Mistakes❌ Fixed Widths Everywhere❌ Forgetting Wrapping❌ Overusing Media Queries Too Early10. Learning Object — Think in ConstraintsExercise 8 — ConstraintBased Thinking11. MicroExperiments (Vibe Learning Core)Exercise 9 — Resize & ObserveExercise 10 — Compare Two LayoutsAI Prompts (Chapter 9)Prompt 1 — Responsive DebuggingPrompt 2 — Flex Property BreakdownPrompt 3 — Layout StrategyPrompt 4 — Best PracticesMini Project — Responsive Feature GridExercise 11Knowledge Check (Quiz + Explanations)Q1: What does flexwrap: wrap do?Q2: What does flex: 1 1 250px mean?Q3: Which property aligns wrapped rows?Reflection (Vibe Learning)Chapter WrapUpDay 10 Preview

Responsive Design Fundamentals: Mobile-First & Media Queries
Learning ObjectivesVibe Learning Mindset (Chapter Focus)What You’re Building Today1. What Is Responsive Design (Really)?2. MobileFirst ThinkingThe Old Way (DesktopFirst)The Modern Way (MobileFirst)Exercise 1 — Mobile Perspective3. Media Queries: Conditional CSS4. Common Breakpoints (Guidelines, Not Rules)Vibe Rule:5. MobileFirst CSS StructureExercise 2 — MobileFirst Nav6. Adapting Layouts with Media QueriesExample — Layout EnhancementExercise 3 — Layout Shift7. Typography & Spacing ResponsivenessExample — Responsive Font SizeExercise 4 — Readability Test8. Showing & Hiding Content ResponsivelyExampleExercise 5 — Conditional Content9. Common Responsive Design Mistakes❌ Too Many Breakpoints❌ Relying Only on Media Queries❌ Hiding Core Content10. Learning Object — Breakpoint ReasoningExercise 6 — Ask “Why”11. MicroExperiments (Vibe Learning Core)Exercise 7 — Resize & PredictExercise 8 — SimplifyAI Prompts (Chapter 10)Prompt 1 — Responsive ReviewPrompt 2 — Breakpoint StrategyPrompt 3 — MobileFirst CoachingPrompt 4 — Accessibility CheckMini Project — Responsive Page UpgradeExercise 9Knowledge Check (Quiz + Explanations)Q1: What does “mobilefirst” mean?Q2: What does minwidth mean in a media query?Q3: When should you use a media query?Reflection (Vibe Learning)Chapter WrapUpDay 11 Preview
CSS Grid Fundamentals: Two‑Dimensional Layouts
Learning ObjectivesVibe Learning Mindset (Chapter Focus)What You’re Building Today1. When to Use Grid vs FlexboxUse Flexbox When:Use Grid When:2. The Grid Mental Model3. Defining ColumnsBasic Grid ColumnsThe fr Unit (Fractional Space)Exercise 1 — Column Control4. Defining RowsExercise 2 — Row Awareness5. Gaps: Clean Spacing Between Grid ItemsExercise 3 — Spacing Consistency6. Grid Items & Placement BasicsManual Placement (Intro)Exercise 4 — Item Placement7. RealWorld Example: Content GridHTMLCSSExercise 5 — Grid Refactor8. Responsive Grid with autofit & minmaxExercise 6 — Resize & Observe9. Grid + Media Queries (Optional Enhancement)Exercise 7 — Layout Enhancement10. Common Grid Mistakes (And Fixes)❌ Using Grid for Simple Rows❌ OverSpecifying Rows❌ Mixing Layout Logic11. Learning Object — Layout PlanningExercise 8 — Sketch Before Code12. MicroExperiments (Vibe Learning Core)Exercise 9 — Predict the GridExercise 10 — SimplifyAI Prompts (Chapter 11)Prompt 1 — Grid StrategyPrompt 2 — Responsive HelpPrompt 3 — Debugging GridPrompt 4 — Refactoring AdviceMini Project — Responsive Grid SectionExercise 11Knowledge Check (Quiz + Explanations)Q1: When should you use Grid instead of Flexbox?Q2: What does 1fr represent?Q3: What does autofit do?Reflection (Vibe Learning)Chapter WrapUpDay 12 Preview
Typography & Color in Web Design: Readability, Hierarchy & Mood
Learning ObjectivesVibe Learning Mindset (Chapter Focus)What You’re Building Today1. Why Typography Matters on the Web2. Web Fonts: What You Actually Need to KnowSerif vs SansSerif (Quick Rule)System Fonts (BeginnerFriendly)Exercise 1 — Font Swap3. Font Size & ReadabilityBase Font SizeLine Height (Critical!)Exercise 2 — Readability Test4. Creating Visual Hierarchy with TypographyExample HierarchyWeight & Spacing Matter TooExercise 3 — Hierarchy Audit5. Color Basics (Without Overwhelm)Beginner Rule:6. Choosing a Simple Color PaletteUse Variables (Optional but Powerful)Exercise 4 — Palette Creation7. Color Contrast & AccessibilityGood Contrast ExampleExercise 5 — Contrast Check8. Using Color for MeaningExample — LinksAvoid:Exercise 6 — Purposeful Color9. Common Typography & Color Mistakes❌ Too Many Fonts❌ Low Contrast❌ Inconsistent Styling10. Learning Object — Design System ThinkingExercise 7 — Define Your Design Rules11. MicroExperiments (Vibe Learning Core)Exercise 8 — Remove ColorExercise 9 — One Change RuleAI Prompts (Chapter 12)Prompt 1 — Typography ReviewPrompt 2 — Color Palette HelpPrompt 3 — UX PerspectivePrompt 4 — Accessibility CheckMini Project — Visual Polish PassExercise 10Knowledge Check (Quiz + Explanations)Q1: What is typography primarily about?Q2: What is a good base font size for body text?Q3: Why limit color usage?Reflection (Vibe Learning)Chapter WrapUpDay 13 Preview
Buttons, Forms & User Interaction Design
Learning ObjectivesVibe Learning Mindset (Chapter Focus)What You’re Building Today1. Buttons vs Links (Critical Distinction)Use a Link When:Use a Button When:2. Creating Buttons with HTMLBasic ButtonButton Inside a FormExercise 1 — Button Audit3. Styling Buttons with CSSBasic Button StyleHover State (Feedback!)Exercise 2 — Button Variations4. Forms: How Users Give You Information5. Basic Form StructureWhy Labels Matter6. Common Input TypesExercise 3 — Input Selection7. Styling Forms for ClarityBasic Form StylesExercise 4 — Form Readability8. Accessibility Basics for FormsKey Rules:Exercise 5 — Accessibility Check9. Visual Cues & User ConfidenceExample — Focus StateExercise 6 — Feedback Design10. Common Interaction Design Mistakes❌ Unclear Button Labels❌ Too Many Actions❌ Poor Spacing11. Learning Object — Interaction FlowExercise 7 — User Journey12. MicroExperiments (Vibe Learning Core)Exercise 8 — Button LanguageExercise 9 — SimplifyAI Prompts (Chapter 13)Prompt 1 — UX ReviewPrompt 2 — Accessibility HelpPrompt 3 — Interaction CopyPrompt 4 — User PsychologyMini Project — Contact SectionExercise 10Knowledge Check (Quiz + Explanations)Q1: When should you use a <button> instead of a link?Q2: Why are labels important?Q3: What improves user confidence?Reflection (Vibe Learning)Chapter WrapUpDay 14 Preview
JavaScript Foundations: Bringing Websites to Life
Learning ObjectivesVibe Learning Mindset (Chapter Focus)1. What Is JavaScript (In Plain Terms)?What JavaScript Is NOT2. How JavaScript Fits into a Web PageExternal JavaScript File (Recommended)Exercise 1 — Script Connection Test3. The Browser Console (Your Best Friend)Using console.log()Exercise 2 — Console Experiments4. Variables: Storing InformationCreating VariablesLogging VariablesExercise 3 — Variable Practice5. Data Types (Just the Essentials)Strings (Text)NumbersBooleans (True / False)Exercise 4 — Identify the Type6. Reading JavaScript Like a HumanExercise 5 — Predict First7. Changing the Web Page (First Taste)Selecting an ElementChanging TextExercise 6 — Page Interaction8. Common Beginner JavaScript Mistakes❌ Forgetting to Refresh❌ Typos❌ Panic on Errors9. Learning Object — Cause & Effect ThinkingExercise 7 — Trace the Logic10. MicroExperiments (Vibe Learning Core)Exercise 8 — One Line at a TimeExercise 9 — Change ValuesAI Prompts (Chapter 14)Prompt 1 — Code ExplanationPrompt 2 — Beginner DebuggingPrompt 3 — Concept ReinforcementPrompt 4 — Learning StrategyMini Project — JavaScript Introduction DemoExercise 10Knowledge Check (Quiz + Explanations)Q1: What does JavaScript primarily do?Q2: Where should external JavaScript usually be linked?Q3: What is a variable?Reflection (Vibe Learning)Chapter WrapUpDay 15 Preview
JavaScript Events: Responding to User Actions
Learning ObjectivesVibe Learning Mindset (Chapter Focus)What You’re Building Today1. What Is an Event?RealWorld Analogy2. The Event Flow (Big Picture)3. Selecting Elements for EventsExercise 1 — Element Selection4. Adding an Event ListenerWhy addEventListener?5. Your First Interactive ButtonHTMLJavaScriptExercise 2 — Modify the Response6. Understanding Event HandlersExercise 3 — Named Function7. Common Event Types (Beginner Essentials)Exercise 4 — Explore Events8. Events and Forms (Intro)Exercise 5 — Safe Form Handling9. The event Object (First Look)Exercise 6 — Event Curiosity10. Common Beginner Event Mistakes❌ Forgetting to Select the Element❌ Misspelling Event Names❌ Inline Events11. Learning Object — Cause & Effect MappingExercise 7 — Event Mapping12. MicroExperiments (Vibe Learning Core)Exercise 8 — Predict Before ClickExercise 9 — Remove the ListenerAI Prompts (Chapter 15)Prompt 1 — Event ExplanationPrompt 2 — Debugging HelpPrompt 3 — Event IdeasPrompt 4 — Code ReviewMini Project — Interactive CalltoActionExercise 10Knowledge Check (Quiz + Explanations)Q1: What is a JavaScript event?Q2: What does addEventListener do?Q3: Why use event.preventDefault()?Reflection (Vibe Learning)Chapter WrapUpDay 16 Preview
JavaScript Logic: Conditions, Decisions & User Feedback
Learning ObjectivesVibe Learning Mindset (Chapter Focus)What You’re Building Today1. What Is Logic in JavaScript?2. Boolean Values: True or FalseExercise 1 — Boolean Thinking3. Comparison OperatorsExampleExercise 2 — Compare Values4. The if Statement (Core Decision Tool)ExampleExercise 3 — Simple Condition5. else: Handling the Other PathExercise 4 — Two Outcomes6. Multiple Conditions with else ifExercise 5 — Tiered Feedback7. Logical Operators (&&, ||, !)AND (&&)OR (||)NOT (!)Exercise 6 — Combine Conditions8. Using Logic with User InteractionHTMLJavaScriptExercise 7 — Logic + Event9. Guard Clauses (BeginnerFriendly Safety)Exercise 8 — Input Safety10. Common Beginner Logic Mistakes❌ Using = Instead of ===❌ Forgetting All Paths❌ Overcomplicating Conditions11. Learning Object — Think in QuestionsExercise 9 — Question Mapping12. MicroExperiments (Vibe Learning Core)Exercise 10 — Flip the LogicExercise 11 — Break It SafelyAI Prompts (Chapter 16)Prompt 1 — Logic ExplanationPrompt 2 — Debugging HelpPrompt 3 — Practice IdeasPrompt 4 — RefactoringMini Project — DecisionBased InteractionExercise 12Knowledge Check (Quiz + Explanations)Q1: What do booleans represent?Q2: What does === check?Q3: Why use else if?Reflection (Vibe Learning)Chapter WrapUpDay 17 Preview
JavaScript Functions: Reusable Logic & Clean Code
Learning ObjectivesVibe Learning Mindset (Chapter Focus)What You’re Building Today1. What Is a Function?RealWorld Analogy2. Creating Your First FunctionCalling the FunctionExercise 1 — Define & Call3. Functions with Parameters (Input)How to Read ThisExercise 2 — Personalization4. Multiple ParametersExercise 3 — MultiInput Function5. Returning Values (Instead of Logging)Why return MattersExercise 4 — Return Practice6. Functions + Events (Best Practice)Exercise 5 — Refactor Event Logic7. Refactoring Repeated CodeBefore (Repeated Logic)After (Function)Exercise 6 — Spot the Pattern8. Naming Functions ClearlyExercise 7 — Rename for Clarity9. Scope (BeginnerFriendly Intro)Why This Is GoodExercise 8 — Scope Awareness10. Common Beginner Function Mistakes❌ Forgetting to Call the Function❌ Too Many Responsibilities❌ Overusing Global Variables11. Learning Object — Think in ActionsExercise 9 — Action Mapping12. MicroExperiments (Vibe Learning Core)Exercise 10 — Change the FunctionExercise 11 — Break & FixAI Prompts (Chapter 17)Prompt 1 — Function ExplanationPrompt 2 — Refactoring HelpPrompt 3 — Naming AdvicePrompt 4 — Learning ReinforcementMini Project — FunctionDriven FeatureExercise 12Knowledge Check (Quiz + Explanations)Q1: What is a function?Q2: What does return do?Q3: Why use functions?Reflection (Vibe Learning)Chapter WrapUpDay 18 Preview
JavaScript Arrays & Loops: Working with Lists of Data
Learning ObjectivesVibe Learning Mindset (Chapter Focus)What You’re Building Today1. What Is an Array?RealWorld Analogy2. Accessing Array Values (Indexing)Exercise 1 — Index Awareness3. Updating ArraysChange an ItemAdd an ItemRemove the Last ItemExercise 2 — Modify the List4. Why Loops Exist5. The for Loop (Beginner Core)Exercise 3 — Loop Reading6. Looping Through Arrays SafelyExercise 4 — Dynamic Safety7. Displaying Arrays on the PageHTMLJavaScriptExercise 5 — Dynamic Rendering8. forEach: A Friendlier LoopExercise 6 — Loop Swap9. Combining Loops with LogicExercise 7 — Conditional Rendering10. Common Beginner Loop Mistakes❌ Infinite Loops❌ OffbyOne Errors❌ Modifying the Array Incorrectly11. Learning Object — Think in CollectionsExercise 8 — Data Modeling12. MicroExperiments (Vibe Learning Core)Exercise 9 — Predict the OutputExercise 10 — Change the DataAI Prompts (Chapter 18)Prompt 1 — Array ExplanationPrompt 2 — Loop DebuggingPrompt 3 — Code RefactorPrompt 4 — Practice GeneratorMini Project — Dynamic List BuilderExercise 11Knowledge Check (Quiz + Explanations)Q1: What is an array?Q2: What index does an array start at?Q3: Why use loops?Reflection (Vibe Learning)Chapter WrapUpDay 19 Preview
JavaScript Objects: Modeling Real-World Data
Learning ObjectivesVibe Learning Mindset (Chapter Focus)What You’re Building Today1. What Is an Object?RealWorld Analogy2. Object Properties & ValuesDot Notation (Most Common)Bracket Notation (When Needed)Exercise 1 — Property Access3. Updating Object PropertiesAdding New PropertiesExercise 2 — Update & Extend4. Objects vs Arrays (Clarity Matters)Array ExampleObject Example5. Objects Inside Arrays (RealWorld Pattern)Exercise 3 — Loop Objects6. Displaying Object Data on the PageHTMLJavaScriptExercise 4 — Dynamic Display7. Object Destructuring (BeginnerFriendly Intro)Exercise 5 — Destructure8. Looping Through Object PropertiesUsing for...inExercise 6 — Inspect an Object9. Why Objects Improve Code Quality10. Common Beginner Object Mistakes❌ Treating Objects Like Arrays❌ OverNesting Too Early❌ Inconsistent Property Names11. Learning Object — Data Modeling ThinkingExercise 7 — Model Something Real12. MicroExperiments (Vibe Learning Core)Exercise 8 — Change One PropertyExercise 9 — Add One PropertyAI Prompts (Chapter 19)Prompt 1 — Object ExplanationPrompt 2 — Data Modeling HelpPrompt 3 — Refactoring AdvicePrompt 4 — Learning ReinforcementMini Project — DataDriven FeatureExercise 10Knowledge Check (Quiz + Explanations)Q1: What is an object?Q2: When should you use an array?Q3: What does dot notation do?Reflection (Vibe Learning)Chapter WrapUpDay 20 Preview
JavaScript DOM Manipulation: Creating & Updating Content Dynamically
Learning ObjectivesVibe Learning Mindset (Chapter Focus)What You’re Building Today1. What Is the DOM?Mental Model2. Selecting Elements (Quick Review)Best PracticeExercise 1 — Selection Confidence3. Creating Elements DynamicallyAdding It to the PageExercise 2 — First Dynamic Element4. Building Content from DataExample DataRendering with JavaScriptExercise 3 — Data → DOM5. Updating Existing ElementsChange TextChange HTML (Use Carefully)Exercise 4 — Controlled Updates6. Removing ElementsExercise 5 — Clean Up7. DOM Manipulation + EventsExampleExercise 6 — Click to Create8. DOM Performance Basics (BeginnerSafe)9. Common Beginner DOM Mistakes❌ Forgetting to Append❌ Overusing innerHTML❌ Mixing Data & DOM Logic10. Learning Object — DOM as a BridgeExercise 7 — Map the Flow11. MicroExperiments (Vibe Learning Core)Exercise 8 — Predict FirstExercise 9 — RefactorAI Prompts (Chapter 20)Prompt 1 — DOM ExplanationPrompt 2 — Debugging HelpPrompt 3 — Code ReviewPrompt 4 — Architecture ThinkingMini Project — Dynamic Content SectionExercise 10Knowledge Check (Quiz + Explanations)Q1: What is the DOM?Q2: What does createElement() do?Q3: Why prefer textContent?Reflection (Vibe Learning)Chapter WrapUpDay 21 Preview
Project 1: Building a Dynamic Personal Website (Part 1)
Learning ObjectivesVibe Learning Mindset (Chapter Focus)What You’re Building Today1. Project Overview (What & Why)What Is This Website?Why This Project Matters2. Project Planning (Before Writing Code)The Page SectionsExercise 1 — Project Sketch3. File Structure (Professional Habit)Exercise 2 — Setup4. HTML Structure (Semantic First)Basic HTML SkeletonWhy This Structure WorksExercise 3 — Customize Content5. Base Styling (Clarity Before Beauty)styles.cssExercise 4 — Layout Check6. Typography & Hierarchy (Apply What You Learned)Exercise 5 — Hierarchy Audit7. Planning the Dynamic Section (Before JavaScript)What Will Be Dynamic?Data Preview (Don’t Code Yet)Exercise 6 — Content Planning8. Connecting JavaScript (Foundation Only)script.jsExercise 7 — Connection Check9. What We Are NOT Doing Yet (Important)10. Common Beginner Project Mistakes❌ Starting with JavaScript First❌ OverStyling Early❌ Skipping Planning11. Learning Object — Project ThinkingExercise 8 — Explain Your Project12. MicroExperiments (Vibe Learning Core)Exercise 9 — Change One ThingExercise 10 — Break & FixAI Prompts (Chapter 21)Prompt 1 — Project ReviewPrompt 2 — Layout AdvicePrompt 3 — Design SimplificationPrompt 4 — Learning ReflectionMini Project Checkpoint — Foundation CompleteKnowledge Check (ReflectionBased)Chapter WrapUpDay 22 Preview
Project 1: Dynamic Content with JavaScript (Part 2)
Learning ObjectivesVibe Learning Mindset (Chapter Focus)What You’re Building Today1. Defining Your Project DataExample: Topics Data (Array of Objects)Exercise 1 — Personalize the Data2. Identifying the Render TargetSelect the ContainerExercise 2 — Selection Check3. Creating a Render Function (Core Pattern)4. Rendering One Topic (StepbyStep)Call the FunctionExercise 3 — Verify the Flow5. Styling the Dynamic ContentExercise 4 — Visual Polish6. Clearing Content Before ReRendering (Important!)Why This MattersExercise 5 — Rebuild Test7. Separating Responsibilities (Professional Habit)8. Refactoring for ReadabilityExercise 6 — Refactor9. Debugging Dynamic Content10. Common Beginner Dynamic Content Mistakes❌ Mixing Data & DOM Everywhere❌ Hardcoding HTML Strings Too Early❌ Forgetting to Clear Containers11. Learning Object — Data → View FlowExercise 7 — Explain the Pipeline12. MicroExperiments (Vibe Learning Core)Exercise 8 — Change the Data OnlyExercise 9 — Change the LayoutAI Prompts (Chapter 22)Prompt 1 — Architecture ReviewPrompt 2 — Debugging PartnerPrompt 3 — Refactoring AdvicePrompt 4 — Mental ModelMini Project Checkpoint — Dynamic Core CompleteKnowledge Check (ReflectionBased)Chapter WrapUpDay 23 Preview
Project 1: Interactivity & User Controls (Part 3)
Learning ObjectivesVibe Learning Mindset (Chapter Focus)What You’re Building Today1. Defining the Interaction GoalExample Interaction IdeasExercise 1 — Interaction Planning2. Adding Controls to the HTMLExercise 2 — Customize Controls3. Styling the Controls (Usability First)Exercise 3 — Visual Feedback4. Listening for User InteractionAdd Event ListenersExercise 4 — Console Check5. Creating the Filter LogicUpdate renderTopicsInitial RenderExercise 5 — Filter Test6. Why This Pattern Matters7. Adding Active State Feedback (UX Improvement)Update JavaScriptExercise 6 — Visual Confirmation8. Guarding Against Edge CasesExercise 7 — Edge Case Test9. Common Beginner Interactivity Mistakes❌ Hardcoding Conditions❌ Rebuilding HTML Without Clearing❌ Mixing Click Logic with Rendering Logic10. Learning Object — Interaction Flow MapExercise 8 — Flow Explanation11. MicroExperiments (Vibe Learning Core)Exercise 9 — Change the InteractionExercise 10 — Add One ControlAI Prompts (Chapter 23)Prompt 1 — UX ReviewPrompt 2 — Debugging HelpPrompt 3 — Code QualityPrompt 4 — Feature IdeasMini Project Checkpoint — Interactive Project CompleteKnowledge Check (ReflectionBased)Chapter WrapUpDay 24 Preview
Debugging, Errors & Developer Tools: Thinking Like a Developer
Learning ObjectivesVibe Learning Mindset (Chapter Focus)What You’re Building Today1. What Is Debugging (Really)?RealWorld Analogy2. The Developer Tools (DevTools)The Four Panels You’ll Use Most3. The Console: Your Debugging HubExample Error MessageExercise 1 — Console Comfort4. Using console.log() StrategicallyDebugging PatternExercise 2 — Trace the Flow5. Common JavaScript Errors (BeginnerFriendly)❌ ReferenceError❌ TypeError❌ SyntaxErrorExercise 3 — Error Recognition6. Debugging DOM IssuesProblem: Element Is nullFix ChecklistExercise 4 — DOM Debug7. Debugging Logic Errors (Hardest Kind)Logic Debug StrategyExercise 5 — Logic Check8. Using the Elements Panel (Visual Debugging)Powerful TrickExercise 6 — CSS Debug9. Breaking Things on Purpose (Safe Learning)Exercise 7 — Controlled Break10. Debugging Checklist (Beginner Gold)11. Learning Object — Think Like a DetectiveExercise 8 — Debug Narrative12. MicroExperiments (Vibe Learning Core)Exercise 9 — Silent FailureExercise 10 — Error ReadingAI Prompts (Chapter 24)Prompt 1 — Error TranslationPrompt 2 — Debugging CoachPrompt 3 — Logic ReviewPrompt 4 — Debug StrategyMini Project — Debugging Practice SessionExercise 11Knowledge Check (ReflectionBased)Chapter WrapUpDay 25 Preview
Project 2: Polishing, Refactoring & Code Quality
Learning ObjectivesVibe Learning Mindset (Chapter Focus)What You’re Building Today1. What Is Refactoring?Before vs After Mindset2. Signs Code Needs RefactoringExercise 1 — Refactor Radar3. Naming: The Biggest Quality UpgradeWeak NamesStrong NamesExercise 2 — Rename for Clarity4. One Function = One JobProblem ExampleBetter StructureExercise 3 — Split a Function5. Refactoring Without Fear (Safe Process)Exercise 4 — Safe Refactor6. Cleaning Up JavaScript StructureGroup Related CodeExercise 5 — Reorder Code7. Improving HTML ReadabilityImprove By:Exercise 6 — HTML Pass8. Improving CSS ConsistencyRefactor ExampleExercise 7 — CSS Cleanup9. Comments: When & WhyExercise 8 — Comment Pass10. Removing Dead CodeExercise 9 — Code Pruning11. Learning Object — Read Your Code Out LoudExercise 10 — Human Read Test12. MicroExperiments (Vibe Learning Core)Exercise 11 — Refactor for CalmExercise 12 — Compare VersionsAI Prompts (Chapter 25)Prompt 1 — Code ReviewPrompt 2 — Refactor AdvicePrompt 3 — Naming HelpPrompt 4 — Professional StandardsMini Project — Code Quality PassExercise 13Knowledge Check (ReflectionBased)Chapter WrapUpDay 26 Preview
Accessibility & Inclusive Web Design: Building for Everyone
Learning ObjectivesVibe Learning Mindset (Chapter Focus)What You’re Building Today1. What Is Web Accessibility?2. Why Accessibility MattersEthicalLegalProfessional3. Semantic HTML = Accessibility for FreeGood ExampleBad ExampleExercise 1 — Semantic Audit4. Headings & Content StructureGood StructureExercise 2 — Heading Check5. Accessible Text & ReadabilityRecommended DefaultsColor Contrast Rule (BeginnerFriendly)Exercise 3 — Readability Test6. Links & Buttons (Meaning Matters)❌ BadGoodExercise 4 — Link Language7. Keyboard Accessibility (Critical!)Test This:Exercise 5 — Keyboard Navigation8. Focus Styles (Do Not Remove!)Exercise 6 — Focus Visibility9. Forms & Labels (Accessibility Essential)GoodExercise 7 — Form Audit10. Accessible JavaScript InteractionsExampleExercise 8 — Interaction Test11. Common Accessibility Mistakes❌ Using Color Alone to Convey Meaning❌ Skipping Heading Levels❌ Removing Focus Styles12. Learning Object — Accessibility Mindset ShiftExercise 9 — Empathy Check13. MicroExperiments (Vibe Learning Core)Exercise 10 — Screen Reader AwarenessExercise 11 — Accessibility Improvement LogAI Prompts (Chapter 26)Prompt 1 — Accessibility AuditPrompt 2 — Inclusive DesignPrompt 3 — Contrast CheckPrompt 4 — Learning ReinforcementMini Project — Accessibility Upgrade PassExercise 12Knowledge Check (ReflectionBased)Chapter WrapUpDay 27 Preview
Performance, Optimization & Best Practices: Making Websites Fast & Smooth
Learning ObjectivesVibe Learning Mindset (Chapter Focus)What You’re Building Today1. What Does “Performance” Mean?2. Beginner Truth: Most Performance Problems Are SelfInflicted3. HTML Performance Best PracticesKeep HTML Clean & SemanticExercise 1 — HTML Simplification4. CSS Performance & SimplicityBest PracticesExampleExercise 2 — CSS Cleanup5. JavaScript Performance: Do Less, Not FasterKey PrincipleCache DOM ReferencesExercise 3 — JS Efficiency Pass6. Smarter Rendering (Critical for Dynamic Content)Example Thought ProcessExercise 4 — Render Discipline7. Images & Assets (BeginnerFriendly)Best PracticesExercise 5 — Image Check8. Perceived Performance (Huge UX Win)Exercise 6 — Feedback Improvement9. Measuring Performance (BeginnerLevel)Exercise 7 — Load Awareness10. Common Beginner Performance Mistakes❌ Premature Optimization❌ Copying Advanced Patterns Too Early❌ Ignoring Mobile Devices11. Learning Object — Performance ThinkingExercise 8 — Cost Awareness12. MicroExperiments (Vibe Learning Core)Exercise 9 — Remove One ThingExercise 10 — Refactor for Less WorkAI Prompts (Chapter 27)Prompt 1 — Performance ReviewPrompt 2 — Optimization StrategyPrompt 3 — Code SimplificationPrompt 4 — UX FeedbackMini Project — Performance Optimization PassExercise 11Knowledge Check (ReflectionBased)Chapter WrapUpDay 28 Preview
Deployment & Publishing: Putting Your Website Online
Learning ObjectivesVibe Learning Mindset (Chapter Focus)What You’re Building Today1. What Is Deployment?2. What Makes a Site “Deployable”?3. Final PreDeployment ChecklistExercise 1 — PreFlight Check4. BeginnerFriendly Hosting OptionsRecommended Options5. Preparing Your Files for GitHub PagesExercise 2 — File Name Audit6. Publishing with GitHub Pages (Conceptual Steps)HighLevel ProcessWhat GitHub Pages Does7. Common Deployment Issues (BeginnerSafe)❌ Page Loads but Looks Broken❌ JavaScript Not Running❌ 404 ErrorsExercise 3 — Intentional Mistake8. Testing the Live SiteExercise 4 — Live Testing Checklist9. Understanding URLs & Structure10. Updating a Live Website11. Learning Object — Shipping MindsetExercise 5 — Version 1 Acceptance12. MicroExperiments (Vibe Learning Core)Exercise 6 — Small Live ChangeExercise 7 — Share ItAI Prompts (Chapter 28)Prompt 1 — Deployment ReadinessPrompt 2 — Debugging Live IssuesPrompt 3 — Portfolio AdvicePrompt 4 — Next StepsMini Project — Live DeploymentExercise 8Knowledge Check (ReflectionBased)Chapter WrapUpDay 29 Preview
Next Steps, Learning Paths & Building a Portfolio
Learning ObjectivesVibe Learning Mindset (Chapter Focus)What You’re Building Today1. The Beginner Plateau (And Why It’s Normal)2. What You Can Already Do (Reality Check)Exercise 1 — Skills Inventory3. Learning Paths: Choosing Direction (Not Everything)Common Beginner PathsExercise 2 — Path Selection4. Turning Your Project Into a Portfolio PiecePortfolio Upgrade ChecklistExercise 3 — Project Description5. What Makes a Beginner Portfolio Strong6. Avoiding Tutorial HellExercise 4 — NoTutorial Challenge7. How to Learn Effectively Going Forward8. Expanding Your Skills (BeginnerSafe Topics)9. Learning Object — Personal RoadmapExercise 5 — 30Day Plan10. Using AI as a Learning Partner (Not a Crutch)Exercise 6 — AIAssisted Growth11. Confidence Comes From Repetition12. MicroExperiments (Vibe Learning Core)Exercise 7 — Improve One ThingExercise 8 — Reflection LogAI Prompts (Chapter 29)Prompt 1 — Learning PlanPrompt 2 — Portfolio ReviewPrompt 3 — Direction AdvicePrompt 4 — Confidence CheckMini Project — Portfolio PrepExercise 9Knowledge Check (ReflectionBased)Chapter WrapUpDay 30 Preview
Final Capstone, Reflection & Becoming a Self-Directed Web Designer
Learning ObjectivesVibe Learning Mindset (Chapter Focus)What You’re Building Today1. The Final Capstone (Small, Intentional, Finished)Choose ONE Improvement AreaExercise 1 — Capstone Decision2. Implement the Improvement (Focused Build)Exercise 2 — Build & Test3. Before & After Reflection (Evidence of Growth)Exercise 3 — Before vs After4. What You Actually Learned (Beyond Code)5. The Shift to SelfDirected LearningExercise 4 — SelfDirected Proof6. Letting Go of Comparison7. Your New Identity: Builder, Not Beginner8. Creating a Sustainable Learning HabitExercise 5 — Learning Habit Design9. Using AI for Lifelong Learning (The Right Way)10. Learning Object — Teach What You LearnedExercise 6 — Teaching Test11. MicroExperiments (Vibe Learning Core)Exercise 7 — One Last ExperimentAI Prompts (Chapter 30)Prompt 1 — ReflectionPrompt 2 — Confidence BuilderPrompt 3 — Growth PlanningPrompt 4 — Identity ShiftFinal Capstone Submission (Personal)Final Reflection (Write This)Book WrapUp — You Did ItFinal Message
Appendix — Learning Resources, Reference & Next Steps
Core Web Design Concepts (Quick Reference)Common Beginner Mistakes (and Why They’re Normal)Debugging Cheat SheetVibe Learning Study LoopAI Prompts for Ongoing LearningBeginner Portfolio ChecklistAppendix G — Suggested Next Topics (BeginnerSafe)Learning Mindset RemindersAbout the AuthorFinal Note to the Reader
Appendix — Glossary of Web Design & Development Terms
ABCDEFHIJLMOPRSTUVW
Appendix — Command & Reference Guide (Quick Lookup)
HTML ReferenceCSS ReferenceJavaScript ReferenceDOM & EventsDebugging & ToolsDeployment Checklist (Quick)Final Note on Reference UseModern Web Design Cheat SheetHTML — StructureCSS — Styling & LayoutJavaScript — Core LogicDOM — Page InteractionDebugging — Survival KitAccessibility Quick WinsPerformance BasicsDeployment ChecklistVibe Learning Rules (Print These)AI Prompt StartersFinal Reminder
Index

Content preview from Modern Web Design in 30 Days

23 Project 1: Interactivity & User Controls (Part 3)

Day 23 of 30

Learning Objectives

By the end of this chapter, you will be able to:

Add interactive controls (buttons, inputs) to a real project
Respond to user actions using events and logic
Filter or modify displayed content dynamically
Rerender content safely based on user input
Maintain clean separation between data, logic, and DOM
Prevent common interactivity bugs
Use AI prompts to reason about UX and interaction flow

Vibe Learning Mindset (Chapter Focus)

“Interactivity gives users agency.” Static sites tell. Dynamic sites respond.

Interactive sites listen.

Your job is to make interaction clear, safe, and predictable.

What You’re Building Today

You’ll enhance your personal website ...

Become an O’Reilly member and get unlimited access to this title plus top books and audiobooks from O’Reilly and nearly 200 top publishers, thousands of courses curated by job role, 150+ live events each month,
and much more.

Read now

Unlock full access

More than 5,000 organizations count on O’Reilly

O’Reilly covers everything we've got, with content to help us build a world-class technology community, upgrade the capabilities and competencies of our teams, and improve overall team performance as well as their engagement.

Julian F.

Head of Cybersecurity

I wanted to learn C and C++, but it didn't click for me until I picked up an O'Reilly book. When I went on the O’Reilly platform, I was astonished to find all the books there, plus live events and sandboxes so you could play around with the technology.

Addison B.

Field Engineer

I’ve been on the O’Reilly platform for more than eight years. I use a couple of learning platforms, but I'm on O'Reilly more than anybody else. When you're there, you start learning. I'm never disappointed.

Amir M.

Data Platform Tech Lead

I'm always learning. So when I got on to O'Reilly, I was like a kid in a candy store. There are playlists. There are answers. There's on-demand training. It's worth its weight in gold, in terms of what it allows me to do.

Mark W.

Embedded Software Engineer

Tips for Designing Effective Presentation Slide Decks

Publisher Resources

ISBN: 9781807604493

Cloud Computing

Data Engineering

Data Science

AI & ML

Programming Languages

Software Architecture

IT/Ops

Security

Design

Business

Soft Skills