15-Minute Website | The Easiest (And Fastest) Website On Earth
This is 100% the easiest (and fastest) way to make a website. And it's fun!
Making a website has been a headache for millions of people around the world. But this 15-minute website is so fast and simple that anyone can make this website by following the instructions. If we want to have a website, but we don't want to hire (or become) a programmer, coder, or web developer, then this is the right website.
Click here to view a live version of the website we are going to create together.
And if you need my help with something, book a consultation here.
Step-by-step instructions how to make a website that sells in 15 minutes:
How to choose a domain name for our website
Go to Bluehost.com or any other hosting website. Click "Domains", then type in the name we want to check if it's available. Or use this widget:
We need to check to make sure the domain name we want is available for purchase before we commit to the name and use it in other places. Typically, the domain name is going to be the website name. If the name we want is already taken, don't fret. Search for similar combinations of words and use hyphens if needed.
Here are a few examples of my websites:
How to buy a domain and hosting for our website
When we've found a domain name that is available for purchase, it's time to buy the domain along with hosting for our new website. We only need the domain and hosting. Many hosting companies will try to sell us additional services and products on the checkout page, but we don't really need them to make a 15-minute website.
After we pay for our domain and hosting there may be an option to install WordPress or another website constructor. The 15-minute website does not require us to install or use any additional constructors or programs.
How to find the main directory of our website
Inside of our hosting account we need to find the control panel. This part of our account will have a file manager or it might be called FTP. In our Bluehost account click "Advanced" to access the control panel and then choose "File Manager".
Inside the file manager we need to find a top-level folder called "public_html". Inside of that folder we will find a subfolder named for our website. When we open that folder we will see all of the files in our website's main directory.
How to add folders to our website's directory
Inside the main directory of our website there is an option to add a folder. We will need to add two folders. The first folder should be named "css" and the second one should be named "img". We will add images to the "img" folder and we will add a stylesheet to the "css" folder.
How to add images to our website
Inside the directory of our website we should have created a folder called "img". Inside that folder we need to add two images. One will be named "avatar.jpg" and the other will be called "background.jpg". They must have these names. If we need to alter our images before uploading them to our website, I suggest using Canva.com to edit them.
How to edit code for our website
Code is nothing more than text. And we won't have to edit it often. But when we first set up our website we'll need to do some code editing. That's why it's better to use a text editor that is made specifically for editing code. I suggest Sublime Text. It's free. Install it.
I'll provide the code from my 15-minute website for free here. Create two files in Sublime Text. One will be called "index.html" and the other will be called "style.css".
Copy this code and paste it in the file called "index.html" (or download it here by right clicking this link and choosing "Save Link As").
index.html
We need to change the title of the website, the text in the header, the text in the hero section, the text in the footer. Sublime Text applies different colors to different elements of the code, so all of the text elements that we need are white in the image above.
Start with the title of the website:
This is where we can change the title of our website. The title is the text in white.
How to add a header to your website
This is the header of the website:
It includes the logo and the navigation bar. Change the text in white that says "Teaching Business Catalyst".
How to add a navigation bar to our website
This is the navigation bar of the website:
This is where we can change the text in the top right of the website.
Change the texts in white.
How to add links to our website
When someone clicks the texts in the navigation bar our website should send them to another webpage or maybe another website.
Change only the text between the quotation marks and do not remove the quotation marks.
How to sell from our website
Selling from our website is the most important function, but we aren't going to build any type of complicated payment processing system on our 15-minute website. Instead, we are going to link to checkout pages where payments can be made. The majority of websites that sell online today use payment processing companies like PayPal to collect payments. Each payment processor is different, but almost all of them will provide us with a unique link where our customers can pay for our products or services. Find that unique link so we can connect our website to our payment processor and get paid.
How to add a footer to our website
This is the footer of the website:
This is where we can change the name we do business as.
How to add a hero section to our website
This is the hero section of the website:
This is where we can change the large text on the right side of the page.
How to add an appointment scheduler to our website
The scheduling program gives us a code to embed. It goes here:
How to edit the style and colors of our website
The index.html file that we've been editing let us change the text and links of the page, but not the colors, fonts, formatting, and other styles of the page. That's why we also need the style.css file.
Copy this code and paste it in the file called "style.css" (or download it here by right clicking this link and choosing "Save Link As").
style.css
How to change the header and footer background color
We can change the background color of the header here:
And we can change the background color of the footer here:
Each color has a specific code that start with "#" and then contains 6 numbers or letters. If you're not sure which code is correct for your brand's color, use Canva to find out.
Step 1:
Step 2:
Step 3:
How to add files to our website
Inside the directory or folder that we want to add files we will see the option to upload files. This will let us choose files from our computer to add to our website. We need to upload two images to the "img" folder. Then, we need to upload our "index.html" file to our main directory. And lastly, we need to upload our "style.css" file to the "css" folder.
Our main directory should look like this:
Our "css" folder should look like this:
And our "img" folder should look like this:
That's it!
Now that we've done all of this work to set up our website it's time to see how it looks! It was fun. It was easy. Now, it's time to get back to work!
If you've got questions, book a consultation or contact us at [email protected] and we'll be happy to help!