How to design a website with template for free?
Use a template
We are not going to make but use a template for our easiness and for the people who don’t understand HTML, CSS and JavaScript.
One of the great to start templates can be found on Start Bootstrap website. David Miller is the creator of a great source for website developers. Start Bootstrap offers many beautifully designed templates for free. He has many open source projects which can be used anywhere.
So, let’s go in https://startbootstrap.com
In the below platform we can see that there is a option named “Browse Templates & Themes”, kindly click on it.
We can choose anyone which we would like to choose. The template which chosen is Grayscale.
Tip: If it’s a company website always select a website which completes your at most goals. A template which lets people discover about your company.
The templates are responsive and need not to be tweaked again. It is very simple to change the contents in the code section.
The website can show a live preview for the user experience. It has to be downloaded for the editing part. The website template can be downloaded directly by using download button. It has a MIT license which is mostly secured to use it anywhere in the world. The license provides legal use of the templates for our own websites or another ventures or as a common user/developer.
Don’t worry if you would like to see the code directly then…
There is another way if we want, the GitHub way. The founder has already made repositories for all the templates which we want to work on. We can directly download the repository using git commands. Everyone uses git commands but for beginners it’s easy to directly click on download button. Using Git is also following industry standards and having the code safely sent and implemented on other location with a more standard way.
A quick confidence tip: We don’t have to be a developer to do this work. No programming language knowledge is needed for it.
This is what it shows in that zip file. It contains the following items.
- index.html — This contains the main code for your website and it has the main coding done.
- Assets — This portion contains the images and icons used in the website to make it look more beautiful.
- CSS — This files allows us to make the ugly looking window get a new and more eye catching view. CSS file is mainly the designing file used to add animations as well as background designs. It includes a lot of code part and certainly makes the website more responsive and look great visually.
- JS — This is the JavaScript folder which contains the design file which affects the user interactions. It allows user to interact with the website and make it more live. It is kind of a backend for those beautiful patterns moving through the scrolling and the patterns which move when cursor is passed over it. It’s awesome.
This is how the code looks like.
Kind of clumsy, right?
Don’t worry, it’s simple to understand when we learn what is HTML and what is CSS.
So, there are various kind of editors we can use to edit the code. The one used above is Visual Studio Code a.k.a Mini editor of Big Boss - Visual Studio.
Best and lightest editors to use are:
- Notepad++
- Atom
- Sublime Text
- Brackets
- Visual Studio Code
That’s all we had today.
“How to deploy the website” is already given in the previous blog, link below.
It was great spreading some wisdom.
Have a nice day! Enjoy !!
Don’t forget to follow me on and spread Happiness, Kindness.
