Web Design and Development in Lahore Karachi

Learn complete Web Design and Development in Lahore Karachi , Tutorials for beginners, In this course i try my best and combined all subjects as people start to learn completely. I make my student skill as a full stack web developer and designer, Student can be able do front end back end development and designing.

New Demo for Web Design and Development in Lahore Karachi

Web Design and development Courses Introduction

Windows 10 HTML CSS Photoshop tutorial for beginners

Watch this video on YouTube

Windows 10 Tutorials for beginners

I create this course because don’t student have basic knowledge or not. As a explainded this is complete start from begining point. If students know how to use windows then they can skill it. It will help student to make their skill in Web Design and Development

1 Windows – Desktop and Taskbar
2 Windows – Taskbar Options
3 Windows – Start Button Options
4 Windows – Connect Mobile Internet to your PC or Laptop
5 Windows – use android internet on laptop and PC USB Tethering and Personal Hotspot
6 Windows Install and Uninstall Software
7 Windows – Learn about File Size and File Types in Windows
8 Windows – Use CUT COPY PASTE DELETE SELECT ALL Options in Windows
9 Windows System Settings How to use Display and Sound Options
10 Windows – create Email Account and Use Send and recieve other extra advantages
11 Windows System Settings – Focuss Assist Power Sleep Battery Storage etc
12 Windows System Settings – Projecting Sharing and About
13 Windows Settings – Devices – Bluetooth Printer Mouse Typing USB
14 Windows – Windows Settings Personalization BG Color theme Fonts
15 Windows Settings Apps Accounts Time and Languages Gamming Ease of Access
16 Windows Update and Security
17 Windows Drive – Device Manager
18 Windows Get Live Support from Microsoft
19 Windows Mouse Right Click Options
20 Windows – Remotely Control Android Phone from Windows – Using ADB Scrcpy Tools
21 Windows Install Extensions in Firefox and Chrome Web browser

HTML Tutorial for beginners for Web Design and Development

0 – HTML Basic – Course Section Introduction
1 – What is HTML – Learn How to do Coding Head Body – Element Hello World
2 – Atom Source Code Editor – How to Use it
3 – What is tag Why we use tags in HTML file – Learn Practically
4 What is atribute in HTML – Correct way to use code – Like Attribute name style value
5 – HTML Source Code – Learn everything with code and live practice
6 – Text Formating in HTML – Paragraph Bold Underline Italic with live source code
7 – Image Element and attributes in HTML – Add Image from folder and change width height size
8 – Links and Images in HTML- Learn href link on html page to other- How to add link over Image
9 – Table in HTML – Create Rows and Columns – Add Table data – TR TD html Elements
10 – Form Learn Field Like Input Type Text Password button Select Drop Down – Radio Button and Check Box
11 – Create Form in Table in HTML – Learn Input field with using tr td tags
12 – HTML Basic Class Work.zip

CSS Tutorial for Beginners for Web Design and Development

0 – CSS Basic with Project- Course Section Introduction.mp4″
1 – What is CSS in Web Designing -How to Decorate All HTML files and Elements with one Sytle.mp4″
2 – CSS Source Code Explaination – Learn Selector declaretion property and value on html tags .mp4″
3 – CP News HTML CSS Project – Learn the right way to create a project.mp4″
4 – Manu bar – How to Create Menu in HTML and Styling Navigation bar in CSS File .mp4″
5 – Navigation bar Styling to UL Unordered list and List-item.mp4″
6 – Styling to Post Contents – Blog Thumbnial title and Date and Short Discription with button .mp4″
7 How to Styling Post contents with css file continued.mp4″
8 – Post thumnail with tilte and description.mp4″
9 – Side bar – Style Most Popular Posts list title thumbnail Link over .mp4″
10 Sidebar continue.mp4″
11 – Main content and sidebar – Style Post cards and Sidebar with CSS file.mp4″
12 – Footer Settings – Add Widgets and Styling how to styling .mp4″
13 Footer Contents.mp4″
14 – Footer Widgets .mp4″
15 – CSS Basic Class Work.zip”
16 – Update – I defined – What am i going to cover.mp4″
16 – update – Post contents designing .mp4″
17 – update – Post thumnail html source code.mp4″
19 update – Add Feature HTML Source and CSS Code.mp4″
20 update How to Create Header main section with html and csss source code.mp4″
Updated Class Work.zip

Watch this video on YouTube

Photoshop Tutorial for Beginners for Web Design and Development

0 – Photoshop CC Basic Tools Option
1 – Start Photoshop CC – Create New Document – Open File – Use Drag and Drop Option – Recent Files
2 Photoshop CC Introduction to Photoshop Features and Option Photoshop CC Manu Tool Properties Tabs Photoshop CC Workspace
3 Photoshop CC Move Tool
4 Photoshop CC Move Tool Photoshop CC Properties
5 Photoshop CC How to use Transform
6 Photoshop CC Marquee Select Tool
7 Photoshop CC Select Tool Photoshop CC Properties
8 Photoshop CC Lasso Tool
9 Photoshop CC Quick Selection Tool
10 Photoshop CC Magic Wand Tool
11 Photoshop CC Crop Tool Photoshop CC Slice Tool
12 Photoshop CC Frame Tool
13 Photoshop CC Eye Dropper Tool
14 Photoshop CC Spot Healing Brush Tool
15 Photoshop CC Brush Tool –
16 Photoshop CC Brush tool Photoshop CC pen tool
17 Photoshop CC Clone Stampe Tool Photoshop CC Learn use of clone stamp tool Photoshop CC make clone of PS document or any image
18 Photoshop CC Histery Tool Photoshop CC How to Remove History on current applied Tool
19 Photoshop CC Eraser Tool Photoshop CC Background Eraser Tool Photoshop CC Learn how to use eraser Tool properly
20 Photoshop CC Gardient Tool Photoshop CC Patern Tool Photoshop CC Change Color make gardient background
21 Photoshop CC Blur Tool –
22 Photoshop CC Text Tool Photoshop CC Learn Font Size Color Style Photoshop CC Alignment Left Center Right
23 Photoshop CC Rectangle Tool Photoshop CC Learn Change Color, Add Stroke, Custom Shap Tools
Class work photoshop.zip

Bootstrap

0 – Bootstrap Basic
1 MAX CDN Setup for Boostrap 4 Basic Learning – My First BS 4 Hello Class
2 Grid System – Learn row and Col – How to apply col-md and col-sm with Size Values
3 Button and Text Formating in Bootstrap 4
4 Bootstrap 4 Card
5 Slides Carousel
6 Lear How to Use Form
7 Modal
8 Pagination
Bootstrap 4 Basic Class Work.zip

PSD to CP Shop Project

PSD CP Shop Class Work PSD Project Introduction – CP – Shop

1 – Download Images Icons Fonts and 12 Cols for Bootstrap PSD Theme – CP-Shop Bootstrap Photoshop PSD Web Theme
2 – Bootstrap PSD Theme – Create Navigation bar and Main Home Section – CP-Shop Bootstrap Photoshop PSD Web Theme
3 – Create Feature Thumbnail Title Description and Button – CP-Shop Bootstrap Photoshop PSD Web Theme
4 – Create Feature Thumbnail Title Description Duplicate – CP-Shop Bootstrap Photoshop PSD Web Theme
5 – Create Other Section – CP-Shop Bootstrap Photoshop PSD Web Theme
6 – Footer Section – CP-Shop Bootstrap Photoshop PSD Web Theme
7 – PSD Theme Conclusion – CP-Shop Bootstrap Photoshop PSD Web Theme
8 – my conclusion Part 1 – CP-Shop Bootstrap Photoshop PSD Web Theme
9 – add some extra content and conclude our psd theme – CP-Shop Bootstrap Photoshop PSD Web Theme
10 – How to crerate footer section – CP-Shop Bootstrap Photoshop PSD Web Theme
11 – Footer copyright note – CP-Shop Bootstrap Photoshop PSD Web Theme
12 – Add Contents into footer section in psd ttheme – CP-Shop Bootstrap Photoshop PSD Web Theme

CP Shop Project with source code

Bootstrap 4 Cp Shop Theme Project Finalization and Change Multiple Color Sass
change background colors to our bootstrap 4 cp shop project cards
change image position in the bootstrap 4 section with a project
CP Shop Bootstrap Class Work.zip”
CP Shop PSD File.zip”
CP- Shop Theme setup installation for Bootstrap 4 HTML5 CSS3
Create a Boostrap 4 Card add it in row and col with cp shop project
Create Footer note Copyright section and contact modal in Boostrap 4
Create Header Section
Create Navbar in Bootstrap 4
Design and decorate bootstrap 4 cp shop project with image and beside title
learn how to create a good looking footer section with background fixed image
Learn PSD to Bootstrap 4 – CP Shop Project – Copy
Learn to Create a Bootstrap 4 About Section in cp shop project
Second Column Footer Contact Form
PSD File

PSD Template CP Book

1 – Introduction – PSD CP-Book
2 – Header Section Workflow – PSD CP-Book
3 – Workflow – PSD CP-Book
4 – Header Section – PSD CP-Book
5 – Navbar and Home Section – PSD CP-Book
6 – Feature and About Section – PSD CP-Book
7 – Footer Widgets – PSD CP-Book

CP Book Project Source Code

1 – Use CDN for Bootstrap Coding CP-BOOK Project Boostrap 4 Theme HTML5 CSS3
2 – Nodejs Installation with Bootstrap4 Blank TemplateCP-BOOK Project Boostrap 4 Theme HTML5 CSS3
3 – How to Start NPM for Bootstrap Coding with Nodejs on CMDCP-BOOK Project Boostrap 4 Theme HTML5 CSS3
4 – How to Start NPM for Bootstrap Coding with Nodejs on CMD 2CP-BOOK Project Boostrap 4 Theme HTML5 CSS3
5 – HTML5 Navigation Source Code CP-BOOK Project Boostrap 4 Theme HTML5 CSS3
6 – Create Bootstrap4 Navigation bar with toggle buttonCP-BOOK Project Boostrap 4 Theme HTML5 CSS3
7 – Create Home Page Section in Bootstrap 4 CP-BOOK Project Boostrap 4 Theme HTML5 CSS3
8 – Feature Section Bootstrap Classes Coding CP-BOOK Project Boostrap 4 Theme HTML5 CSS3
9 – About Section in Bootstrap 4CP-BOOK Project Boostrap 4 Theme HTML5 CSS3
9 – Section – CP Book Bootstrap Source Code.rar”
10 – Footer Widget Section in Bootstrap 4CP-BOOK Project Boostrap 4 Theme HTML5 CSS3
CP Book Project in Bootstrap 4
CP-Book – Class Work.zip”
Helping Data.zip”
CP-Book – Class Work”
Helping Data

PSD Template name CP Mobile

CP Mobile PSD File Class Work .zip”
Donwnload Images Icons and Grid System for Bootstrap web PSD Template
Feature Section
Footer Section
Header Section Bootstrap PSD Web Theme
Main Home Section CP-Mobile
Post Section
CP Mobile PSD File”
Data”
NEw”
1 20 11 2019.png”
About Section
CP Mobile Project – PSD Theme
CP mobile PSD Data.zip”

CP Mobie Project in Bootstrap with Source Code

Class Work CP -Mobile BS4.zip”
Desing About Section
Extract Images from PSD Web Template for Photoshop to Bootstrap 4 Conversion
Feature Section
Finalization Design Bootstrap 4
Install npm on command promt for bootstrap 4 coding step by step
Learn How to Create Navbar using classes of Bootstrap 4
Learn how to desing Footer Section
Web Design Cards
Web Design Create Well Looking Landing Page in Bootstrap 4

CP Software Bootstrap Source Code with PSD Template Project

1 – Download Some Important Data for PSD Theme
2 – New and Easy Way to Header Section – CP -Software PSD Theme
3 – 3 Column Feature Cards Section CP -Software PSD Theme
4 – Simple About Section CP -Software PSD Theme
5 – 3 Column Price Section List and Button Header Background- CP -Software PSD Theme
6 – New Looking Form Contact Section -CP -Software PSD Theme
7 – 3 Column Footer Widget Section with main background color- CP -Software PSD Theme
cp software project in photoshop cc
CP Software PSD Data and Class Work.zip

CP Software Class Work Source Code

1 – Install npm on command promt for bootstrap 4 coding step by step- Software Project Boostrap 4
2 – Crop Images from Bootstrap 4 Photoshop Web Theme – Software Project Boostrap 4
3 – Navbar and Header Section with Transparent Layout- Software Project Boostrap 4
Web Design – Learn Web Design from Scratch with Projects
5 – Design an outstanding feature section- Software Project Boostrap 4
6 – Website Design an New About Section- Software Project Boostrap 4
7 – Create and Design BS4 Cards for Price Section and List Order Now Button- Software Project Boostrap 4
8 – Learn Design Contact Form in BS4 Project- Software Project Boostrap 4
9 – New Way to Create and Learn 3 Column Footer Section with Main Links- Software Project Boostrap 4
10 – Final Changes in Projects Bootstrap 4 Theme Conclusion- Software Project Boostrap 4
CP Software Class Work Source Code.zip”
cp software project in bootstrap 4
13 – Section -cp software PSD to Bootstrap Transparent Navbar with Scroll Change into Navbar-Light Background Image overlay – Software Project Boostrap 4

Watch this video on YouTube

UI Design Bootstrap Project with Source Code

0 – Bootstrap 4 User Interface Project 10
1-UI-Design-Bootstrap-4-Project-Introduction-UI-Design-Bootstrap-4-Theme
3-Scroll-Navbar-convert-to-dark-with-background-header-and-fixed-image-theme-colover-overlay-UI-Design-Bootstrap-4-Theme
4 – Learn How to Use Bootstrap Style Using Gulp Sass to for Header Landing Page
5 – Card BS 4 Classes – Add Image Top Card Header Body Footer Add in Row Col
6 – Create Pagination Using Button Group and Perivouse Next With Active Page
7 – Create Login Sign Up and Contact Model Using Links and Button Click to Display
8 – Column Footer Widget with Background Gardient Color
Class Work

Php Basic Introduction

1 Software Installation – Atom Source Code Editor – Google Chrome – Xampp Server
2 My First Php Program – Hello World
3 What is Variable and How to use Variable in Php – Php Syntex – Variable Source Code
4 Php Arthmetics – Multiplication Susbtraction Addition Division – Learn Php Source Code
5 If Else Conditions
6 Php If else Conditions – Learn Php Condition with Source Code – Syntext
7 Php Compiler – How Php Program Runs on Server – How to Check Syntext Error
8 Why we use Loop in Php Programming – Learn Loops in Php
9 For Loop Source Code – How Loop is Work in Php Programming – Basic Syntext
10 While Loop – Learn basic Source Code of While Loop in Php Programming
11 Learn How to use Do While life in Php – Why we use Do While complete explaination
12 Learn Php – Builten Php Function and User Defined Functions in Php with Source Code
13 Array in Php – Basic Use of Array Full defination with Source Code – Php Syntext

Learn MYSQL with Project

What is Database – How to Create Database and DB Table
Create Database and Table using xampp server localhost phpmyadmin
Databse Basic SQL Introduction
How to Create Add Edit Delete Record in Database using PhpMyAdmin
How to Insert Value in Database Table Using Phpmyadmin
SQL – Select Query how to use it – Why we use Select query – Learn MySQL with explaination
SQL – Use Query to create table insert record delete update using phpmyadmin sql option\

Learn Php MySQL with Project from scratch

1- class introduction – Login Sign Up Admin and Member panel CRUD Product Orders and Users- Php 7 MySQL Project
2- class Setup Bootstrap 4 Theme Create Assets Folder and Links to Index File- Php 7 MySQL Project
3- class Download and Setup BS Admin 2 Set links to admin-assets folder- Php 7 MySQL Project
4- class
5- class
6- class install xampp server and download add crud project database files .mp4- Php 7 MySQL Project
7- class Install blank folder to xampp for learning php source code – Php 7 MySQL Project
8- class
9- class
10- class
11- class Display all Database records using php on Web Page on localhost- Php 7 MySQL Project
12- class connect database to php – Php 7 MySQL Project
13- class 11- class Display all Database records using php on Web Page on localhost- Php 7 MySQL Project
14- class learn pagination using php classes- Php 7 MySQL Project
15- class display product detail title date description order now button- Php 7 MySQL Project
16- class Learn Login and Logout sign up – Php 7 MySQL Project
17- class Learn how to sign up and gernerate a user in database record- Php 7 MySQL Project
18- class How to Login on Admin and Member Panel – Php 7 MySQL Project
19- class Learn about Session and Protect page with only active session user can login – Php 7 MySQL Project
21- class Display users product and order in admin control panel- Php 7 MySQL Project
22- class Learn how to admin can able to delete database records on control panel – Php 7 MySQL Project
23- class Learn to Add Product on Admin Control panel- Php 7 MySQL Project
24- class Admin Dashboard – Product Edit all fields and Update all records with id – Php 7 MySQL Project
25- class member can register login order and check detail on member dashboard – Php 7 MySQL Project
26 – final class – conclusion

Watch this video on YouTube

Web Hosting Introduction

1 Domain Name – Sub Domain – Search DomainTyper and Buy Domain
2 Paid Hosting and Free Hosting -Client Area and cPanel
3 Web Hosting -What is Server – Type of Server
4 Type of Hosting – Shared Hosting – WordPress Hosting – Dedicated Server
5 Learn More About Xampp Server
6 Install WordPress in cPanel Using Softaculous App Installer
7 Install WordPress on Local host usring Xampp Server
8 Install Php MySQL Web Application on local host Xampp Server
9 Upload and Install Php MySQL Web Application on Cpanel Hosting
10 Upload and Install Php MySQL Web Application on 000webhost
11 Top Ranked Hosting Providers in The World – Best Hosting Companies
12 Host a Domain to Web Hosting Provider
13 Point Name Server to the Host
14 Point Name Server to Hosting from your hosting provider client area
15 Host your register Domain with name server and Install WordPress CMS

cPanel Introduction

0 – General Info –
1 – Login cPanel -Hosting Cpnale and its Options
2 – Files Section – Learn File Manager All features
3 – cPanel Thumbnailer Scaler and Converter
4 – Disk Usage and Web Disk
5 – Files Setup FTP Account using Filezilla
6 – Backup features – Backup Wizard
7 – Billing and Support
8 – Database features – Database wizzard – PhpMyadmin
9 – SEO Marketing Tools
10 – Domains
11 – Domains Sub Domain
12 – Emails
13 – Email Accounts and managements
14 Softaculous App Installer Features and Use

WordPress CMS Introduction

1 Install WP from cPanel using softiculous Software
2 Dashboard
3 All Post Add New Category Tags option
10 Add New Media and Manage
11 Learn Deference between Pages and Post
12 Add New Page and Publish
13 Learn Comments Pending Approved Spam
14 Reply Comment Approve and Delete Manage All Comments
15 Apearance Themes Install New Theme
16 Install New Theme and Activate it Learn How to Add Demo Contents
17 Download Theme and Upload on Appearance Themes Options
26 Dashboard – Appearance Menus Create Custom Manu add Links Pages Post and Categories
27 Appearance Header
28 Wp Dashboard – Appearance Theme Editor – Edit Php pages
29 Install Plugins Activate deactivate bulk operations
30 Dashboard – What is Plugins in WP
31 Add New Plugin and search and install – Download and Upload Plugins
32 How to use installed plugins
33 Dashboard Users – User Role Subscriber Editor Administrator
34 Dashboard – Add New User