Designing an E-commerce website with WYSIWYG Web Builder

At this section we will take a look at some of the features in WYSIWYG Web Builder, our finished project in the browser as well as the finished project in WYSIWYG Web Builder. We’ll also take a look at some of the useful tools we’ll be using throughout our project.

WYSIWYG web Builder is one of the world’s leading web builder tool which makes it easier to build out a fully functional website without writing any single line of code by just drag and drop and some few configurations. WYSIWYG Web Builder has been around for a while and Since it’s establishment in 2005, it has undergone a whole lot of changes. Starting with the very first version all the way through to popular versions like 8, 9, 10, 11 and now 12. There are so many 

At this section, we'll take a look at the finished website project in the browser.

At this section, we'll take a look at the finished website project in WYSIWYG Web Builder.

At this section, we’ll take a look at the interface of the application, how to configure both the application and the workspace for our convenient usage as well as the processes involved in web design.

At this section, we'll take a look at all the necessary tools we are going to use throughout this course.

In this video, we'll take a look at the new version 12 interface of WYSIWYG Web Builder, get to know some of the functions of the tools available as well as how best to navigate the tools.

In this video, we'll take a look at how to configure the workspace area of WYSIWYG Web Builder for easy and convenient usage of the application.

There are numerous steps in the website design and development process. From gathering initial information, to the creation of your web site, and finally to the maintenance of it.

The exact process will vary slightly from designer to designer, but the basics are always the same.

The very first stage is planning and this is the most important stage, because you gather a lot of information about the website from the client as well as you plan how the site is going to look by either making some sketches or drawing out wireframes. At this stage, you also gather the resources going to be used for the project.

The next stage is the design process: The design stage typically involves moving of information outlined in the planning stage further into reality. This is where you design the actual website. Upon completion of the design phase, the website should more or less have taken shape.

You then proceed to the preview and testing stage which requires you to preview and test your work in the browser and on mobile if the website is responsive. It is always advisable to use popular cross platform browsers such as mozila firefox, google chrome, opera or even Microsoft edge to do the preview and make sure everything is rightly displaying or functioning.

After previewing and making your necessary tweaks, you then proceed to publish your website to a live server. At this stage, you’re then interested in using ftp application (file transfer protocol) to transfer the files on your local system to the internet through your domain.

Now that we’ve gotten a lot of information, let’s proceed to create our website. At this section, we will take a look at master pages and their usefulness, the options available with site properties and page properties, creating our pages, working with google web font and then creating the styles going to be used in the project.

The master page is a page that contains the layout (usually the header and footer) which is the same for all pages.

The master page will have a 'Content Place Holder' object. During preview/publish this content place holder will be replaced by the actual content of the page.

At this section, we’ll take a look at tools like layer tool, font awesome and material icons and how to navigate them when using them in your project. We’ll also work with images and see some of the properties associated with images and the finally work with the text tool.

In this video, we'll take a look at the options available in the site properties section of the application.

In this video, we'll take a look at the options available in the page properties section of the application.

We'll start to create the pages we are going to work with in this video.

In this video, we'll create the project styles we'll be using throughout the course

We'll take a look at how to add and use google web fonts in our project

The master page is a page that contains the layout (usually the header and footer) which is the same for all pages.

The master page will have a 'Content Place Holder' object. During preview/publish this content place holder will be replaced by the actual content of the page.

At this section, we’ll take a look at tools like layer tool, font awesome and material icons and how to navigate them when using them in your project. We’ll also work with images and see some of the properties associated with images and the finally work with the text tool.

We'll take a look at the layer tool and some of the properties available with it.

We'll work with images, the text tool, see some of the options available with the tools as well as how to navigate and use the icons available in google material icons as well as font awesome icons.

We'll work on the footer section of the project in this video.

At the homepage section, we’ll concentrate on working on the layout, using carousel and configuring it and then adding some information to the homepage. There’s also a challenge for you at this section.

We'll take a look at the carousel tool as well as how to configure it and use it in our project.

We'll work on the sneaker section on the homepage in this video.

We'll work on the about section on the homepage in this video.

In this video, wWe'll take a look at how to set master page to the pages in the project.

The about page gives some information about your company to the visitor of your website.

On the about page, we’ll work on the layout, add some content such as text and images, introduce YouTube player and see some of the options available with the tool and then finally a challenge for you to work on.

We'll add some content to the about page in this video.

In this video, we'll add a youtube player and take a look at some of the options available with the tool as well as configure it in our project.

We'll work on the sneaker section on the about page in this video.

Now on the product page, we’ll work on the layout, add some products and price tags, and then design different views for the product page.

In this video, we'll work we'll take a look at how to add products to the default product page.

In this video, we'll work we'll take a look at how to add products to the list product page.

At this stage, we’ll work on the product details, add some images and then create a related product section. There’s a challenge also for you.

We'll work on the product detailed page by adding images, price tag, text and button in this video.

We'll add a related product section to the product detailed page in this video.

Contact page is an essential part of every website. This page provides the visitor with means by which he or she can reach out to your business by either calling, sending you an email or even visiting your business location.

At this section, we’ll take a look at working on the contact layout, adding contact details, adding google maps and how to get an API key (application program interface) and use them in your projects.

In this video, we'll add google map and see the options available with the tool.

We'll take a look at how to get a google map api key which we'll include in the added google map on the contact page.