Front End Web Design using WYSIWYG Web Builder like a pro

Launch a career as a web designer by learning How to use WYSIWYG Web Builder to build professional websites.

Created byIshmeal Lamptey

Last updated 10/2018

English

What you'll learn

Over 39 lectures and 3 hours of content!
Create any website layout you can imagine
Support any device size with Responsive (mobile-friendly) Design
Use common vocabulary from the design industry

Course content

9 sections • 40 lectures • 2h 46m total length

Welcome0:51
Preview of the final project1:02
We will preview the final project going to be designed in this video

Getting to know the interface2:35
We will take a look at the interface of WYSIWYG Web Builder and get familiar with all the various sections
Configuring the workspace0:47
We will go ahead to configure our workspace to make it suitable for desgining
Creating new pages2:23
We will learn how to create new pages, rename pages, delete pages and many more
Page properties3:00
We will take a look at the properties a page possesses
Differences between page properties and site properties1:04
We will take a look at the differences between page properties and site properties
The toolbox0:58
We will take a look at some of the tools available in WYSIWYG Web Builder and what they are used for
Previewing in the browser2:15
We will take a look at how to preview a project in the browser

What is a master page?2:04
We will learn what a master page is and how to create one
Building the master page 12:26
We will start designing a master page for out project
Building the master page 29:06
We will continue to design our master page for our project
Building the site navigation3:38
We will take a look at some of the navigation tools and then continue to create our website navigation
Centering the entire website2:12
We will take a look at how to center our website that will appear centered in the browser
Adding a logo1:20
We will learn how to add images to our project and then add a logo for the project
Adding a footer text0:57
We will go ahead to add some information to the footer
Renaming Object ID's2:55

The text tool3:15
We will learn a bit about the text tool, how to use it and some properties of it
Creating bulleted list1:06
We will take a look at how to create bulleted list
Style manager4:27
We will take a look at the style manager, how to access it and create styles to be used in our project
Adding google web fonts3:03
We will take a look at google web fonts and how to add one or more to our project

Designing the Homepage12:02
We will design the home page of our project for desktop
Designing the About page4:55
We will design the about page of our project for desktop
Designing the Portfolio Page3:36
We will design the portfolio page of our project for desktop
Designing the Services Page3:59
We will design the services page of our project for desktop
Adding text to the pages7:57
We will now populate all our pages with text

Designing the contact page 112:36
We will take a look at the contact tools and start to design the contact page
Designing the contact page 210:33
We will continue to work on the contact page and finish it up
Adding a success and error pages1:45
We will learn the roles of a success and an error page and learn how to add them to our project's contact form
The contact page file extension0:40
We will take a look at the various file extensions available in WYSIWYG Web Builder and select the appropriate one for our contact page

Responsive web design in WYSIWYG Web Builder12:27
We will talk about responsive web design and how it works in WYSIWYG Web Builder
Making the about page responsive7:51
We will make the about page responsive
Making the services page responsive4:04
We will make the services page responsive
Making the portfolio page responsive5:48
We will make the portfolio page responsive
Masking the master page responsive9:11
We will make the master page responsive
Making the contact page responsive8:04
We will make the contact page responsive

Requirements

No prerequisite knowledge required
WYSIWYG Web Builder Version 11 or above

Description

You can launch a new career in web design today by learning how to build websites with WYSIWYG Web Builder. You don't need a computer science degree or any previous knowledge in coding. All you need is a computer, a bit of time, a lot of determination, and a teacher you trust. I've taught WWB to countless coworkers and held training sessions for individuals. I am that teacher you can trust.

Your limitations in this course has got to do with your imaginations. As far as you can imagine, you can build it. This course teaches you how to take 100% control over your webpages by using the same concepts that every professional website uses.

Who this course is for:

Anyone who has practiced web design as a hobby but is not confident about their skillset in a professional arena
Anyone who wants to build websites the "professional" way

Front End Web Design using WYSIWYG Web Builder like a pro

What you'll learn

Explore related topics

Course content

Introduction2 lectures • 2min

Getting Started7 lectures • 13min

Building a Master Page8 lectures • 25min

Working with Text4 lectures • 12min

Adding Content5 lectures • 32min

The Contact Page4 lectures • 26min

Responsive Web Design6 lectures • 47min

Saving and Publishing3 lectures • 10min

Conclusion1 lecture • 1min

Requirements

Description

Who this course is for: