We build websites to offer a service online. There is very little you cannot do online these days. In this post we will be learning how to build a modern website using an industry standard web authoring tool.
What is a Web Authoring Tool?
A web authoring program enables the user to develop a web site easily via a graphical user interface so that the builder would not be required to have in-depth knowledge of the three web musketeers: HTML, CSS and JavaScript.
HTML Hyper Text Markup Language is the language used to create web pages.
CSS Cascading Style Sheet is the we use to style an HTML document.
JavaScript JavaScript is the most popular programming language because it is the one used by the web to make the HTML and CSS dynamic and interesting.
How to learn the basics... 👐
You can use a free online tool like CodePen to get your feet wet with HTML, CSS and JS. Do not know from where to start? Many kids and adults learnt how to build very simple web pages with W3 Schools. Why not do the first lesson of HTML, CSS and JavaScript? It will only take fifteen minutes off your day.
Once you get comfortable with the basics, then you can truly appreciate how powerful the modern tools are.
Say "Hello" to WiX
There are many web authoring tools today that help anyone build a beautiful feature rich website. This blog, which is the home for our material, has been created using WiX and we are preaching what we practice here.
It is not perfect, but no web authoring tool is! I have mostly used Wordpress as a professional developer but when I gave WiX a go for fun I quickly decided that it is so much better for beginners.
Our Fantasy Scenario
Let us imagine that we are building a website to advertise an event that is happening at school. We would like it to look graphic and display the most important information listed hereunder.
The title of the event e.g. Back To School.
The location e.g. St Edward's College, Triq il - Kottonera, Birgu.
The date of the event, don't forget that it should be in the future.
Set Up a Free WiX Account
Setting up your free account is easy and unlike other web authoring tools out there it has one of the best on boarding techniques for beginners. After you sign up, you can either set up a website in one of the two ways:
You can use a template alongside their Editor X which has a similar feel to WordPress.
You can use the Wix ADI tool 👈 (highly recommended for absolute beginners).
Building the Landing Page using Wix ADI
Wix ADI stands for Wix Artificial Design Intelligence. It is meant to be a nifty tool for people to set up their content in a website within a few minutes.
A Tour of the UI
There is a lot of documentation to get you started so what we will do here is list the absolute basics that you should look out for:
The toolbar on top with various drop down menus such as Add and Design. These two menus are probably the most important as you are experimenting. You are able to add a section to the current page (light blue menu under the toolbar) or maybe adjust the theme colours. When you click on a menu option the relevant tool settings show up on the left sidebar.
The large middle area is your main working area. The current page you are working on will be displayed here and as you hover over the sections you will notice that you can make certain changes. Once again anything that you click on will invoke the relevant tool settings on the left sidebar.
Switching between Content and Design
People build websites to display content or information in a nice way therefore all web authoring tools give you ways to organise your data. In our case, we have a way of managing events. When you click on a section that intends to display an event it does not let you change the text from the design tool but you need to go to the Content Management System to update the information. In this case we can access the data about the event in Manage Events.
Looking at the Preview
As you are making changes you would want to check how the website it going to look like before publishing it. In order to view the current page you are working on from the perspective of your audience use the Preview.
Embedding your own HTML and CSS
Many web authoring tools intended for web developers allow a switch between a designer view and raw html and css. Wix on the other hand really puts the amateur at the forefront so it is really easy to embed quirky customisations. In order to embed custom HTML and CSS go to Add > Apps > HTML Embed. Clicking on Add will insert a new section into the current page. Now you are able to insert your custom HTML and CSS.
Publish your page and show it to family and friends!
Once you hit that Publish button you have a website hosted by Wix and you can share your work with anyone you want!
When you are ready to Level Up from Wix ADI...
The Wix ADI is great to do a prototype quickly however if you are a creative then you might feel that the ADI is too restrictive. If you are ready to design the template yourself and add more of your ideas then you are probably ready to level up to the Editor X. This is what I use to keep this blog up to date!
Comments