Advance Web-Development

1-on-1 Counseling Session on Design Career Growth + UI/UX Design Bonus Session

Bonus:

Masterclass Overview

This masterclass is designed for individuals, teams, and professionals who want to master logo design, brand guidelines, and full-scale branding for businesses. Whether you're a freelancer, a creative professional, or a startup looking to enhance your team's skills, this training will equip you with the knowledge to create impactful brand identities.

By the end of this masterclass, you and your team will have the expertise to design logos from scratch, create brand guidelines, and build complete branding solutions for clients or your business.

Week 1:

Modern JavaScript (ES6+) Essentials

Topics:

• let, const, arrow functions, template literals

• Destructuring, spread/rest operators

• Modules and import/export

• Callback functions and Promises
  
  

Activities:

• Rewrite ES5 code to ES6

• Build a small async image loader
  
  

Assessment:
ES6 refactor task + quiz

────────────────────────────────────────────────────────────────────────────────────────

Week 2:

Advanced JavaScript Concepts

Topics:

• Closures, scope, and hoisting

• The "this" keyword and binding

• Prototypes and inheritance

• Async/Await and fetch API
  
  

Activities:

• Build a mini weather app using fetch API

• Debug scope-related errors
  
  

Assessment:
Complete a mini project using async/await and DOM manipulation

────────────────────────────────────────────────────────────────────────────────────────

Week 3:

DOM Manipulation and Events

Topics:

• Selecting and modifying DOM elements

• Event delegation and bubbling

• Form validation and custom messages

• Using localStorage/sessionStorage
  
  

Activities:

• Build a form with validation

• Store and retrieve data from localStorage
  
  

Assessment:
Create a functional to-do list app with data persistence

────────────────────────────────────────────────────────────────────────────────────────

Week 4:

Introduction to Frontend Frameworks (React Basics)

Topics:

• Why use a frontend framework?

• Setting up a React app (Vite or CRA)

• JSX, components, props, and state

• Handling events and conditional rendering
  
  

Activities:

• Build a simple counter app in React

• Create a reusable Button component
  
  

Assessment:
Build a multi-component React UI (e.g., profile card layout)

────────────────────────────────────────────────────────────────────────────────────────

Week 5:

Routing and State Management in React

Topics:

• React Router DOM (routes, links, nested routes)

• useState and useEffect deep dive

• Lifting state and passing props

• Introduction to Context API
  
  

Activities:

• Build a multi-page React app

• Implement global state with Context API
  
  

Assessment:
Create a small blog or notes app with routing and context

────────────────────────────────────────────────────────────────────────────────────────

Week 6:

Backend Integration (APIs & CRUD with Node.js/Express)

Topics:

• Intro to REST APIs

• Setting up a backend with Node.js and Express

• CRUD operations with Express

• Connecting frontend to backend
  
  

Activities:

• Build an API for a blog or task manager

• Connect React frontend to Express backend
  
  

Assessment:
Submit full-stack CRUD app (tasks, users, or notes)

────────────────────────────────────────────────────────────────────────────────────────

Week 7:

Database Integration (MongoDB or Firebase)

Topics:

• NoSQL database basics (MongoDB or Firebase)

• Connecting to MongoDB with Mongoose OR Firebase SDK

• Performing CRUD operations

• Environment variables and deployment prep
  
  

Activities:

• Store and retrieve data from the database

• Implement user data persistence in full-stack app
  
  

Assessment:
Submit updated app with database integration

────────────────────────────────────────────────────────────────────────────────────────

Week 8:

Deployment & Final Project

Topics:

• Building and optimizing for production

• Deployment using Vercel, Netlify, or Render

• Connecting frontend, backend, and database

• Git & GitHub for version control
  
  

Activities:

• Deploy the full-stack app

• Prepare GitHub README and documentation
  
  

Assessment:
Final project presentation: Full-stack deployed application
Code review + Q&A

Who Should Attend?

• Graphic designers & UI/UX designers

• Marketing teams & branding professionals

• Freelancers & agencies working on client branding projects

• Startups & business owners looking to create a strong brand

• Teams that need in-depth training for handling branding clients

Key Learning Outcomes

✅ Create professional logos from sketch to digital execution
✅ Understand how to merge elements into a single iconic logo
✅ Learn from real-world brand guidelines and case studies
✅ Develop brand guidelines for businesses and client projects
✅ Build and present a full brand identity package
✅ Train your team to work on professional branding projects

Training Modes:

• In-Person Training: CreatExc Office, 82/S Block 1st Floor, Imperial Garden Paragon City Lahore

• Online Training: Live interactive sessions with hands-on exercises

Tools & Requirements:

• Sketchbook & pencil (for initial sketches)

• Laptop with Adobe Illustrator, Photoshop, or Figma installed

• Stable internet connection (for online participants)

Apply Now for the Branding & Identity Design Masterclass!

Fill out the form with your basic info, experience, skills, and goals to join this hands-on training led by Afzaal Shafi. Whether you're a student, professional, or agency—this is your chance to master logo design and branding!

Office Phone

+92 423 719 38 20

Email

learn@afzaalshafi.com

Mobile/ WhatsApp Number

+92 322 4024 862

Address

82/S Imperial Garden, Paragon City Barki Road Lahore