Web Design and Development Course Outline

HTML, CSS, Bootstrap and Responsive Classes

Overview of Web Design & Development
Basics of HTML & CSS
Introduction to Server-Side Programming
Essential Software Setup for Web Design

Installing Visual Studio Code
HTML Elements (h1-h6, bold, strong, subscript, superscript, paragraph, image, etc.)
HTML Attributes (title, src, href, class, target, etc.)

HTML Form Structure with Various Input Elements (Input, Placeholder, Select, Option, Checkbox, Value, File, Type, Reset, Number, Submit, etc.)

HTML Table Structure Using Various Tags: Explore the use of <table>, <thead>, <tbody>, <tfoot>, <tr>, <td>, <th>`, <caption>, <fieldset>, and <legend> tags.
Table Attributes: Understand how to apply `rowspan` and `colspan` attributes to table elements

CSS Properties and Values: Learn how CSS is used to style web pages by setting properties and values.
Methods of Applying CSS: Explore the use of internal, external, and inline CSS, and understand the advantages of each method.
Selectors in CSS: Introduction to ID, class, and tag selectors and their usage in styling elements.
Typography in CSS: Learn to style text with properties like font-size, color, background-color, and text-align.

Typography in CSS: Explore various text styling options, including font-family, font-weight, font-style, text-decoration, text-transform, letter-spacing, line-height, word-spacing, and text-shadow.
Using Google Fonts: Discover how to integrate Google Fonts into your project to enhance typography with custom web fonts.

Integrating FontAwesome: Learn how to include FontAwesome in your project for using a wide range of icons.
Bootstrap CDN: Understand how to use the Bootstrap Content Delivery Network (CDN) to quickly incorporate Bootstrap’s styles and components into your project.
CSS Box Model: Explore the use of `padding`, `margin`, and `border` to control spacing and borders around elements.
Typography with Bootstrap: Discover how Bootstrap’s built-in typography classes can simplify text styling and enhance your project.

Width, height, border-radius, text-shadow, box-shadow, box-sizing, padding, margin, border by bootstrap.
Codepen website usage.
Quick HTML color picker software.

In details about CSS selectors, including ID, class, child, nested, pseudo, and group selectors.

Understanding the CSS Position Property: From basic to advanced applications.
Creating Hover Effect Designs: Techniques for adding interactive hover effects.
Visual Studio Code Features: Explore live server, duplicate line, auto-save, and auto-rename tag functionalities.

CSS list style, dropdown menu, social menu design

before and after pseudo-selectors with hover effects, and incorporating icons with before and after (project-based learning).

Applying CSS transformations such as translate, rotate, skew, and scale, along with transition effects.

Project-based class focused on layout planning using the float property.

Project with bootstrap. Details about bootstrap (container, row, col, nested row, card, form), embed google map

Creating full website with HTML, CSS Raw Coding

Comprehensive guide to HTML5 features and best practices, along with creating a professional project package.

Overview of Bootstrap 5 features and environment setup with expert tips.
Detailed guide on getting started with Bootstrap 5.
Understanding box-sizing and its role in web design.
Using autoprefixer to ensure cross-browser compatibility.
In-depth exploration of Bootstrap’s layout system: Grid and column structure, Responsive grid: how it works and how to implement it.

Bootstrap 5: In-depth exploration of typography, images, helper classes, and utilities.
Comprehensive explanations of tables, cards, forms, and detailed insights into Bootstrap v5 components.

Creating a full website using Bootstrap v5, with detailed explanations of each section.

Display Flex Property, Display with live example, when & why will we use display flex

Overview of responsive CSS and its concepts, including creating responsive media queries. Guide to building a fully responsive website.

Designing a mobile menu using CSS, without JavaScript or jQuery. Bootstrap Responsive CSS

Create a full website

WordPress Classes

Introduction to WordPress, basic concept of Domain and Hosting
Guide to installing WordPress on XAMPP and deploying it on a live server.

Introduction to WordPress Dashboard, Theme, and Plugins in Details

Fundamentals of the Astra theme and the Elementor plugin.

Astra theme and Elementor plugin in details
Elementor Header Footer Builder (Free): Building headers and footers with Elementor’s free version.

Elementor Pro: Custom fonts, custom icons, and theme builder features.

Create a full website using Elementor pro plugin

Xpro Theme Builder For Elementor

WPBakery Page Builder
YellowPencil CSS Editor Plugin

Salient premium theme
VC clipboard plugin
Ultimate VC Addons plugin
WP show more plugin
Smart slider 3 plugin

Create a full website from scratch using WPBakery Page Builder

Divi premium theme and Divi Builder plugin, including free lifetime updates with the license.

Comprehensive overview of the Divi premium theme, including the Divi Supreme plugin, Divi Essential plugin, and Divi Carousel plugin.

Create a complete website from scratch using the Divi Theme and Divi Builder, with a focus on responsive design.

Newspaper/Magazine/blog Website using free and premium theme, WP content copy protection plugin

Detailed exploration of the jNews premium theme,
Using the GTranslate plugin for WordPress translation
Building headers and footers with Elementor Pro.

CSS list style, dropdown menu, social menu design

Requirements for a business or corporate website, featuring the Essential premium theme.

In Details Essential premium theme, Wonder Lightbox Plugin, Slider Revolution premium plugin

Portfolio website requirements, portfolio theme

Create a full portfolio website using premium theme and plugin

Landing page requirements, Phlox pro premium theme

Designing and developing dynamic forms using the Contact Form 7 plugin, Contact Form 7 Database plugin, and Gravity Forms.

Using the Slider Revolution Premium plugin and its addons to create dynamic sliders featuring blog posts and eCommerce products.

In depth domain & various hosting, Bandwidth, FTP, Webmail, Email forwarder, Automatic backup setup with UpdraftPlus plugin, Website manual migration, Migrate Guru Plugin, Duplicator Premium Plugin, All in one wp migration premium plugin, WP Clone plugin

Advance WordPress Wocommerce

Concept of eCommerce Website, Woocommerce plugin, Cart, Checkout, Payment gateways, product type, etc

Introduction to the WoodMart Premium Theme, Overview of the WoodMart theme, and its features
Essential Plugins for eCommerce Functionality
XT Woo Variation Swatches plugin, variations in color, size, and other attributes.

Create a eCommerce website using Woodmart premium theme, eCommerce website mega menu

xStore Premium Theme: Overview of xStore and its features.
Custom Shop Page Design: Tips for creating a unique, brand-aligned shop page.
Custom Product Page Design: Guide to designing personalized, engaging product pages.

YITH Booking Theme & Plugin: Overview of the YITH Booking theme and plugin, focusing on their features for creating a booking and appointment website.
WooCommerce Products Extra Options Plugin: Guide to enhancing booking services with customizable product options using the WooCommerce Products Extra Options plugin.

Create a full eCommerce website from scratch by Woodmart Premium theme

Gravity Forms Premium Plugin Overview: Introduction to Gravity Forms and its capabilities.
Calculation Form: Creating forms for complex calculations.
Payment/Product Form: Setting up forms for payments and product details.
Registration Form: Designing user registration forms.
Guest Post Form: Creating forms for submitting guest posts.
Multi-Step Form: Building multi-step forms for enhanced user experience.
Submission Front-End Display: Configuring front-end display of form submissions using Gravity Forms add-ons.

CrocoBlocks Overview: Introduction to CrocoBlocks tools.
JetMenu: Customizing navigation menus.
JetElements: Adding advanced widgets.
JetTab: Creating tabbed content.
JetPopup & Popup Maker: Designing and managing popups.
JetTricks: Adding animations and effects.

JetSmartFilter: Adding advanced product filtering.
Jet WooBuilder: Customizing WooCommerce product and shop pages.
Jet Product Gallery: Enhancing product image galleries.
Order Tracking: Implementing order tracking features.
Currency Switcher: Adding currency conversion options.

Payment gateway, security, malware injection finding from null themes & plugins or free downloaded files,
WordPress security with wordfence, itheme security, two-step verification

OTP Login: Implementing one-time password login for enhanced security.
Products Export/Import: Managing bulk product data with export and import features.
Crisp Live Chat: Integrating Crisp for live chat support.
To Live Chat: Setting up Tawk.To for live chat interactions.
Advanced Shipping: Configuring advanced shipping options and rules.

Divi Additional Plugins: Enhancing Divi with extra functionality.
Barcode for Products: Adding barcodes to product listings.
Return, Refund & Exchange: Managing return, refund, and exchange policies.
Order Return: Handling product return requests.
Variation Table: Displaying product variations in a table format.
Bulk Discount: Implementing discounts for bulk purchases.
TeraWallet Plugins: Utilizing TeraWallet for wallet and reward features.

Error Details Explanations: Overview of common error types and their meanings.
cPanel Details:
Webmail: Accessing and managing email accounts.
Domain: Managing domain settings.
DNS: Configuring DNS records.
FTP: Setting up and using FTP access.
PHP Version: Checking and updating the PHP version.
WP Debug: Enabling WordPress debugging.
WP Vivid Plugin: Using WP Vivid for backups and migrations.

Setting up email verification for user registrations.
“Buy Now” button for instant purchases.
Adding a quick view feature for product previews.
Integrating social media TikTok, FB feeds.
Configuring push notifications for user engagement.

Products Countdown: Adding countdown timers for product promotions or sales.
Hurry Timer: Implementing urgency timers to boost conversions.
Advanced Comment: Enhancing comment functionality with advanced features.
Voice Comment: Enabling voice recording for comments or feedback.
Custom Fonts: Adding and using custom fonts on your site.
Animated Icon: Using animated icons for visual appeal.
Typing Effect: Creating typing animation effects for dynamic text display.

WP Bakery Header Builder: Customizing headers using WP Bakery’s header builder.
Essential Grid: Creating and managing advanced grid layouts.
The Grid: Designing responsive and customizable grid layouts.
3D Rotating Image Gallery: Implementing a 3D rotating gallery for interactive image displays.

Astra Premium Theme Customization: Overview of customizing the Astra Premium theme.
Astra Addons Pro: Enhancing Astra with additional customization features.
Ultimate Addons Pro for Elementor: Extending Elementor’s capabilities with advanced widgets and design options.
Astra Portfolio: Creating and managing a portfolio with Astra’s portfolio add-ons.
Convert Pro: Utilizing Convert Pro for advanced lead generation and conversion optimization.

Introduction to Learning Management System website
Eduma Premium Theme: Customizing the Eduma theme for a professional LMS website.
LearnPress Premium Plugin: Implementing LearnPress for comprehensive course management and learning features.

Edumall Premium theme & TutorLMS Premium plugin

Ultimate Membership Pro Plugin: Setting up and customizing membership features with the Ultimate Membership Pro plugin

Custom Post, Custom Taxonomy

Custom Post, Custom Taxonomy , Custom Loop, Custom Archive (jetengine)

Dokan Plugin: Setting up and managing a multi-vendor eCommerce website with the Dokan plugin

Setting up and managing a multi-vendor eCommerce website with the WCFM Premium Plugin.

Building and managing a job portal or listing site

Designing and managing a real estate site, featuring property listings, search filters, agent profiles, and property details.

WPML Plugin: Configuring WPML for website translation and multilingual content management.
TranslatePress Plugin: Using TranslatePress to translate and manage website content in multiple languages.

Introduction to Shopify
Shopify setup, themes, and basic store configuration

Customizing themes
Adding products, and collections

Shopify Apps, integrations

Shopify Page builder 1

Shopify Page builder 2

On-page SEO (title tags, meta descriptions, headers).
SEO-friendly URLs.
Structured data and schema markup.
Mobile-first indexing.
Using SEO plugins in WordPress (Yoast SEO, Rank Math).

Image optimization techniques.
Minification of CSS, JS, and HTML files.
Lazy loading of images and videos.
Caching strategies.
Using tools like Google Lighthouse to assess and improve performance.

Marketplace Classes

What is Freelancing Marketplace?
Why Fiverr Marketplace?
Pros & Cons of Fiverr Marketplace.

Fiverr Profile Creation
Fiverr Profile Setup
Fiverr Free Course Enroll
Fiverr Skills Test

Create a eCommerce website using Woodmart premium theme, eCommerce website mega menu

Gig Research
Gig Image Creation
Gig pdf Creation
Gig Image SEO
Gig Image tips & tricks

Gig Upload to profile
Gig Activity Check
Install Extension for Fiverr
Desktop / Laptop Setup for Fiverr
Gig Favorite

Buyer Request
Client Communication
Custom order
Order Delivery
Late Order Management

Overview of Upwork
Setting Up Your Upwork Profile

How to start gig marketing
Twitter Marketing
Linkedin Marketing
Instagram Marketing
Facebook Marketing

Outreach and Email Marketing