Designing a website requires an artist to be able to program in multiple languages. That person has to learn multiple languages and frameworks to be able to design like a boss!
Such nonsense! This is 2015 and all you need is the Mobirise software on your desktop and you will be ready to go! Now I should get back to what I do best! I mean writing a tutorial on how to make a webpage using Mobirise.
What this tool does is that it SAVES YOUR TIME by doing the hard work by itself. All you need to do is that after you are done, simply edit the HTML file as per your liking to fine tune it according to your need.
Follow this tutorial and you will get the following benefits:
- An HTML file.
- Properly written code.
- CSS Code.
- Plugins required in a seperate folder.
- Assets you used in their own respective folder.
- A sweet web page.
- You will share 🙂
This is UPDATED for version 2.6 Now lets get started!
Download Mobirise From Here
Now, install it and run.
You will see this.
Click the + button and see the sidebar like below.
As teh Catz has pointed out, when you click the + button, a sidebar will EXPAND. Now, we add a MENU.
And the added menu will look like this.
Now, lets add some more components, a header, and a footer.
Now do the following.
- In MENU. click icon and then select ANY image. I will be updated in the interface.
- In HEADER, click image and change it the same way.
- In MENU, click any text, and its options will become visible, like font, size, color and HYPERLINK. you can delete and rename the text as you like.
- In Header, click text or BUTTONS and they will be editable.
- In footer, everything is editable as stated above.
- More components can be added to have a parallax effect. Let me know if I should tell you how to make a parallax effect in Mobirise 1.8.1.
Now, after editing, I got this in like 3 minutes.
Now, we publish and look at the files for the designed page. Simply click the “Publish” button and save to a folder in your folder/
- The backup files of your Mobirise project are saved in
- Do not completely rely on Mobirise to do the job for you. I highly recommend making the structure of the website using Mobirise and then fine-tuning the features using your favourite code editor or an IDE.
- Mobirise seems to have issues with parallax videos. I suggest you watch out and test not only on your local machine, but also on a real server and multiple browsers. Stupid IE5! x(
- Mobirise can’t do everything, but you can :).
That’s it! You have just created a web page without writing a single line of code. My suggestion is to use this tool to make a template, then grow upon the template. For example, once you have made this, you can use the HTML code and assets in a CodeIgniter project. CodeIgniter is a PHP framework that makes PHP programming very quick and easy.
CodeIgniter 3 Tutorials are HERE
If you liked this tutorial and enjoyed it, then do like and share this page on Facebook, twitter and Reddit. Let me know if there are any problems. If you would like me to write a tutorial for you, then let me know about that. Take care and happy coding!