Workshop:

How to Create an Online Portfolio Without Coding

JP Dionisio

Watch the event here

🤔 Agenda (2 hours)

1
What is Webflow?
2
Webflow Basics
3
Portfolio from Template (Easy)
4
Portfolio from Scratch (Hard)
5
Open Discussion

1

What is Webflow?

Age of No Code

Webflow empowers designers to build professional, custom websites in a completely visual canvas

2

Webflow Basics

🤓 Professional Websites

Kislap Weddings

Playstation Mockup

Squarespace Copy

Webflow Showcase

👶 Webflow Basics

1. Webflow Designer (Learn)
2. Box Model – Divs and Grids (Learn)
3. Reusable Styles (Learn)
4. Built-in CMS (Learn)
5. Interactions and Animations (Learn)
6. Free .webflow.io Subdomain
7. Free University and Clonables

3

Portfolio from Template

⏱ Portfolio Speedrun (Easy)

1. Signup in Webflow – it's free
2. Select a free Webflow template
3. Customize your website – Learn Webflow
4. Launch your website – How to Publish
5. Share your website – Learn Open Graph

🙌 Free Templates

💰 Paid Templates

🙋 Cursor High Five!

✋

4

Portfolio from Scratch

Watch on Webflow University

⏰ Portfolio Walkthrough (Hard)

0. Design your website
1. Hero Section
2. Projects Database – CMS
3. Projects Section
4. Projects Page
5. Contact Section
6. Navigation Menu

🎁 Christmas Gift

Figma Template Link
Webflow Clonable Link

Manila

To enable Filipinos to create for the web — and lead a fulfilling, impactful life while doing it.

See Webflow Events Manila Chapter Cavite Chapter

📚 Webflow Classroom

90% off for students
Free for educators

Learn More See Webflow Pricing

✅ Next Steps

1. Schedule a meeting with yourself
2. Start with a free template
3. Customize the template
4. Share and apply for internship/work
5. ???
6. Profit

Design
Better, Faster, Together

Clone this website for free