How to Create a Site on WebFlow and Host it for Free (Zero Code)

Webflow: Drag & Drop Website Builder — Produce high quality HTML, CSS & JavaScript, without writing a single line of code

  • Have an idea for a website, but struggling to get started?
  • Don’t know enough HTML to code a website from scratch?
  • Maybe you’d just prefer to avoid the costly subscription to services like Wix or Squarespace.

For these reasons, & many more, I recommend Webflow!

Here is a site that I created quickly & easily to demonstrate Webflow’s most useful functions without writing a single line of code.

No experience necessary!

Read on for instructions on how to create & export this site.

Background

When I first started making websites, I pitched my services to all of my family & friends.

I accepted every job that came my way!

Some of these jobs included working on websites already started or built with drag-and-drop, no-code services like Wix and Squarespace.

Some of the no-code sites I looked at were really simple – No bells & whistles at all – just a static page or two. But the page would have a monthly/yearly subscription fee!

Sometimes, I would encourage my “clients” (also known as my family/friends) to let me build the exact same site in vanilla HTML & CSS so that they could move it off of the subscription service, & host it elsewhere for much cheaper.

If they accepted my offer, I would get to practice my coding, & also feel good about providing some value.

Still a beginner, my hands would cramp up from all of the typing – There was so much repetition, & it felt tedious at times.

I longed for an easier way; to somehow speed up the process of producing clean code that was easy to read & edit, without relying on frameworks that would bloat the code with plugins & libraries, and whose output was often difficult to read.

Zero-Code Website Building

Enter Webflow

💡 Webflow’s wiki describes it as “a SaaS application that allows designers to build responsive websites with browser-based visual editing software. While designers use the tool, Webflow automatically generates HTML, CSS, and JavaScript.”


Even if you have no experience working with HTML, CSS or JavaScript, (although a little bit certainly helps), anyone can quickly & easily create a great-looking website. The code can be exported & used elsewhere, with no further obligation to Webflow. You can cancel your subscription & still keep the code.

To demonstrate how this works, I’ve used Webflow to:

  • create a page containing a simple photo gallery
  • export the code 
  • host it online for free, using a GitHub account

Why not log onto Webflow & create an account? It’s free to try.

* Code export is restricted to paid subscriptions. 

👉 Recommended: Using Webflow to create websites for clients is literally a great way to make money as a freelancer on Upwork with zero coding experience. Earn while you learn! 

How to create a photo gallery in Webflow (Visual Step by Step)

(See all slides by clicking here)

1 – Create a new project

2 – Select Blank Site

3 – Select Div block from the Elements tab & drag it onto the canvas

4 – Select Text-Box from the Elements tab & drag it into the newly created Div block

5 – Type some text into the Text-Box

6 – Change Text-Box display settings to Flexbox, then set Align & Justify to Center

7 – Adjust Text-Box margins, increase font size & change font type

8 – Increase Font weight (Make text bolder)

9 – Change the text Color to Black

10 – Drag another Div into the canvas, and drop it under the existing content.

Then, select a Grid block from the Elements tab & drop it into the newly created Div


*See how the elements are organised in the Navigator panel

*A 2×2 grid will appear inside the Div

11 – Add a third column to the grid

12 – Select a Lightbox element from the Components panel & drop it into the first box in the grid

13 – With the Lightbox selected, configure Display as Flexbox, aligned & justified to Center.

14 – Repeat steps 12 & 13 for every box in the grid.

15 – Grab some images to use in the gallery!

16 – Upload/Drag & Drop the images to the Assets tab

17 – Thumbnail – open the Image element settings, then select “Choose Image”, & pick an image from the assets tab.

18 – Repeat step 17 for all lightboxes.

  • At any point, click on the “eye” symbol in the top-left corner of the Webflow interface to see how the site is coming along.

19 – For each lightbox, open Image Settings/Lightbox Settings, & select the same image that was chosen as its thumbnail.

20 – Tick the “Link with other lightboxes” box, & input the same group name for all lightboxes. (This will enable them all to be scrolled as a single collection)

How’s everything looking so far?
Now is a good time to give that “Eye” a click!!

* At this stage, I realised that the grid looked better with 2 columns instead of 3, so I removed a column in the settings.

*I also realised that the grid content looked a bit messy at larger screen sizes.

*I decided to put the Div that contained the grid element inside of ANOTHER element called a container!!! (Containers have a set default width, which was useful in this case.)

21 – Drop a Container element onto the canvas (underneath the grid), then drag the div containing the Grid element inside of it.

*You can see that the gallery looks neater after the grid has been moved inside of the container.

Quality-Control:


I renamed the div containing the text to “heading”, & the text-box inside of it to “header”

I renamed the div containing the grid to “photo-gallery


I scrolled through the Breakpoints options to see how the page would appear on smaller screens.

The text in the header appeared too large in the Mobile Portrait view, so I reduced its font size.

Still in the Mobile Portrait breakpoint, I reduced the grid from 2 columns to 1 column. 

Happy with the results, I clicked on the “Export” icon

As the last step in Webflow, I downloaded a zip file containing all of the HTML, CSS, Javascript & images that made up the website

*The total size of the page was less than 1 megabyte!

HTML, CSS, Javascript & Image Files

The final task was to follow this guide from Github Pages, which describes how to create a new Github account, upload the exported code, & host the site for free.

https://pages.github.com/

I hope this information will be helpful to someone out there!

Thanks for reading 🙂