How to Make Live Previews [Tutorial]
Since this was requested by apologize for tutorialayouts, I thought I might as well share it here too. Hope this comes in handy for you guys.
HOW TO MAKE LIVE PREVIEWS
The easiest part of layout-making, but the most confusing for first-timers! It's a simple process, so hopefully this tutorial will teach you how to make live previews so that you can showcase your layouts as an alternative to screenshots.
01) Getting the coding
For every webpage there is a page source. A webpage's page source is basically all of the nitty gritty HTML coding, CSS, scripts, etc that are used to make up its various components and such. Kinda like its blueprint.
By copying a webpage's entire page source you could easily make an exact copy of it like this!
Depending on the browser you're using, this part will be different for everybody but the general gist of it is that first you'll need to view the page source of your layout:
02) Saving the copy
Once you have your page source open, simply highlight everything (CTRL + A for Windows users to highlight everything) and then copy and paste it into a new Notepad document.
Save this Notepad document and make sure to both change its file extension to .htm (e.g. 'filename.htm') and its type to all files as shown in the screenshot below.
03) Uploading the webpage to a host
Once saved, you should see a new file appear in your Documents. Congratulations! This is your live preview made and saved, so you're halfway done! The next step is to obviously upload it to a host so others can see it too.
For webhosts, I personally use Webs.com - formerly known as FreeWebs. It's reliable and easy to use so I recommend it for first-timers.
Uploading webpages to Webs.com is the easiest. Just see the picture below to see what I mean. You literally just press the little blue button and select your webpage file. After it's been uploaded, you're free to share the URL around!
Congrats! You've just made your first live preview!
Hope you found this useful!
HOW TO MAKE LIVE PREVIEWS
The easiest part of layout-making, but the most confusing for first-timers! It's a simple process, so hopefully this tutorial will teach you how to make live previews so that you can showcase your layouts as an alternative to screenshots.
01) Getting the coding
For every webpage there is a page source. A webpage's page source is basically all of the nitty gritty HTML coding, CSS, scripts, etc that are used to make up its various components and such. Kinda like its blueprint.
By copying a webpage's entire page source you could easily make an exact copy of it like this!
Depending on the browser you're using, this part will be different for everybody but the general gist of it is that first you'll need to view the page source of your layout:
02) Saving the copy
Once you have your page source open, simply highlight everything (CTRL + A for Windows users to highlight everything) and then copy and paste it into a new Notepad document.
Save this Notepad document and make sure to both change its file extension to .htm (e.g. 'filename.htm') and its type to all files as shown in the screenshot below.
03) Uploading the webpage to a host
Once saved, you should see a new file appear in your Documents. Congratulations! This is your live preview made and saved, so you're halfway done! The next step is to obviously upload it to a host so others can see it too.
For webhosts, I personally use Webs.com - formerly known as FreeWebs. It's reliable and easy to use so I recommend it for first-timers.
Uploading webpages to Webs.com is the easiest. Just see the picture below to see what I mean. You literally just press the little blue button and select your webpage file. After it's been uploaded, you're free to share the URL around!
Congrats! You've just made your first live preview!
Hope you found this useful!