Sharing Is Caring:

Web Design for Beginners: Using WYSIWYG Web Builder

  • Level up your web design skills, by learning how to create a responsive portfolio website with WYSIWYG Web Builder.
  • Free tutorial
  • Rating: 4.2 out of 54.2 (143 ratings)
  • 12,758 students
  • 5hr 42min of on-demand video
  • Created by Ishmeal Lamptey


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


  • 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


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.

Read Also -->   Hands-on Arduino using Online Platform

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

Show less

Course content

15 sections • 83 lectures • 5h 41m total lengthCollapse all sections

Introduction2 lectures • 5min

  • Welcome00:50
  • Preview of the final project04:31

Getting Started9 lectures • 35min

  • Tools going to be used in the project03:54
  • Configuring the workspace04:01
  • The Toolbox03:45
  • Structure of the Website02:20
  • Adding Pages08:36
  • Renaming Object ID’s04:59
  • Naming and Saving Project01:07
  • Page Properties04:59
  • Page Extensions01:00

Working with the Style Manager1 lecture • 12min

  • Creating Styles11:59

The Master Page6 lectures • 27min

  • Layer Options03:20
  • Creating the site Navigation06:42
  • Main Master Page02:42
  • Adding Tooltip to the Master page03:19
  • Login Master Page02:57
  • Account Master Page07:39

Working on the Homepage9 lectures • 1hr 8min

  • The Introduction Section Part 104:55
  • The Introduction Section Part 206:36
  • The About Section08:30
  • The Services Section14:06
  • The Team Section07:10
  • the Pricing Section12:36
  • The Portfolio Section07:20
  • The Contact Section04:53
  • Adding a Background Video to the homepage01:48

Working on the Contact Form4 lectures • 13min

  • Designing the contact form05:02
  • Configuring the contact page04:35
  • Adding success and error pages00:38
  • Making necessary changes to the homepage02:50
Read Also -->   Protecting yourself online, Advice from a professional hacker

Working with CSS3 animations1 lecture • 2min

  • CSS3 Animations01:46

Working with login Tools15 lectures • 21min

  • The Signup Page02:40
  • The Signup Verification Page01:06
  • The Login Page02:27
  • the Login Error Page00:53
  • The Logout Page00:52
  • The Password Recovery Page01:24
  • The Password Recovery Error Page00:47
  • The Password Recovery Success Page01:00
  • The Change Password Page01:30
  • The Change Password Success Page00:43
  • The Edit Profile Page01:26
  • The Admin Page01:15
  • The Edit Profile Denied Page01:10
  • The Edit Profile Success Page00:50
  • The Account Homepage02:41

Configuring the login tools6 lectures • 15min

  • Configuring the Signup Page05:46
  • Configuring the Login Page02:50
  • Configuring the Login Error Page01:05
  • configuring the Password Recovery Pages01:37
  • Configuring the Change password and Edit profile pages01:02
  • Configuring the Administrator’s pages and addition of links02:55

The Site Navigation2 lectures • 5min

  • Linking the homepage sections02:56
  • Applying Master pages02:03

Working with the Content Management System (CMS) Tools5 lectures • 18min

  • The Blog Page07:58
  • The Blog Admin Page01:27
  • Adding share buttons to the Blog page03:59
  • Configuring the CMS pages02:57
  • Addition of scripts to the Blog page01:36

Responsive Web Design13 lectures • 1hr 23min

  • Creating Responsive Text03:35
  • Responsive Master Page Part 111:39
  • Responsive Master Page Part 203:18
  • Making the Introduction section responsive10:02
  • Making the About section responsive06:54
  • Making the services section responsive10:38
  • Making the Team section responsive05:19
  • Making the pricing section responsive05:01
  • Making the portfolio section responsive05:35
  • Making the contact section responsive07:17
  • Making the login pages responsive Part 101:28
  • Making the login pages responsive Part 205:36
  • Making the CMS Pages responsive06:29

Search Engine Optimization Tips3 lectures • 15min

  • Search Engine Optimization Introduction02:19
  • Page Titles05:53
  • Addition of sitemap06:22

Publishing and Previewing of the Website Project6 lectures • 24min

  • Publishing to a localhost server05:33
  • Stretched background video01:37
  • Publishing to a domain00:28
  • Making some tweaks01:44
  • Previewing and applying necessary changes10:29
  • The domain version of the website project04:05
Read Also -->   Real-World Example: Git and GitHub on Windows - Basics

Conclusion1 lecture • 1min

  • Thank you00:17

👇👇👇👇 Click Below to Enroll in Free Udemy Course 👇👇👇👇

Go to Course

👇👇 See Also 👇👇

Join Us Join Us Join Us
Sharing Is Caring:

Leave a Comment

Ads Blocker Image Powered by Code Help Pro

Ads Blocker Detected!!!

We have detected that you are using extensions to block ads. Please support us by disabling these ads blocker.

Powered By
Best Wordpress Adblock Detecting Plugin | CHP Adblock