Amazing free resources for a world-class startup landing page 🚀
THANKS đź‘Ź: I appreciate the many claps most my readers leave because it takes me a long time to write these free articles.
Hey All,
I’ve got a lot of messages asking how I build landing pages and websites for free in just a couple of hours.
Some here: https://netzero.world , https://carmont.io, https://maskshare.co.uk
Here are some of the best resources to make websites quickly.
(Note: I don’t do Wix/WordPress/Squarespace. I find them less customizable in the long term.)
Basically: DON’T REINVENT THE WHEEL
Stand on the shoulders of giants. (A.k.a borrow and give credit)
There’s a lot of awesome free resources for making amazing landing pages that save you tons of $ and work and just require you to add an attribution link at the bottom of your website.
BTW — Users don’t care if you borrow stuff from other places as long as you give credit where credit is due.
DO I NEED CODING KNOWLEDGE? — Okay building your website design is easier if you already know HTML/CSS, but the best thing is learning while you build. I recommend jumping headfirst into making the site and then come back to online tutorials if you’re stuck. Here’s an HTML/CSS CRASH COURSE to fall back on if you need help— https://youtu.be/8gNrZ4lAnAw
ERRORS/BUGS — Also If you are stuck on something I want you to just search the first question you have in your head on https://stackoverflow.com (it’s like the holy grail of Q&A for coders). If it's not there (highly unlikely), ask a new question. Debugging errors is the #1 skill for programmers.
Okay, enough chit chat, onto the resources:
RESOURCES TO MAKE AN AMAZING WEBSITE IN HOURS:
1.) GET A SICK FREE WEBSITE TEMPLATE — Pick and download the code of a sick free template you like from Colorlib: https://colorlib.com/wp/templates/
These are completely free for commercial use, you just have to keep the footer at the bottom saying it is a colorlib template (which is there by default). Also: make sure you download the one with .html files, not the wordpress version.
2.) GET A CODE EDITOR — I prefer VS Code (https://code.visualstudio.com/). Using the editor open the file called index.html. This is where most of the code for the website is.
You can see what the website currently looks like by double-clicking the index.html file from finder.
3.) EDIT THE TEMPLATE — Once you’ve opened the index.html file on your code editor, change/add/delete any content that’s in the index.html file to become relevant to your purpose.
4.) FREE IMAGES & ILLUSTRATIONS — Find copyright-free graphics/illustration for your website on
https://pixabay.com/ and https://icons8.com/vector-creator/new (you can use for free as long as you use proper attribution to these at the bottom of the site).
5.) FREE ICONS — Use free icons from https://fontawesome.com/start (as long as you use proper attribution at the bottom)
6.) EMBED A YOUTUBE VIDEO — I already made an article on this here:
7.) HOST YOUR WEBSITE ONLINE FOR FREE — When you are done, host your site for free using Github Pages (https://pages.github.com/)or Netlify (https://www.netlify.com/)
8.) ADD FREE CHAT TO YOUR WEBSITE — add free chat to your website with one line of code using: https://www.tawk.to/
9.) USE GOOGLE ANALYTICS TO MONITOR YOUR SITE TRAFFIC — add analytics to your website with one line of code at https://support.google.com/analytics/answer/1008015?hl=en
10.) EMBED A GOOGLE FORM FOR SIGNUPS — make a google form (https://docs.google.com/forms/u/0/) as usual and then in the share tab click “embed” and copy-paste the code into your index.html file.
11.) TRYING TO BUILD A SPECIFIC FEATURE? CODEPEN
Go to codepen (https://codepen.io/) and search up what you want to add, example: “frequently asked questions section” and there should be tons of examples you can use to get inspired from and add to your website.
12.) NEED DESIGN INSPIRATION? BEHANCE/DRIBBLE
Use dribble (https://dribbble.com/) and behance (https://www.behance.net/) — they have some awesome design concepts and are also a great place to recruit designers.
13.) NEED PHONE/COMPUTER/TABLET MOCKUPS? FIGMA
Download these free phone mockups from Figma (https://www.figma.com/resources/assets/) and then use photoshop free trial to edit these in (click cmd T to transform and warp your screen onto the phone). Look at some tutorials if stuck. REMEMBER to go back to photoshop TO CANCEL your photoshop free trial if you don't plan on using it again!
Thanks for reading! 👏 Please leave a clap if this helped. Also…
