How to Embed External Coding Projects in Webflow

Hello All,

I am new to this forum and am glad to join the Webflow community. I have a question about putting portfolio projects in a Webflow site.

I am currently in a Shopify Development BootCamp and now I am putting my portfolio together. I would like to include my HTML+CSS and Shopify E-Commerce store projects. What is the best way to do that? I have researched “How to Embed Portfolio Projects in Webflow” and I haven’t received the answer that I am looking for just yet.

I know you can embed the code or do it directly in Webflow. My goal is to get my codepen projects on the Webflow and with working, URL’s so clients and/or prospective employers can see my work.

If this is the wrong forum, please let me know and refer me to the right one.

Below is my READ-ONLY Webflow for reference.

Thank you so much!

Best,
Taylor


Here is my site Read-Only:

Webflow - Taylor Brown Shopify Portfolio

Hi @Taylor_Brown

Just so I’m clear, are you looking to host your portfolio projects on the same website as your portfolio itself (so a yoursite.com/project1) or are you trying just to display links to projects that you are hosting elsewhere.

In the former case, you might be out of luck. There isn’t any way of importing existing html/css into Webflow yet. Your best bet is probably to try to recreate it using Webflow. If you have custom CSS, you can also link to that in the header section of your page (from the settings), although that can have constraints as well.

With the latter, you’d just need to create a link element and point it to those sites. That would probably be your best options (host elsewhere and just link to it). In that case, you’d avoid doing a lot of work.

Let me know if I misunderstood your question.

HI Taylor,

For websites, I generally create a thumbnail version of the site, and then a button to link to the live version. It’s possible to IFRAME it into your site, but that tends to be headachy and doesn’t make for a very good user experience. Just open it in a new tab.

For CodePens, you can share as an embed, and you have a fair bit of configuration in which tabs you open initially. Those I generally just embed in my site by dropping them in an HTML Embed.