Create a simple blog site with tldraw
In this lesson you'll learn how you can create a simple blog site using make real by tldraw.
Get Started with tldraw and Make Real
First up, open tldraw. It's a nifty tool that works with OpenAI's GP4 Vision API. This setup lets you sketch or write on a canvas, and Make Real turns that into code.
Step 2: Your First Tech Blog Site
Kick things off by writing "Make me a Tech blog site" on the canvas. Simple, right?
Click on Make Real. This magic button transforms your text into a tech blog template that's ready to go and responsive.
Step 3: Customizing the Look and Feel
Now, let's get creative. Draw shapes on the canvas to layout your blog. Think of where you want articles or images to go.
Add some text for your site's title, blog posts, and maybe some dummy text for articles.
Play around with the sizes and placement until it looks just right.
Hit Make Real again, and watch your personalized blog layout come to life.
Step 4: Add the Details
Want to jazz it up? Draw in a background image, overlay some text – just let your creativity flow.
Use arrows to show relationships, like linking a note to a background image.
Select everything you've drawn and click Make Real. Your blog's look just got an upgrade.
Step 5: Iterate with Live Feedback
Here's where tldraw shines. You can tweak your design on the fly. Want to add AI-themed articles or change up images? Go for it.
After each tweak, use Make Real to see your changes instantly.
Step 6: Go Advanced with Your Design
Feeling adventurous? Try designing your blog with an image. Drop an image onto the canvas, hit Make Real, and see how it reimagines your blog in that style.
This is great for web layouts or app designs – really versatile for different projects.
Step 7: Finalize and Understand Your Design
Happy with your masterpiece? Take a peek at the generated code to see what's under the hood. It's a great way to learn and make any final adjustments.
The code view also clues you in on where your images and other elements are sourced from.
And that's it!
You've just used tldraw and Make Real to turn a simple idea into a fully functioning, stylish blog site. This method is a unique and efficient way to build and personalize websites, blending your creativity with the power of AI-driven code generation.
Get Started with tldraw and Make Real
First up, open tldraw. It's a nifty tool that works with OpenAI's GP4 Vision API. This setup lets you sketch or write on a canvas, and Make Real turns that into code.
Step 2: Your First Tech Blog Site
Kick things off by writing "Make me a Tech blog site" on the canvas. Simple, right?
Click on Make Real. This magic button transforms your text into a tech blog template that's ready to go and responsive.
Step 3: Customizing the Look and Feel
Now, let's get creative. Draw shapes on the canvas to layout your blog. Think of where you want articles or images to go.
Add some text for your site's title, blog posts, and maybe some dummy text for articles.
Play around with the sizes and placement until it looks just right.
Hit Make Real again, and watch your personalized blog layout come to life.
Step 4: Add the Details
Want to jazz it up? Draw in a background image, overlay some text – just let your creativity flow.
Use arrows to show relationships, like linking a note to a background image.
Select everything you've drawn and click Make Real. Your blog's look just got an upgrade.
Step 5: Iterate with Live Feedback
Here's where tldraw shines. You can tweak your design on the fly. Want to add AI-themed articles or change up images? Go for it.
After each tweak, use Make Real to see your changes instantly.
Step 6: Go Advanced with Your Design
Feeling adventurous? Try designing your blog with an image. Drop an image onto the canvas, hit Make Real, and see how it reimagines your blog in that style.
This is great for web layouts or app designs – really versatile for different projects.
Step 7: Finalize and Understand Your Design
Happy with your masterpiece? Take a peek at the generated code to see what's under the hood. It's a great way to learn and make any final adjustments.
The code view also clues you in on where your images and other elements are sourced from.
And that's it!
You've just used tldraw and Make Real to turn a simple idea into a fully functioning, stylish blog site. This method is a unique and efficient way to build and personalize websites, blending your creativity with the power of AI-driven code generation.
Get Started with tldraw and Make Real
First up, open tldraw. It's a nifty tool that works with OpenAI's GP4 Vision API. This setup lets you sketch or write on a canvas, and Make Real turns that into code.
Step 2: Your First Tech Blog Site
Kick things off by writing "Make me a Tech blog site" on the canvas. Simple, right?
Click on Make Real. This magic button transforms your text into a tech blog template that's ready to go and responsive.
Step 3: Customizing the Look and Feel
Now, let's get creative. Draw shapes on the canvas to layout your blog. Think of where you want articles or images to go.
Add some text for your site's title, blog posts, and maybe some dummy text for articles.
Play around with the sizes and placement until it looks just right.
Hit Make Real again, and watch your personalized blog layout come to life.
Step 4: Add the Details
Want to jazz it up? Draw in a background image, overlay some text – just let your creativity flow.
Use arrows to show relationships, like linking a note to a background image.
Select everything you've drawn and click Make Real. Your blog's look just got an upgrade.
Step 5: Iterate with Live Feedback
Here's where tldraw shines. You can tweak your design on the fly. Want to add AI-themed articles or change up images? Go for it.
After each tweak, use Make Real to see your changes instantly.
Step 6: Go Advanced with Your Design
Feeling adventurous? Try designing your blog with an image. Drop an image onto the canvas, hit Make Real, and see how it reimagines your blog in that style.
This is great for web layouts or app designs – really versatile for different projects.
Step 7: Finalize and Understand Your Design
Happy with your masterpiece? Take a peek at the generated code to see what's under the hood. It's a great way to learn and make any final adjustments.
The code view also clues you in on where your images and other elements are sourced from.
And that's it!
You've just used tldraw and Make Real to turn a simple idea into a fully functioning, stylish blog site. This method is a unique and efficient way to build and personalize websites, blending your creativity with the power of AI-driven code generation.
