WordPress UI Web Design Crash Course

(i) Introduction to Web Servers
(ii) Setting up a WordPress environment on your computer
(iii) Installing WordPress cms on a local server
(iv) Installing WordPress cms on pantheon server
Free Class Link: Click Here
Small Task: Install WordPress on a Pantheon Server

(i) Overview of WordPress cms
(ii) Introduction to the wordpress dashboard
(iii) Exploring wordpress settings options
(iv) Understanding wordpress themes and plugins
➥ Free Class: Click Here

(i) Understanding free and paid themes
(ii) Introduction to wordpress page builders
(iii) What is elementor builder?
(iv) The power of elementor page builder

(i) Elementor Builder Settings
(ii) Overview of Elementor Widgets
(iii) Understanding Website Grid Layout ("Row" + "Column" + "Content Area")
(iv) Designing a Section with Elementor

Assignment-01:
➥ Project Name: Design a basic 5-7 section web page using Elementor Builder.
➥ Sample: Link to Demo

(i) Designing the Global Header & Footer for Websites
(ii) Understanding the Basics of Website Responsive Grid

Exploring Different Types of Menus:
- Simple Menu
- Scrolling Menu
- Drop-Down Menu
- Mega Menu

Small Task:
➥ Design a Complete Landing Page with Global Header and Footer
➥ Demo: https://shorturl.at/rL457

(i) Design a portfolio website homepage
(ii) Create a mobile-responsive full web page
(iii) Develop a scrolling menu 1-page website

Assignment 02:
➥ Project Name: Design a one page prtdonal portfolio website
➥ Sample: Personal portfolio demo

(i) Create a 5-Page Website
Pages to Include:
01. Home
02. About Us
03. Services
04. Portfolio
05. Contact Us

➥ Small Task: Design a Fully Responsive 5-Page Website Using Elementor Page Builder
➥ Sample: N/A

(i) Elementor Design Settings
(ii) Elementor Custom Fonts
(iii) Introduction to Global Typography
(iv) Designing a Landing Page with Consistent Global Typography

Assignment 03:
➥ Project Name: Create a Responsive Landing Page while Maintaining Global Typography.
➥ Sample: N/A

(i) What is a Premium Live Server?
An introduction to premium live servers and their benefits in web hosting.

(ii) Internationally Trusted Domain and Hosting Providers:
Overview of reputable, global domain registration and hosting service providers.

(iii) Understanding WHOIS and ICANN:
A comprehensive understanding of the WHOIS database and the role of ICANN in domain name management.

(iv) Purchasing a Live Domain from Namecheap Using a Dual Currency Card:
Step-by-step guide to purchasing a domain from Namecheap with a dual currency payment method.

(v) SSL Certificates and cPanel Overview:
Introduction to SSL certificates for website security and a walkthrough of cPanel hosting management.

(i) Shared Hosting:
Cost-effective hosting solution where multiple websites share the same server resources.

(ii) VPS Hosting (Virtual Private Server):
More powerful hosting solution that offers dedicated resources within a shared server environment.

(iii) BDIX Server:
Local Bangladesh Internet Exchange server offering faster data transfer within Bangladesh.

(iv) AWS Server (Amazon Web Services):
Flexible, scalable cloud hosting solution provided by Amazon, suitable for businesses of all sizes.

(v) DigitalOcean:
Cloud hosting platform that offers scalable and easy-to-use cloud computing services, ideal for developers, startups, and businesses needing virtual private servers.

(vi) Dedicated Server:
A physical server dedicated entirely to one client, offering full control and maximum performance.

(vii) Reseller Hosting:
A hosting solution where a user can sell hosting services to others by renting server space.

(i) What is a Hosting Control Panel?
Introduction to the role and functionality of a hosting control panel in managing web hosting services.

(ii) Overview of cPanel:
Detailed exploration of cPanel, the most widely used control panel for web hosting management.

(iii) Connecting Domain and Hosting Using Name Servers:
Step-by-step guide on how to link your domain with hosting through the configuration of name servers.

(iv) What is Cloudflare?
Understanding Cloudflare and how it enhances website performance, security, and reliability.

(v) Addon Domains and Subdomains:
Explanation of addon domains and subdomains and how they allow the management of multiple websites under a single hosting account.

(vi) What is Corporate or Business Email?
The importance of corporate/business email addresses for professional communication and branding.

(v) How to Update PHP Version?
A guide on how to update the PHP version in your hosting environment to ensure compatibility with websites and applications.

(vi) Accessing and Managing Files and Databases:
How to access and control website files and databases via the hosting control panel.

(vii) Uploading Themes and Plugins Manually:
A walkthrough of how to manually upload themes and plugins to your website via file directory management.

Main Content of UI/UX:
01. Key features and why it's popular for UI/UX design
02. Understanding WordPres CMS, themes, and plugins based on Figma
03. Understanding the workflow: From Figma designs to a live WordPress site
04. Setting up your Figma workspace
05. Exploring design tools: Frames, components, grids, and guides
06. Designing responsive layouts in Figma
07. Conducting research and wireframing in Figma
08. Building reusable components and design systems
09. Prototyping and testing user flows
10. Exporting assets: Images, SVGs, and fonts

Resource:
➥ Project Sample: Project-01
➥ Project Sample: Project-02

Assignment-04: Design and Build: A Figma to WordPress Journey
Support: 12 Hours Live Support Session

Main Content of UI/UX:
01. Brief overview of Figma as a design tool
02. Organizing the Figma file for development: Layers, groups, and components
03. Basic concept of pre-designed Figma portfolio template

Resource File:
01. Figma File: Figma Template

Assignment-05: Convert a Figma Portfolio Design to a WordPress Website
Support: 12 Hours Live Support Session

Main Content of UI/UX:
01. Details Information about of elementor adons
02. Figma to WordPress live convert

Resource File:
01. Figma File: Figma Template

Assignment-06: Convert a Figma to WordPress Website
Support: 12 Hours Live Support Session

Introduction Addons:
01. Elementor Addons and Kits
02. Overview of Elementor and its features
03. What are Addons and Template Kits?
04. Finding and choosing the right addons
05. Exploring Popular Elementor Addons

Popular Addons:
01. Essential Addons for Elementor - (widgets: 90+)
02. Premium Addons for Elementor - (widgets: 55+)
03. ElementsKit - (widgets: 85+)
04. Unlimited Elements for Elementor - (widgets: 100+)
05. Happy Addons - (widgets: 40+)
06. PowerPack Lite for Elementor
07. Master Addons for Elementor
08. Powerpack

WordPress Website in 2 Hours:
01. Set Up Your WordPress Site
02. Install Elementor & Elementor Addons
03. Import a Ready-Made Template
04. Customize the Template
05. Add Key Website Pages
06. Configure Website Settings
07. Add Functionality with Plugins
08. Preview and Publish

(i) Introduction to WordPress Astra theme:
– What is Astra?
– Key features of Astra free theme
– Why choose Astra for WordPress website development?
– How Astra compares with other themes

(ii) Installing and activating Astra free theme:
– Step-by-step guide to installing Astra on WordPress
– How to activate Astra theme from the WordPress dashboard
– Checking compatibility with plugins and WordPress version

(iii) Overview of Astra theme customizer:
– Introduction to WordPress customizer
– Navigating the Astra customizer settings
– Understanding the customization options available in the free version

(iv) Customizing the header section:
– How to modify the logo and site title
– Changing the header layout (e.g., centered, inline, etc.)
– Configuring the navigation menu and adding a search bar
– Adjusting header colors, typography, and layout

(v) Customizing the homepage layout:
– Customizing the homepage settings in WordPress
– How to choose and set the homepage layout using Astra’s options
– Enabling or disabling page builder compatibility (Elementor, Gutenberg)

(vi) Customizing the typography and colors:
– How to modify site fonts using Astra’s typography settings
– Customizing color schemes to match your brand
– How to use Astra’s color palettes or create your own

(vii) Working with Astra’s layout options:
– How to adjust the content width, page layout, and sidebar settings
– Changing the layout of individual posts and pages
– Enabling or disabling page elements like sidebars and footers

(viii) Customizing the footer section:
– How to change the footer layout and add footer widgets
– Customizing footer text, colors, and typography
– Adding copyright and other information in the footer

(ix) Customizing blog and archive pages:
– How to modify the appearance of blog and archive pages
– Adjusting the number of posts per page and post layout
– Configuring post meta settings (author, date, categories)

(x) Using Astra hooks and widgets:
– Introduction to Astra’s hooks and their role in theme customization
– How to use Astra widgets to add additional content to the site
– Creating custom widget areas for more flexibility

(xi) Enhancing website performance:
– Astra lightweight design and its impact on website speed
– Optimizing images and content for faster loading times
– Leveraging Astra’s built-in performance features for SEO

(xii) Publishing and final adjustments:
– Previewing the website before going live
– Final tips on maintaining a clean and responsive design
– Publishing and making the website live

Assignment 07:
➥ Project name: Design a digital marketing website using Astra free theme
➥ Sample: N/A

In this class, we will focus on designing a sleek, modern, and user-friendly website for a software company using the Onum premium WordPress theme. You will learn how to leverage the features and customization options offered by the Onum theme to create a responsive, professional website.

Key Learning Outcomes:
01. Understanding the Onum theme features and capabilities.
02. Customizing the theme to fit the branding and requirements of a software company.
03. Implementing a responsive design for a seamless experience on various devices.
04. Adding essential pages such as Home, About, Services, and Contact using the theme’s pre-built templates.
05. Integrating plugins for enhanced functionality (e.g., contact forms, SEO optimization).
06. Best practices for optimizing website performance and usability.

Assignment-10: Designing a Software Company Website Using the Onum Premium Theme
Support Session: www.codexinfo.technology/support-session

Note: This class will help you develop the skills needed to create a polished, fully functional website for a software business, combining design aesthetics with practical usability.

Class Topic:
01. Understanding premium WordPress themes, features and benefits
02. Exploring the Envato marketplace WordPress themes
03. How to choose the right WordPress theme for your project
04. Customizing premium WordPress themes for unique websites
05. Licensing and best practices for using themes from Envato
06. Popular theme frameworks and builders on Envato
07. Integrating plugins with premium WordPress themes
08. Tips for evaluating WordPress theme demos and reviews
09. Building professional websites using Envato's WordPress themes

Resources: 
01. Envato Marketplace: https://elements.envato.com/
02. GPL Version Premium Theme: PluginsTheme

Support Session: www.codexinfo.technology/support-session

Class Topic:
01. Introduction to Newscard theme
02. Installing and activating the theme
03. Exploring the demo layout and design possibilities
04. Customizing the website design
05. Navigating the Newscard customizer options
06. Setting up the homepage layout (magazine-style grid, headlines, etc.)
07. Configuring colors, typography, and background settings
08. Adding and organizing content
09. Optimizing for performance and SEO
10. Finalizing and launching the website

Assignment-08:
➥ Project Name: Design a fully functional newspaper website using the NewsCard free theme.
➥ Requirements: Include at least 3 categories, 5 sample posts, and a custom homepage design.

Crocoblock & Jet Plugin:
01. What makes Jet Plugins unique for Elementor?
02. Overview of Crocoblock and its ecosystem
03. Installation and Setup of Jet Plugins
04. Overview of the Crocoblock Dashboard

Exploring Key Jet Plugins:
01. JetElements: Adding advanced widgets like pricing tables, sliders, and countdowns
02. JetEngine: Building dynamic content, custom post types, and meta fields
03. JetSmartFilters: Creating advanced filtering for posts, products, and custom content
04. JetBooking: Implementing booking functionality for businesses
05. JetPopup: Designing custom popups with advanced triggers and effects

Practical Examples Using Jet Plugins:
01. Creating a dynamic real estate listing with JetEngine and JetSmartFilters
02. Building an interactive pricing table using JetElements
03. Implementing a booking system for appointments with JetBooking
04. Using JetStyleManager for granular design control
05. Best practices for plugin configuration and resource management

• Introduction to Landing Pages

  • What is a landing page?

  • Difference between home page and landing page

  • Purpose of a sales landing page

• Structure of a High-Converting Sales Page

  • Attention-grabbing headline

  • Strong subheading

  • Product benefits and features

  • Social proof (testimonials, logos)

  • Call-to-action (CTA) strategies

  • Scarcity and urgency (e.g., limited time offers)

  • FAQ and objection handling

• Designing the Page with Elementor

  • Choosing a clean layout template

  • Using Elementor sections and widgets

  • Adding call-to-action buttons

  • Embedding videos/images effectively

  • Styling and spacing for readability

Class Topic:
01. Understanding Marketing-Centric Website Design
02. Defining Target Audiences and Goals
03. Best practices for designing high-conversion landing pages
04. Placing CTAs (Call-to-Actions) effectively
05. SEO-Friendly Website Structure
- How to structure your website for better search engine visibility
- Optimizing on-page SEO elements (meta tags, headings, etc.)
06. Enhancing User Experience (UX)
07. Integrating Marketing Tools
- Adding analytics tools (Google Analytics, Facebook Pixel)
- Embedding email capture forms, chatbots, and social media links
08. Testing and Optimizing the Website for Marketing Goals
- A/B testing different layouts or CTAs
- Gathering and analyzing user feedback

Assignment-12: Design and Develop a Marketing-Optimized Website for a Product or Service
Objective: To design and build a website that aligns with marketing strategies to attract, engage, and convert visitors into customers.

Assignment Concept:
01. Research and Planning
02. Website Design
03. SEO and Content Optimization
04. Integration of Marketing Tools
05. Testing and Refinement
06. Submission

Support Session: www.codexinfo.technology/support-session

Key Concepts:
01. Introduction to Website Speed and SEO
02. Using WP Rocket for Speed Optimization
03. Installing and configuring WP Rocket to improve test site performance
03. Introduction to Other Speed Optimization Plugins
i. W3 Total Cache
ii. Autoptimize
iii. LiteSpeed Cache

04. Optimizing Images for Faster Load Times
05. Minification and Combining Files Reducing CSS, JavaScript, and HTML file sizes to enhance loading times
06. Leveraging Browser Caching, How to use caching to speed up repeat visits.
07. Mobile Optimization for Speed, Ensuring fast performance on mobile devices.