One Stop solutions for your career
UI/UX Designer
Course Code : TCP-UI/UX
Course Code : TCP-UI/UX
Overview
Join TCP India and become a skilled UI/UX Designer! Our comprehensive curriculum covers the full Software Development Life Cycle, from planning to maintenance. In Figma, you'll unleash creativity and design captivating interfaces. Master HTML, CSS, Bootstrap, JS, and jQuery. Dive into React JS, Node.js, and MongoDB. Learn to collaborate with developers and integrate your designs using Figma. Explore CSS, Bootstrap, and JavaScript frameworks to build responsive websites. Gain hands-on experience in project management using Jira and version control with Git. Get ready to showcase your skills and excel in web development! Join us now and shape a promising future!
UI (User Interface) and UX (User Experience) are crucial elements in the design and development of digital products, such as websites, mobile apps, and software applications. While UI focuses on the visual and interactive aspects of a product, UX encompasses the overall experience and satisfaction of the user while interacting with the product.
UI design involves creating visually appealing and intuitive interfaces that enable users to interact with the product effectively. It includes elements such as layout, typography, color schemes, icons, and other visual components. The goal of UI design is to make the interface aesthetically pleasing, consistent, and easy to understand, with a focus on enhancing usability and navigation.
Curriculam
- SDLC Introduction
- SDLC Phase
- Requirement Gathering or Planning
- SRS (Software Requirement Specification)
- Design
- Implementation & Coding
- Testing
- Deployment
- Maintenance
- SDLC Models
- Waterfall Model
- V-Shaped Model
- Prototype Model
- Spiral Model
- Iterative Incremental Model
- Big Bang Model
- Agile Model
- Introduction to Figma
- Overview of Figma and its features
- Understanding the benefits of cloud-based design tools
- Setting up a Figma account and workspace
- Figma Interface and Tools
- Familiarizing yourself with the Figma interface
- Understanding the different tools and panels in Figma
- Navigating the layers, artboards, and frames
- Designing in Figma
- Creating and organizing design assets in Figma
- Working with shapes, text, and images
- Using grids and guides for layout design
- Design Components and Styles
- Creating and managing design components in Figma
- Applying and updating styles for consistent design elements
- Exploring variants and interactive components
- Collaborative Design in Figma
- Understanding collaboration features in Figma
- Real-time collaboration with team members
- Commenting, reviewing, and resolving feedback in Figma
- Prototyping in Figma
- Creating interactive prototypes in Figma
- Defining interactions, hotspots, and transitions
- Previewing and sharing prototypes with stakeholders
- Design Systems in Figma
- Introduction to design systems and their benefits
- Setting up and maintaining design systems in Figma
- Documenting design guidelines and components
- Advanced Techniques and Plugins
- Exploring advanced techniques in Figma
- Leveraging plugins to extend Figma's functionality
- Automating repetitive tasks with plugins
- Collaboration with Developers
- Handing off designs to developers using Figma
- Using developer-friendly features like inspect mode and code snippets
- Collaborating effectively with developers during the handoff process
- Integrations and Workflow Enhancements
- Integrating Figma with other design and development tools
- Streamlining workflows with third-party integrations
- Exploring design handoff and version control solutions
- Responsive Design in Figma
- Designing for responsive layouts in Figma
- Using constraints and auto layout to create adaptive designs
- Testing and previewing responsive designs in Figma
- Portfolio Showcase and Presentation
- Building a design portfolio using Figma projects
- Showcasing your Figma skills in portfolio presentations
- Incorporating Figma prototypes and design assets in your portfolio
- Getting Acquainted with HTML
- Introduction to the Internet
- Introduction to HTML Terminology
- Options for Writing HTML
- Unicode Transformation Format (UTF)
- HTML5 Resources
- New for HTML5
- What’s Different in HTML5?
- <!DOCTYPE> in HTML5
- Designing a Webpage
- Design Considerations and Planning
- Basic Tags and Document Structure
- HTML Tags
- Head Tags
- Title Tags
- Body Tags
- Metadata
- Saving an HTML Page
- Page Formatting
- Adding a New Paragraph
- Adding a Line Break
- Inserting Blank Space
- Preformatted Text
- Changing a Page’s Background Color
- Div Element
- Text Items and Objects
- Headings
- Comments
- Block Quotes
- Horizontal Lines
- Special Characters
- Creating Lists
- Numbered (Ordered) Lists
- Bulleted (Unordered) Lists
- Nested Lists
- Definition Lists
- Links
- What are Links?
- Text Links
- Image Links
- Opening a Page in a New Window or Tab
- Setting all Links on a Page to Open in a New Window or Tab
- Linking to an Area on the Same Page (Bookmarks)
- Linking to an E-mail Address
- Linking to Other Types of Files
- Images
- Introduction to Images for Webpages
- Adding Images to Webpages
- Resizing an Image
- Alternative (ALT) Text
- Image Labels
- Basic Tables
- Inserting a Table
- Table Borders
- Table Headers
- IFrames
- What is an Iframe?
- Inserting Iframes
- Setting Height and Width
- Using an Iframe for a link target
- Forms
- About Forms
- Sending to E-mail
- Text Boxes
- Text Areas
- Check Boxes
- Menu Lists
- Radio Buttons
- The Submit Button
- The Reset Button
- Changing the Tab Order
- Video and Audio
- About Video and Audio Files
- Linking to Video and Audio Files
- Adding Video
- Adding Audio
- Using YouTube to Display Video
- Troubleshooting
- Cascading Style Sheets
- What are Cascading Style Sheets?
- CSS Syntax
- Creating an External CSS
- Linking to a CSS
- Adding Comments and Notes to a CSS
- Creating an Internal Style Sheet
- ID and Class
- Inline Styling
- Working With Text in CSS
- Emphasizing Text (Bold and Italic)
- Decoration
- Indentation
- Transformation
- Text Alignment
- Fonts
- Font Sizes
- Letter Spacing (Kerning)
- Line Spacing (Leading)
- Text Color
- Margins
- Padding
- Borders
- Styling Links
- Number and Bullet Styles
- Sizing Elements
- Text Wrapping
- Shadowing
- Creating Backgrounds in CSS
- Colors
- Images
- Fixed Images
- Images in CSS
- Opacity
- Floating Images
- Image Galleries
- Image Sprites
- Box Model in CSS
- What is a box model?
- Margin
- Padding
- Border
- Outline
- Working With Elements in CSS
- Display and Visibility
- Grouping and Nesting
- Dimensions of Elements
- Positioning
- Floating
- Pseudo-Classes/Pseudo-Elements
- Adding a Navigation Bar in CSS
- Vertical Navigation Bar
- Horizontal Navigation Bar – Inline
- Horizontal Navigation Bar – Floating
- CSS Tables
- Borders
- Collapsed Borders
- Table Width and Cell Height
- Table Color
- Table Text Element
- Table Padding
- Working With Transforms in CSS
- What are Transforms?
- 2D Transforms
- 3D Transforms
- Transitions and Animations in CSS
- Transitions
- Animations
- CSS Shorthand
- Shorthand Properties
- Introduction to Bootstrap
- Overview of Bootstrap and its features
- Understanding the benefits of using a front-end framework
- Setting up a Bootstrap project and integrating it into a web development workflow
- Bootstrap Grid System
- Understanding the grid system in Bootstrap
- Creating responsive layouts using rows and columns
- Implementing different column sizes and breakpoints
- Bootstrap Components
- Exploring the pre-built UI components in Bootstrap
- Using navigation bars, buttons, forms, and cards
- Customizing and styling Bootstrap components
- Responsive Design with Bootstrap
- Designing responsive websites with Bootstrap
- Implementing responsive images, videos, and typography
- Utilizing Bootstrap's responsive utility classes
- Bootstrap CSS Classes and Helpers
- Understanding the various CSS classes and helper classes in Bootstrap
- Applying styling and layout classes to HTML elements
- Using utility classes for common tasks and quick prototyping
- Bootstrap JavaScript Components
- Introduction to Bootstrap's JavaScript components
- Implementing features like modals, carousels, and tooltips
- Customizing and enhancing Bootstrap components with JavaScript
- Customizing Bootstrap
- Customizing the Bootstrap framework to match project requirements
- Modifying Bootstrap variables, styles, and components
- Creating custom themes and stylesheets
- Bootstrap and Accessibility
- Ensuring accessibility in Bootstrap projects
- Using proper HTML semantics and ARIA attributes
- Testing for accessibility and addressing common accessibility issues
- Bootstrap and Sass
- Introduction to Sass (Syntactically Awesome Style Sheets)
- Integrating Sass with Bootstrap for enhanced CSS authoring
- Utilizing Sass features like variables, mixins, and nesting in Bootstrap projects
- Bootstrap and Build Tools
- Integrating Bootstrap with build tools like Gulp or Webpack
- Automating tasks such as compiling Sass, minifying CSS, and optimizing assets
- Streamlining the development and deployment process
- Bootstrap and CSS Frameworks
- Exploring other CSS frameworks and their features
- Comparing and contrasting Bootstrap with alternative frameworks
- Incorporating other frameworks with Bootstrap for extended functionality
- Project Showcase and Deployment
- Building a complete website or web application using Bootstrap
- Showcasing the project and its responsive design
- Deploying the Bootstrap project to a web server or hosting platform
- Introduction to JavaScript
- Overview of JavaScript and its role in web development
- Embedding JavaScript in HTML documents
- Basic syntax and structure of JavaScript code
- Variables and Data Types
- Declaring and assigning variables
- Understanding primitive and complex data types
- Type coercion and type conversion
- Operators and Expressions
- Arithmetic, assignment, comparison, and logical operators
- Working with expressions and operator precedence
- Control Flow and Conditional Statements
- Conditional statements: if...else, switch
- Loops: for, while, do...while
- Breaking and continuing loops
- Functions
- Declaring and invoking functions
- Function parameters and return values
- Function expressions and arrow functions
- Arrays
- Creating and manipulating arrays
- Array methods: push, pop, shift, unshift, splice, etc.
- Iterating over arrays: for loop, forEach, map, filter, reduce
- Objects
- Creating and working with objects
- Object properties and methods
- Object-oriented concepts: encapsulation, inheritance, polymorphism
- Scope and Closures
- Understanding variable scope: global and local scope
- Lexical scoping and closures
- Immediately Invoked Function Expressions (IIFE)
- Error Handling and Debugging
- Handling errors with try...catch statements
- Debugging techniques: console.log, breakpoints, step-through debugging
- Common debugging tools and techniques
- DOM Manipulation
- Introduction to the Document Object Model (DOM)
- Selecting and manipulating HTML elements
- Modifying styles, attributes, and content dynamically
- Events and Event Handling
- Understanding events and event-driven programming
- Handling events with event listeners
- Event propagation and delegation
- Asynchronous JavaScript
- Introduction to asynchronous programming
- Callback functions and the callback pattern
- Promises and async/await for handling asynchronous operations
- JSON and APIs
- Working with JSON data
- Fetching data from APIs using JavaScript
- Consuming API responses and updating the DOM dynamically
- Introduction to ES6+
- Overview of ES6 (ECMAScript 2015) features and enhancements
- Arrow functions, template literals, destructuring, and spread syntax
- Modules and module bundlers like webpack
- Jira
Introduction to Jira
Creating and Managing Projects
Managing Issues
Agile Boards and Workflows
Managing Releases and Versions
Collaboration and Communication
Advanced Jira Configuration
Reporting and Dashboards
Jira Automation and Integrations
Best Practices and Advanced Topics
Project Work
- Git
- Overview
- Installtion Envirement
- Git Basics
- Working with Repositories
- Branching and Merging
- Collaborative Workflows
- Advanced Git Operations
- Git Best Practices
- AWS Server
Compute Services:
- Amazon Elastic Compute Cloud (EC2)
- AWS Lambda
Storage Services:
- Amazon Simple Storage Service (S3)
- Amazon Elastic Block Store (EBS)
Networking Services:
- Amazon Virtual Private Cloud (VPC)
- AWS Direct Connect
- Amazon Route 53
- AWS Global Accelerator
Developer Tools:
- AWS CodeStar
- AWS CodeCommit
- AWS CodePipeline
- AWS CodeDeploy
Serverless Computing:
- AWS Lambda
- AWS Step Functions
- Amazon API Gateway
- Amazon EventBridge
