Web Design Class

Adobe Aero
Mega Menu
Divi
Mistakes are a fee, not a fine
Advanced Reset WP
Code canyon
[Link]
[Link]
HTML, CSS & JavaScript
Directory

Lectures Plan

Module 1
Class Lecture Tasks
1st Installations: Experience on Widget
Domain, WordPress, plugins, theme, Page Creation, Try Widget Panel panel
2nd
3rd Elementor Widget Panel Detailed, Global Color Setting, Dark Theme, Set
Page as Homepage from customize, Site Identity, Favicon,
4th Try all widgets and try copy any site cloning
5 Where to get from the content for website?
Copyright Free Content
6 Useful Widget, Useful Plugins, Under Construction, Word File
7 Design Header & Footer Design your site’s H&F
8 Use win or Chrome like a Pro - Chrome and Extensions, Short keys etc.
9 Slider Revolution, Section/column Animation
10 Making All other Pages, Menu Creation and Setting Up
11 Blog Posts & Categories
12 Forms Creation and data collection, Popup Creation
13 Linking pages, Set URL to Open in new tab, Permalinks
14 WordPress Dashboard
15 Design Checking Criteria & Design Rules
16 Responsiveness, Live chat option, Contact Form setting
17 Ecommerce, woo commerce dashboard, Store Setup
18 Products, Simple and Variable
19 Customization pages like Checkout or Product
20 Website design Using WordPress Own Page Builder
21 Website Using Kits
Web Design Class

22 Website Using Themes

23 Page Builders , WB Bakery,
24 How to take Backup of your Website, Payment gateway
25 Single pager Website
26 Logo Design and Branding
27 Who is, Spy any website

Module 2
Introductions

Class Lecture Tasks

28 Introduction: Level of web, Introduction to website,
29 Website Type, Website Layout
30 Hosting, Type of Hosting, should consider before buying it, how to buy
31 cPanel Walkthrough, Connect domain hosting, Webmail
32 Professional Workflow for Site or app
33 What is CMS, Type of CMS, WordPress, Wix
34 Dropshipping
35 Shopify, Open Cart

Day 1 – Installation

Subdomain & WordPress installation

Open cPanel > create subdomain (optional) > search WordPress in cPanel search bar > click on WordPress manager by
softaculous > click on install button > quick install > Choose installation URL (select your domain or subdomain where
you want to install WordPress) > Set your username > Set password > add your email > click on install > Type your
website

WordPress Website Design Process or workflow

Login cPanel ([Link]/cpanel) >Domain cPanel > install WordPress > login WordPress
([Link]/wp-admin) > install plugins > Elementor pro & Elementor Core plugin > envato elements
(optional) (for theme kits and other graphic & resources) > install theme Hello Elementor from appearance menu>assign
header & footer from theme Builder options > add new page and set Page template as Elementor Full Width > save or
update page > edit page with Elementor button > now you can set page as homepage from appearance > customize and
homepage setting option > choose Static page and select the page which you want to set as homepage> now you can
create customized website with your own ideas

Day 2 Empty
Web Design Class

Day 3
Hover

Elementor Widget Panel Detailed

Global Color & Fonts Setting
Before you start working on website its better way to start from setting up Global Colors & Global fonts

Home Page Setting

Go to customize page > home page setting > Static page > select page which you want to show on home.

Elementor Dark Theme from site setting you can change page color to your favorite colors

Elementor Full Width will hide page breadcrumb

Editing Handles User Preferences

Site Setting Elementor

Site title description
Page Loader

Day 4
Try all widgets and try copy any site
Day 5
You can get copyright if you use someone else content
Types of Google penalties
Plagiarism Checker
Where to get from the content for website?
No Copyright Stock videos or images
What kind of videos or images we should use No copyright Content
To reduce loading time of any website, use smaller size images
Check, can we use or not image by searching image with google image if that other brands are also using that image, it
means you can also use that
Things to keep in mind while using
1. Self-explained images
2. Should be Copyright Free
3. Image Quality (Resolution)
4. Image Dimensions (size) as per need
5. Image file size should be lower than 100kbs (save for web) Light weight, Image compress
6. Image Relevant to the content or Niche
7. Image should follow the color theme (we can change color of the images using Photoshop)
8. To crop or resize images use Photopia online App or WordPress built in Photo editor
9. To make the image to busy and too much outline and animation will be boring
10. Mostly text on images doesn’t look good so try to avoid that.

Download Stock Images

Search in google > click on the thumbnail of the image you like > click again on highlighted image > go to website and
download from there.
Web Design Class

Self-explained images
[Link] Premium
[Link] Free
[Link] Free
[Link] Free
Google Images Free
Google Check copyright before using it
Always use Copyright free images
Download PNGs
[Link] Need to login
[Link] No Need to login
[Link] No Need to login, Verification needed
google

Icons
Use same Weight icons
Use Single color or official colors
Sometime official colors are not look as professional
Facing to text
Different type of Icons like
Filled, outlined, Colored, Simple, Complex
[Link]

Day 6
Useful Widget, Useful Plugins, Under Construction,
Elementor Useful Widgets
Inner Section
Nav Menu Responsive to any device, Dropdown Menu, Highlighter,
Dual Heading To make double headings
Call to action elements CTA
Icon List List of Text along Icons, Bullet Points
Accordion tabs / dropdown /
Tabs Horizontal Tabs, like our downloads page
Testimonials Carousel Previous customers feedback carousel,
Feature List
Spacer
Divider
Image Carousel
Image Box
Flex Box
Flip Box
Price Tab
Lotties

Useful Plugins
Elementor Pro + Core
Web Design Class

JEG Elementor
Elements Kit Lite
Powerpack Lite addon for Elementor
Essential Addons for Elementor
Under Construction
All in one Migration tool
Envato Elements (to use or import resources like Stock images or Template kits) Detail intro to Envato Elements
Now import header, footer & other pages from envato element’s theme kits or can create a custom design by yourself
WP Content Copy Protection & No Right Click
File Manager

Nitro pack to boost site speed or for site speed optimization

Wp optimize cache clean

Under Construction
Top bar new option added
In menu > Tools > Under Construction option

Day 7
How to assign Header footer
Create H & F using Envato free account (Only Blocks)
Create header and footer from Templates > Theme Builder Custom
Get ideas how to create Header footers

Day 8 – win + chrome

Windows side by side
Disk Cleanup (Temporary Files Folder Clean)
Default Apps change
Create templates for repeating work

Windows Short keys

Ctrl+C Copy
Ctrl+V Paste
Ctrl+X Cut
Ctrl+A Select All
Ctrl+Z Undo last action
Win+E Open Explorer (open this PC) (change quick access window)
Win+D Go to Desktop
Ctrl+Shift+N Create New Folder
Alt+Tab Cycle Opened Windows
Alt+shift+Tab Cycle backward Open Windows
F2 Rename
Tab Next option
Alt+F4 Close Application or Shut down pc
Shift+Ctrl+Arrow Keys Complete Word Selection
Win+R Run Command (type %temp% and hit enter to remove temporary files)
Ctrl+shift+1, 2, 3... Thumbnail or list view
Web Design Class

Chrome
[Link]
Chrome Users and Synchronization
Clear History
Bookmark and Book Mark Manager
On Startup

Short Keys Chrome

New Tab Ctrl+T
New Window Ctrl+N
New Incognito Ctrl+Shift+N
History Ctrl+H
Clear Browsing Data Ctrl+Shift+Del
Chrome Task Manager Shift+Escape
Downloads Page Ctrl+J
Bookmark page Ctrl+D
Show Bookmark bar Ctrl+Shift+B
Bookmark manager Ctrl+Shift+O
Zoom in or out Ctrl+ + or – to reset press ctrl+0
Inspect Elements Ctrl+Shift+I or Ctrl+shift+C
Hide Tabs Bar F11
Source Ctrl+U
Close Tab Ctrl+W

Chrome Plugins or Extensions

WA Web Plus for WhatsApp Hide chats
Smart Page Ruler
SVG grabber to download SVGs file with single click
Save Image As PNG
Lottie grabber to download lot ties from any site
JSON downloader to download Json files
Font Ninja Site Font Detector
ColorZilla Site Color Grabber
Browse VPN VPN
Grammarly
UX Check
UX Principles A UX principle explained every time you open a new tab
Save to Pocket
Mailtrack Checked email confirmation
AdBlock Undetectable Adblocker
Download Images from Protected Websites
LastPass Password Manager

Fonts
Detect font
Detect font of a site font ninja Extension for chrome
Detect fonts from any design whitefront
Web Design Class

Free Fonts Downloading sites

[Link]
[Link]
[Link]
[Link]
[Link]

Installation
Select all and install

Day 9
Slider Revolution
Smart Slider
Template
Create by yourself

Get proper ideas first

Keep it simple

Back
Slides
Add layers

Sliders one big slide

Carousel allows to see multiple slides in same time
Hero allows to create a larges full width display at the top the site
Addon can extend the power like particle effects, parallax effect, bubbles, Lottie’s, after before
Module contains slides and slides contains layers,

Slides Menu slide is like page in a book - Global layers will appear on all slides -

Side bar General Options -

Advanced Features
Click on Gear Icon to see the options
Slider Revolution Modules
Slider consists of multiple Slides, each slide has its own content
Scene is essentially a slider with a single slide and no navigation elements, best used for content modules that require no
additional depth.
Carousel is a slider with multiple slides visible at the same time, there are lots of options to customize the carousel.

What size should the module have?

Auto: The module dimensions will automatically adjust to the surrounding container width keeping its aspect
ratio.
Full Width: The module will always span across the full width of the web page. The height can be flexible depending
on other setting
Web Design Class

Full Screen: The module will always fit the full area within the web page.

How would you like your content to resize?

Classic, Linear Resizing

Layers will reside in a linear fashion, as the module size changes. You only need to configure one screen size.

Intelligent Inheriting
Four custom device sizes are activated and a layer’s size / position is automatically calculated from its desktop device
size. You can make individual adjustments to layers in all device sizes.

Manual Custom Sizes

Four custom device sizes are activated and layers need to be manually adjusted to their respective device sizes.

Day 10
Making All other Pages
Menu Creation and setting up

Day 11

Blogging sites are mostly based on articles/news/magazine

Blog Posts & Categories

Elementor widgets for blogging

Posts
Categories
Recent posts
Post Grid
Post Timeline
Blog Posts

Blog & Posts

Metadata gives data to google about content and Purpose, for individual Page or post and determine whether your
information is relevant enough to show in google search
But in posts it can be date comments etc.
Add Blog or article section

Go to setting > Reading > change setting according to your desire

How to Do Posting and Categories

Post Page Setup from customize menu > Homepage Setting > post Page

Categories as Nav Menu

Web Design Class

Day 12

Forms
To collect user details or information
[Link]
pli=1&pli=1

Sections settings
Full width, stretch,

Form
Input fields:

Field types: Text, text area, date, email, number, Radio, Checkbox,

After submission
Submissions

Create Popups
Templates > Popups > name the popup > after designing > don’t apply any conditions >

Exit intent popup

Day 13
Linking pages, set URL to Open in new tab, Permalinks

Day 14

Elementor Widget Intro

Site setting
Page Setting Preview

Word press Dashboard

Users
You can use plugins to duplicate pages or posts

Forms

Day 15

Design Checking Criteria

Web Design Class

Site Audit (SEO, Image Optimization, Loading time)

Criteria for Design Improvements
Check website before submission
Don’t get impressed by any design
1. Page Speed Test
2. Your eyes should be scanner
3. Spelling Check sometime brand name
4. Color Scheme use max. three colors, Hover Colors
5. Typography text size, colors, readability, functionality, Font
Selection, max. three fonts
6. Alignment & Balance breathing space
7. Icon, Image or Illustration Quality good quality, Matching Colors, Size, facing, Relevant, Richness
8. Linking and Functionality
9. Overall Look

Website Design Process

1. Client Information Gathering and Reviewing (Creative Brief or design Questionnaire)
2. Research, Analysis & Idea Generation
3. UI(User Interface)/UX (User Experience ) Design (Planning, Wire framing, UI Designing, Prototyping)
4. Designing or Development (it could be Website/App/software/Game)
5. Testing or Beta Launch to check the bugs or errors
6. Final Retouching
7. Final Launch

Day 16

Responsiveness
If you are using home page content on other pages, then first make it responsive then copy sections or save as Template
and use it.
Mostly kits are already Responsive
Themes are also mostly responsive (you can check by searching word “responsive “from theme downloading site)
Icon list is not recommended for menu, Sub menu or drop-down menu, responsiveness
Never ever delete any time but you can hide for that device
<Jugar>if you want to show something on a single device than add item and hide from other devices

Live chat option

[Link]

[Link] Plugin
Can install phone app
Go to plugins > add New > search [Link] > Install [Link] > activate > now to Setting > Tawk > Signup > Add details >

Contact Form setting

Day 17 – ecommerce
Ecommerce
Woo commerce dashboard
Web Design Class

Store Setup

Basics
Woocommerce is a plugin that can be used for creating ecommerce store using WordPress
You can create ecommerce sites using square space, Shopify (Best for Drop shipping), Wix, OpenCart,
For Highly secure and best experience estore recommendation is to use Custom sites
WordPress is recommended for blogging, portfolio, appointment,

Product Types
Product could be virtual product (Premium Videos, courses, PDF) or physical Product (Printed Books, furniture)

Types of estores
> Single Product store
> Single Niche/category Store
> General Stores
> Single Vendor/seller Store [Link]
> Multi-Vendor/sellers Store amazon or daraz or eBay

Other Plugins
Variation Swatches for Woocommerce

How to do site Audit (Speed, loading time, SEO, bounce rate)

How to optimize WordPress site
How to optimize site speed and performance

Setting of Woocommerce
Enable taxation or Coupons
Currency options

Products

Simple Product
Variable product
Group Products

Method to upload Products (Product Listing)

Stock Keeping Unit SKU for inventory management

Product image vs Product Gallery

Tax Setting

Shipping Charges
Quantity based S. Charges
Web Design Class

If someone buy 2 or more pieces of a product it will charge shipping only 5$ for all but if we want to charge multiple
then we have to add text in Flat Rate setting of Shipping setting > Cost “5.00 * [qty]”
After adding Shipping Classes, you will see more options under Flat Rate setting

Products setting
General
Inventory
Downloadable Products

Payments
Plugin
PayPal Payment plugins for PayPal WooCommerce by Payment Plugins,
Stripe Payment plugins for Stripe WooCommerce by Payment Plugins,
For stripe account integration
[Link]/test/Api keys or just go to dashboard > Developer > API keys > copy publishable key and paste >
Copy Secret key copy and paste >

Research Topics
How to setup ecommerce store on WordPress using WooCommerce plugin
How to setup up / customize checkout page
How to setup or customize Shop Page

Woo-commerce
Used for ecommerce
Can be Physical (Furniture, Beauty, Hard Cover Books, ) or Virtual products(eBooks, Videos,)

How many types of estores?

Single Product Store vs Niche Product vs General Store vs Multi-Vendor Store or sell Courses

After installation of Woo commerce plugin, you will see more menus like
1. Visit Store option
2. Created new pages likes checkout, cart, my account, shop
3. New menu of Woo commerce, Products, Analytics, Marketing
4. Elementor Widgets extra elements

Woo commerce Dashboard

Woocommerce account and mobile

Add Multi Products using CSV

CSV file used for Products import
SKU Stock Keeping Unit

Point of Sale (POS)

Day 18
Web Design Class

Products, Simple and Variable

Short Codes
Checkout Page Design
Signing or Signup page Design
Product Page Design
Shop Page Design

Products
Screen Option

Add Variable products

First of all, add Attributes like Color > use | sign with space to make them separate category > then go to Variations >
Add variations and select Create Variations from all attributes
Day 19

How to customize Product or Checkout Pages

Using plugins

Day 20 - WordPress Page Builder

Website design Using WordPress Own Page Builder

Day 21
Easiest way to make website
Totally Customizable
Blocks

Kits

WordPress login > Install plugins (Envato Elements Premium + Elementor Pro + Elementor Core) > install hello Elementor
theme > go to elements > template kit > Click on Connect envato Elements > login envato Elements > Copy the Token
Key and paste >

Day 22
Using Themes
Theme installation method 2: via cPanel
How to place Google ads on WordPress site

Delete WordPress Data without cPanel Access

If you don’t have access to cPanel then you can delete all data manually or using plugins from WordPress

How to find WordPress free themes?

Web Design Class

Search in Google “medicine store WordPress theme” > go to theme forest > you also can directly search in theme forest
> basically you can take inspiration and idea or find good theme NAME > now. find free from google “mymedi WordPress
free download ” (JoJo-themes, ) > Find theme with Demo content
Install WordPress > Login WordPress > go to appearance – Themes > upload your favorite theme or upload from cPanel
> Activate theme > Begin Required Plugins (you can replace Elementor plugin) > find Import Demo content options >
select and import content > Change settings from “Theme Options or (theme name options)” > remove extra pages like
Home 1 home 2 etc. (from both sides menu and pages)>

Day 23
Page Builders
When we use Themes, mostly we can see different page builders like Elementor, wpbakery, site origin, or divi
1. Elementor
2. Wpbakery Page Builder
3. Divi

Day 24
How to take Backup of your site?
We use a plugin named as “All-in-One WP Migration” > Your website password will be same as you backed up site
password.
Backup a website
Install plugins > All in one Migration > click on All-in-one Migration option from left side menu > click on export > Choose
file type to export > click on export
If you want to import then same process but click on import instead of export option > and select your file type > click
import > website backup will be uploaded
*Your new password will be replaced with previous password

Day 25

Single pager Website

Single pager Website
CSS ID = numbering (Area of Section and put same numbering in menu) (don’t put #)
Custom Menu (number with hash)
You have to give each section numbers

Day 26
Logo Design and Branding
Online logo Maker
Day 27
Who is, Spy any website
Spy any website
scanwp
Web Design Class

Day 28

Level of Web
Surface Web
Deep Web
Dark Web

Introduction to website

How a Website Work

Visitor > Search engine > request to server for a quire > find the from servers > Visitors > See info

Domain Name > https\\ www. Maxdesignx .com

Protocol sub domain d. name top level domain
/ New Page or link
Day 29
Website Types

1. Informational websites
2. Blogging websites (personal or single writer (personal Blog)+ Multi writers)
3. News or Magazine Website cretiveblog
4. Social Media Websites facebook, linkedin
5. Video Streaming or Photo Sharing YouTube, Instagram, Pinterest
6. Portfolio Website
7. Services Websites
8. Appointment or booking Based Websites Doctors, lawyers,
9. Dynamic (Content changes upon user) & Static Website
10. Ecommerce Website or estores (Single vendor + Mutli vendor + single product + single niche + general store)
11. Discussion forums or question answers reddit, Quora
12. Education or LMS (Learning Management System) Digi skills,
13. Portals or CRM (Customer Relationship Management)
14. Web Based Applications
15. Landing page or Single Page Websites
16. Search Engine Websites (google, Bing, Yahoo,)
17. Directory or Business Listing Website
18. Subscription Based websites
19. Freelancing Websites
20. Information Based Wikipedia
21. Financial site Banking or Exchanges
22. Social Media Sites

Single Pager

Website Layout
Navigation Menu, Top bar, CTA button, Slider or banner, Body, Footer, Features, Testimonials,
Web Design Class

Dropdown menu
Mega Menu
Popups, Forms,
UI and UX, Wireframe
Pages
Home, About, Contact, FAQs, Testimonials,

Day 30
How to check and buy Domain + hosting

Hosting
Hosting, Type of Hosting, should consider before buying it

Hosting Operating System OS like windows or Linux

Storage

Inode Limit
Free or Paid SSL
Sometime provide free domain for one years

Day 31
cPanel Walkthrough
Control Panel vs Client Panel
SSL Security Socket Layer controlled by Cpanel

Connect Domain with Hosting

We use DNS setting in domain panel and add domain name into hosting to connect them
Need Server address or DNS address and sometime IP Address
Change hosting

We need to add our domain in cpanel of Hosting

In domain panel > dns or server address > we add new DNS Address

Webmail
How to create Professional Email
Three types of email
1. Regular Emails like Gmail, yahoo, Hotmail,
2. Temp Email [Link] for fake, random or temporary use
3. Professional or webmail domain name site,

You need domain linked with a hosting > email data are saved in your hosting
Go to your cPanel > search mail > create > put your username > here is the two option for password you can set it right
now or user can set password by its own.

Gsuite by Google
Web Design Class

Day 32
Workflow for Professional Site or App
Understanding of Purpose of the Website or Concept > Wireframe > UI (User Interface) Design using Adobe Photoshop
or Adobe XD(Experience) or can be build prototype between this process > Slicing of UI Design > sent to Programmer or
Coder or CMS designer > Site Audit or Testing >

Day 33

Content Management Systems (CMS)

There are different types of content management systems to create easily website in just few hours without writing a
single line of code.

WordPress

Where to use WordPress

Blogging, Portfolio, Simple, Appointment sites

Where not use WordPress

Ecommerce

[Link]

Day 34

Shopify

Open Cart

Day 35
Dropshipping