Web Design for Beginners: Using WYSIWYG Web Builder

Name: Web Design for Beginners: Using WYSIWYG Web Builder
Rating: 4.5 (180 reviews)

Level up your web design skills, by learning how to create a responsive portfolio website with WYSIWYG Web Builder.

Created byIshmeal Lamptey

Last updated 9/2017

English

What you'll learn

Create any website layout you can imagine
Introduce login tools in your website project
Work with CMS (Content Management Tools ) in your website
Support any device size with Responsive (mobile-friendly) Design
Use common vocabulary from the design industry
Introduce CSS3 animation into your project

Course content

15 sections • 83 lectures • 5h 41m total length

Welcome0:50
Preview of the final project4:31

Tools going to be used in the project3:54
We will take a look at some tools which we are going to use in our website project
Configuring the workspace4:01
In this video, we will go ahead and configure our workspace
The Toolbox3:45
In this video, we'll take a look at the various tools available in WYSIWYG web Builder and those we will be using in our project
Structure of the Website2:20
We'll go ahead and take a look at the structure of our website project
Adding Pages8:36
Let's go ahead and create the pages we are going to work with in our project
Renaming Object ID's4:59
To avoid conflict of object ID's, there's the need to rename our objects. Let's take a look at how to achieve that.
Naming and Saving Project1:07
In this video, we'll go ahead and name our project as well as save it.
Page Properties4:59
Let's take a look at some of the properties available in page properties
Page Extensions1:00
In this video, we'll take a look at the page extensions available in WYSIWYG Web Builder and the appropriate one to use in our project

Layer Options3:20
In this video, we will take a look at some of the options available in a layer
Creating the site Navigation6:42
In this video, we are going to build our site navigation, this will introduce to us some navigational objects as well as some properties associated with our navigational tool
Main Master Page2:42
Let's go ahead and design our main master page.
Adding Tooltip to the Master page3:19
In this video, we'll take a look at how to add and configure a jQuery tooltip to our master page
Login Master Page2:57
In this video, we will focus on designing our login master page.
Account Master Page7:39
Finally in this section, we are going to work on the account master page.

The Introduction Section Part 14:55
In this video, we will start working on the introduction section of the homepage
The Introduction Section Part 26:36
In this video, we will continue to work on the introduction section and finally wrap it up.
The About Section8:30
In this video, we are going to focus working on the about section.
The Services Section14:06
Let's continue to work on the services section of the homepage
The Team Section7:10
We work on the team's section of the homepage in this video
the Pricing Section12:36
In this video, we'll go ahead to work on the pricing section
The Portfolio Section7:20
Still on the homepage, we will now work on the portfolio section
The Contact Section4:53
We will now go ahead and work on the contact section of the homepage.
Adding a Background Video to the homepage1:48
In this video, we are going to take a look at how to add a background video to the homepage.

Designing the contact form5:02
In this video, we will start building the contact form.
Configuring the contact page4:35
We will now configure the contact form to make it functional.
Adding success and error pages0:38
We are going to add a success page and an error page to the contact form
Making necessary changes to the homepage2:50
In this video, we will go ahead and make some necessary changes to the homepage

The Signup Page2:40
In this video, we will design the signup page
The Signup Verification Page1:06
Still on the login tools, we will now work on the signup verification page
The Login Page2:27
In this video, we will go ahead and design the login page
the Login Error Page0:53
We will no go ahead and design the login error page
The Logout Page0:52
In this video, we will go ahead and work on the logout papge
The Password Recovery Page1:24
We will now work on the password recovery page
The Password Recovery Error Page0:47
In the video, we will design the password recovery error page
The Password Recovery Success Page1:00
In this video, we will work on the success recovery success page
The Change Password Page1:30
In this video, we will work on the change password page
The Change Password Success Page0:43
In this video, we will work on the change password success page
The Edit Profile Page1:26
In this video, we will work on the edit profile page
The Admin Page1:15
In this video, we will design the administrator's page
The Edit Profile Denied Page1:10
In this video, we will work on the edit profile denied page
The Edit Profile Success Page0:50
In this video, we will work on the edit profile success page
The Account Homepage2:41
In this video, we will design the account homepage

Configuring the Signup Page5:46
In this video, we are going to configure the signup page
Configuring the Login Page2:50
We will take a look at how to configure the login page in this video
Configuring the Login Error Page1:05
We will configure the login error page in this video
configuring the Password Recovery Pages1:37
In this video, we will configure the password recovery pages
Configuring the Change password and Edit profile pages1:02
In this video, we will configure the changes password and the edit profile pages
Configuring the Administrator's pages and addition of links2:55
In this video, we will configure the administrator's page as well as add some useful links

Requirements

A little bit knowledge about using WYSIWYG Web Builder
A Localhost Server (WAMP for Windows)
A Code Editor (Brackets)
WYSIWYG Web Builder version 11 or above

Description

Level up your web design skills, by learning how to create a responsive portfolio website with WYSIWYG Web Builder. This course will help you use most of the available tools (both basic and advanced) in WYSIWYG Web builder to accomplish designing more complicated websites.

In this course, you will learn how to incorporate Master Pages and sub Master Pages to help your workflow. I will also demonstrate to you how to use video backgrounds and add content to individual pages as well as work with login tools and CMS tools. We will also see the basic way to optimize our website for search engines.

Who this course is for:

Anyone who wants to build websites the "professional" way
Anyone who has practiced web design as a hobby but is not confident about their skill set in a professional arena
For Teams or Freelancers who wants to build an online presence
Anyone who wants to save time and accomplish more in web designing
Anyone who likes to learn through practical application and not all theory

Web Design for Beginners: Using WYSIWYG Web Builder

What you'll learn

Explore related topics

Course content

Introduction2 lectures • 5min

Getting Started9 lectures • 35min

Working with the Style Manager1 lecture • 12min

The Master Page6 lectures • 27min

Working on the Homepage9 lectures • 1hr 8min

Working on the Contact Form4 lectures • 13min

Working with CSS3 animations1 lecture • 2min

Working with login Tools15 lectures • 21min

Configuring the login tools6 lectures • 15min

The Site Navigation2 lectures • 5min

Requirements

Description

Who this course is for: