In this tutorial, we'll cover how you can get a live website for your freelance writing portfolio for free using leavewithaweb.site.
Leavewithaweb.site is a no-code website creator designed for non-technical people to provide the smoothest path from no website to live website.
Bring your own content to the website editor and leave with a website by the time you finish this article!
- Select a template.
- See your website editor.
- Select your color theme.
- Select your font.
- Input your hero section content.
- Input your content items.
- Input your social media links.
- Input your website metadata and publish.
- Show off your new website to all your friends (and clients)!
Select a template.
If you go to leavewithaweb.site
You'll see a scrollable list of website templates.
Find the one you like and press the
I want this site button.
I'll be working with the
Freelance Converter template.
See your website editor.
After you press the button, it'll take you to the editor page which looks like:
There are 4 main sections in the editor page.
On the left side you have
Steps involved and
On the right side you have
Your website Preview and
Steps involved - the categories of editable options involved in creating your website.
Editable options - the area where you select or input your options. So for the color section, you select your color options or input custom colors.
Menu options - where you change your preview size to see how your website looks in different screen sizes.
You can create, save, and change websites in your account.
Or you can login and out.
Your website Preview - where you have a live updated look at how your website looks.
When you make changes in the editor, you'll see them reflected in the preview area right away.
The preview is exactly how it'll look live on the live website when you publish it.
Select your color theme.
The editor makes it very simple to change the colors for your website.
All you have to do is click one of the color options or select your own colors.
And to add your own colors:
Once you're satisfied with your color selection, click the green
Next button or click the category at the top to select your next editable option.
Select your font.
Selecting your font is more straightforward.
There are two dropdown menus with options to select your Heading and Subheading font.
The text on your website assigned to heading or subheading is predetermined so your website font will automatically update with a new selection.
Try out different fonts until you're happy and then hit next.
Input your hero section content.
Next will be your content sections.
The inputs are split up into different categories. So for the first section, called Hero, it'll have inputs for the sections you can customize.
The inputs correspond to the relevant sections on the actual website.
I've customized my content to fit my profile as a Saas content writer.
Add your custom content and then hit next.
Input your content items.
Your items are portfolio pieces that you add to your website to showcase the work you've done.
This could be a link to a published article, or a public Google document.
Like above, the inputs correspond to the matching content section on the website.
To delete an item, press the red
Delete item button at the bottom of the inputs.
To add a new item, press the green
+ button at the top.
To edit a particular item, click the number button to select the particular item in the list.
To reorder your items, drag and drop the number buttons.
To change the default image to something relevant, click the
Upload Image button. That'll open a modal showing you all the options to upload your image.
Watch this video to see it all in action:
Add your content items for your portfolio pieces and hit next.
Add your social media URLs.
Next are your social media URLs.
The social media icons are pre-set so to add a particular one, scroll to find the one you want to add, and add the full URL.
Make sure you use the full
https://facebook.com/yourpage and not
https:// is required for external links.
Once you start adding values to an icon input, the icon will automatically appear in the predetermined location on the website.
If there is no value then no icon will appear.
Add your social media URLs and then hit next.
Publish your website.
At this point, you've entered all the content inputs you can input and now it's time to publish your website to the internet.
You're also probably not logged in.
Fret not, all your data is saved automatically and when you exit the page to login, you'll return with all your data saved.
Click the login button and select your provider:
Once you login, you'll be redirected back to the publish page.
Create new site
Give your site a name and click
Now you'll see a new form which shows all the inputs relevant to a published website.
Subdomain - this is what your website will be called. It'll look like
Website title - this is the title that shows on the browser tab:
Website description - this is the meta description of your website that shows up in search results or social media link previews:
Favicon - this is the small icon next to the website title in the browser tab:
Social preview image - this is the image that shows up in the social media preview boxes in places like Facebook or Twitter.
These fields are optional but once you fill out your inputs and upload your images, you'll be ready to hit publish!
Fill out your inputs and hit
Publish. Once you do your page will look like:
And if you visit your website:
You'll see the exact same website you were editing, except now, anyone in the world can visit your site!
Now imagine sending a proposal with your new fancy website at the bottom of it with all the portfolio pieces you want to show off.
So go ahead,
Bring your content.
And leave with a website!