Streaming live at 10am (PST)

How to use export code after it's been exported


#1

I’ve recently taken a look at Webflow’s export code, but being a non-programmer, I’m not sure how I can test it.

I have Webflow’s small test code here:

I want to test it in CodePen:

  • I’m able to get the HTML ready and pasted as it’s only one file, however I’m confused as to where to go with the CSS. I see three CSS files in the example folder, each with different content, but I’m not sure what to do with them. Do I only use one (if so, which one) or do I utilize all three by pasting them all in the CSS section?
    -

  • And what do I do with the js folder? How will I use the two JavaScript Files as text to test within the CodePen pen? Which do I use or how do I use them
    -

All I’m ending up with is this (and I know the page isn’t supposed to look like this):

This is probably easy work for most of you but I need help as I am hosting my website outside of Webflow.

Thank you!


Any idea what I've done wrong?
#2

Hi @BrianChockblain

I’m guessing you are all sorted now, but just checking you know it’s possible to use some custom code inside of Webflow?




#3

@StuM thanks for the reply, however I still haven’t sorted things out yet. I know that Webflow has embed elements and custom code capabilities, but my problem is that I don’t know what to do with the files after I’ve finished building inside of Webflow and I’ve exported the zip.

I’m playing with one of Webflow’s exported code examples (http://pixely-1.webflow.io/) and the CSS and JS are tripping me up. I am able to upload my the HTML in JSFiddle just fine, but when I get to the CSS files, I am presented with three different ones and I don’t know which to use. Do I paste them all into the CSS section or is there some other order to use them in.

Next, I’m having trouble with the JS files. There are two, and I was expecting them to open as text inside of Notepad, however, it takes an editor like Sublime Text 3 to view them. I am able to open both the modernizr and webflow JavaScript Files as text, however I don’t know how to use them after that. Do I paste them both into JSFiddle to test them or is one more important than the other? I’ve already tried pasting them into JSFiddle, but they don’t seem to do anything. Is that because I’m doing the whole process wrong or what?

Please help me, I don’t know much about web design past building it in Webflow as I am not a developer and this is my first project.

Maybe just walk me through the steps of how you use export code after it’s outside of Webflow? Thanks :wink:


Using Webflow to create an interactive kiosk application
#4

@BrianChockblain no need to upload or copy/paste the code to codepen… All you need to do once you have the exported code is open up the “index.html” file in your browser (such as Chrome or Firefox). The browser will display the code as if it were being hosted on an actual website.

From there, you can edit the files as you see fit, refresh the browser, and you will see the changes being displayed.

Please let me know if this helps.


#5

@justin_c Ah I see, this helps. I hadn’t realized that viewing edits could be done straight through a browser. Thank you.

Another quick question, if I am trying to upload HTML, CSS, and JS files to a custom domain (for example through Bluehost or something like that), will there be a place to easily upload the final versions of the HTML, etc. or will I have to find other instructions?

Anyways, thank you.


#6

@BrianChockblain yes, there should be an easy place to do that. Once you have the files it should be as easy as uploading them to the hosting environment. All the hosting providers should have support staff as well to help if you encounter any issues