Hands-on course material for Builder.io that will help learners understand and practice all major features step by step. Builder.io is a visual headless CMS and page builder, so your material will cover visual building + integration + dynamic data + advanced features.
📚 Hands-On Course: Mastering Builder.io — Build Stunning Sites Without Coding!
👇 Module 1: Introduction to Builder.io
-
What is Builder.io?
-
Use Cases: Headless CMS, Visual Page Builder, Shopify / Next.js / Angular Integration
-
Sign Up: Go to https://builder.io → Create Free Account
🚀 Module 2: Setting Up Your First Project
Step 1: Create New Space → Name it My First Website
Step 2: Create a New Page → Choose Landing Page template
Step 3: Familiarize with the Visual Editor
-
Drag and Drop Elements (Text, Image, Button)
-
Resize, move and style elements
-
Save & Publish the page
🎯 Practice Task:
Create a Hero Section with:
-
Heading: "Welcome to My Site"
-
Subheading: "Built with Builder.io"
-
Button: "Get Started" (Link to
#)
🎨 Module 3: Styling & Theming
-
Use the Right Side Panel for:
-
Fonts
-
Colors
-
Spacing (Margin, Padding)
-
Borders & Shadows
-
🎯 Practice Task:
Apply a gradient background to your Hero section and round the corners of the button.
🔥 Module 4: Components & Reusability
Step 1: Create Custom Components
-
Select group of elements → Right-click →
Create Component -
Reuse the component on multiple pages
🎯 Practice Task:
Create a Testimonial Card component and reuse it 3 times on your page.
🌐 Module 5: Dynamic Data & Headless CMS
Step 1: Go to Data tab → Add New Model → Call it Blog Post
-
Fields:
Title (Text),Content (Rich Text),Image (URL) -
Add 2 sample blog posts.
Step 2: On your page → Drag Repeater → Bind to Blog Post model
-
Show title, image, and content dynamically!
🎯 Practice Task:
Build a Blog Section that pulls data from your custom CMS Model.
🔌 Module 6: Integrations
-
Install the Builder.io Plugin on Shopify or Next.js or Angular
-
Connect Builder to your codebase (optional but powerful)
For Next.js:
npx create-next-app
npm install @builder.io/react
Load Builder content:
import { BuilderComponent, builder } from '@builder.io/react';
builder.init('YOUR_API_KEY');
export default function Page() {
return <BuilderComponent model="page" />;
}
📱 Module 7: Responsive & Mobile Editing
-
Use the device preview toggles: Desktop, Tablet, Mobile
-
Adjust styles using breakpoints
-
Hide/show elements per device
🎯 Practice Task:
Make your Hero image full width on Mobile but half width on Desktop.
⚙️ Module 8: Advanced Features
-
A/B Testing: Create variations and split traffic
-
Personalization: Show content based on location, device, or URL query
-
Custom Code Blocks: Add HTML/JS/CSS if needed
-
Animations: Add entrance animations (fade, slide, etc.)
🎯 Practice Task:
Add a fade-in animation to your Testimonial cards.
🛒 Module 9: E-commerce & Shopify Features
-
Drag Product grids connected to Shopify
-
Use dynamic cart & checkout blocks
-
Personalize offers based on cart value
📈 Module 10: Publish & Optimize
-
Use Preview before publishing
-
Connect to custom domains
-
Optimize using Builder's built-in Performance Insights
🎓 Bonus: Real-World Project Challenge
Build a full landing page for an imaginary app called "Sample" that includes:
-
Hero section
-
Features grid
-
Testimonial slider
-
Blog preview section
-
Footer with links
-
Fully responsive & dynamic
Use Case 1: Real World Project
Below is a module-by-module step plan to build a complete, responsive landing page for your imaginary app "Sample". You can use Builder.io + optionally Angular, React, or plain HTML (Builder works well as no-code + code).
🚀 Sample Landing Page — Course Modules (Step by Step)
🟢 Module 1: Setup & Planning
-
Create an account at Builder.io
-
Start a new page project, name it: Sample Landing Page
-
Choose a blank template (or minimal one)
-
Set global styles:
-
Font: Open Sans / Inter / Roboto
-
Colors:
-
Primary:
#28a745(green shade) -
Secondary:
#f8f9fa(light background)
-
-
-
Make sure responsive mode is enabled (mobile, tablet, desktop breakpoints)
🟢 Module 2: Hero Section (Big Attention Banner)
Goal: Showcase app name, tagline, CTA (Call to Action)
✅ Steps:
-
Add Section ➔ Background color light or image (e.g., Sample-related)
-
Insert:
-
Heading: "Welcome to Sample"
-
Subheading: "Your personal trainer in your pocket"
-
Button: "Get Started" (link to signup/download)
-
Image: App screenshot or sample illustration
-
-
Set responsive layout: Image on the right (desktop), stacked on mobile
🔖 Tips: Use Builder's Flexbox/Grid settings for alignment.
🟢 Module 3: Features Grid
Goal: List top features (e.g., tracking, coaching, diet plans)
✅ Steps:
-
Add a Section ➔ Inside, insert Grid (3 columns on desktop, 1 column on mobile)
-
For each feature:
-
Icon/Image
-
Title (e.g., "Workout Tracker")
-
Description (short text)
-
-
Repeat for 6 features (2 rows of 3 on desktop)
🔖 Tips: Use Builder’s Reusable Blocks if you want dynamic features later.
🟢 Module 4: Testimonial Slider (Carousel)
Goal: Show user feedback in rotating slider
✅ Steps:
-
Add a Section
-
Use Builder's Carousel/Slider plugin (or embed code if using Swiper.js)
-
Each slide:
-
User photo (circle image)
-
Testimonial text (short)
-
User name & role
-
-
Set auto-slide every 5 sec
-
Add navigation arrows/dots
🔖 Tips: You can bind testimonials to Builder’s data models for dynamic content.
🟢 Module 5: Blog Preview Section
Goal: Show latest 3 blog posts from Sample Blog
✅ Steps:
-
Add Section ➔ Inside, use Grid (3 cards)
-
For each Blog Card:
-
Image (thumbnail)
-
Title
-
Short Description
-
Read More link/button
-
-
Optional: Connect to live blog data source (e.g., CMS API or Builder Models)
🔖 Tips: Make this section dynamic if you plan to update blogs regularly.
🟢 Module 6: Footer with Links
Goal: End page with useful links + branding
✅ Steps:
-
Add Footer Section
-
Inside:
-
Left:
-
Logo
-
Small text: "© 2025 Sample. All Rights Reserved."
-
-
RSaight:
-
Column 1: About, Features, Blog
-
Column 2: Privacy Policy, Terms of Service, Contact
-
-
-
Stack columns for mobile
🔖 Tips: Keep background dark (#343a40) with light text (#f8f9fa).
🟢 Module 7: Make Fully Responsive
✅ Steps:
-
Use Builder.io's responsive settings:
-
Mobile: Stack sections vertically
-
Tablet: 2-column grids
-
Desktop: Full grid & hero split
-
-
Preview in Builder's device preview (phone, tablet, desktop)
🟢 Module 8: Add Dynamic Content (Optional Pro Level)
✅ Steps:
-
Use Builder Data Models to fetch:
-
Blog Posts
-
Testimonials
-
Features list
-
-
Bind the data models to your sections for automatic updates.
🟢 Module 9: Publish & Go Live!
✅ Steps:
-
Click Publish
-
Get the page link ➔ share it
-
Optionally embed it inside Angular, React, or any site:
-
Builder provides code snippets for integration!
-
🎯 Bonus Features (Optional)
-
Add animation on scroll (fade-in)
-
Add newsletter signup form
-
Integrate analytics tracking (Google Analytics)
✅ End Result: Sample Landing Page
-
Hero section ➔ Inspires action
-
Features grid ➔ Shows app value
-
Testimonials slider ➔ Builds trust
-
Blog preview ➔ Engages users
-
Footer ➔ Offers more links & info
-
Fully responsive across devices 💪
📚
PROMPTS TO BE TYPED IN BUILDER.IO
Absolutely — here are carefully crafted Builder.io prompts to help you build every section of your "Sample" landing page. You can copy-paste these prompts into Builder.io’s AI Generate tool (or use them as guidance inside its visual builder).
🔥 Hero Section
Prompt:
"Create a full-width responsive hero section for a Sample app called 'Sample'. Include a big catchy headline like 'Transform Your Life with 'Sample', a subheading, a call-to-action button saying 'Get Started', and an image of happy people working out. Centered layout with vibrant colors. Mobile friendly."
📦 Features Grid
Prompt:
"Generate a 3-column features grid showcasing benefits of the Sample app. Feature 1: 'Personalized Workouts', Feature 2: 'Track Your Progress', Feature 3: '24/7 Expert Support'. Each feature should have an icon, title, and short description. Make it responsive with stacked columns on mobile."
🌟 Testimonial Slider
Prompt:
"Design a testimonial slider section for Sample with 3 rotating customer reviews. Include user photos, names, star ratings, and their feedback. Use soft pastel background and smooth sliding animations. Ensure it's responsive and touch-friendly on mobile."
✍️ Blog Preview Section
Prompt:
"Build a blog preview section showing 3 recent articles from the Sample blog. Each blog card should have an image, title, short excerpt, and 'Read More' link. Arrange them in a responsive grid with hover effects. Modern and clean style."
🔗 Footer with Links
Prompt:
"Create a footer for the Sample landing page. Include the app logo, navigation links (About, Features, Blog, Contact), and social media icons (Facebook, Instagram, Twitter). Add copyright text at the bottom. Use dark background with light text. Fully responsive."
✅ Fully Responsive & Dynamic Prompt
Prompt:
"Make the entire Sample landing page fully responsive across desktop, tablet, and mobile. Ensure dynamic resizing, mobile-friendly menus, and touch-friendly sliders. Apply modern design principles with clean spacing and hierarchy."
No comments:
Post a Comment