UI/UX Training
UI/UX Training : Step By Step For Beginners
- Overview
- Course Content
- Certificate
- Demo Lecture
- FAQ
UI/UX Overview
Web designing is the process of developing creative, user interactive, elegant and responsive web layouts for users. In this course we teach you about HTML5, CSS3, jQuery, Javascript and Bootstrap. As a web designer you need to develop a responsive and creative website layout that can attract users of website.
Responsive To Learn UI/UX
- Responsive Webdesigns are in trend
- Limited technologies are needed to learn
- Learn in Short Period of Time
- Make Your Own Web Design Templates
Prerequisites To Learn UI/UX
- Online Training
- Weekend Training
- Office Training
- Corporate Training
- One to One Training
- Final Year Project Training
UI/UX Training Includes
- Theory & Practical Session
- Real-time Practice
- Exclusive Materials
- Course Completion Certificate
- Support
UI/UX Training Course Content
Introduction
- UI/UX Introduction
Adobe Photoshop
- Photoshop Interface
- Creating New Document in Photoshop
- Saving Document in Photoshop
- Opening an existing file or document in Photoshop
- Rectangle Tool
- Rounded Rectangle Tool
- Ellipse Tool
- Polygon Tool
- Line Tool
- Custom Shape Tool
- Move Tool
- Alignment
- Type Tool and Character Panel
- Eye Dropper Tool
- Swatches
- Layers
Adobe XD
- Working with type in your XD wireframes
- Rectangles, Circles, Buttons and Rounded corners in Adobe XD
- How to use color in Adobe XD
- Strokes & copy & paste appearance in Adobe XD
- How to add interaction to your prototype in Adobe XD
- Color Inspiration & the eyedropper in XD
- How to create a color palette in Adobe XD
- How to create gradients in Adobe XD
- Plugin - Adding our first Plugin Lorem Ipsum to Adobe XD
- Drawing & editing shapes in Adobe XD
- Strangeness with shapes in Adobe XD
- Learn to draw with the pen tool in Adobe XDv
- Masking & cropping images in Adobe XD
- Free images to use in your XD mockups - Unsplash Pexels Freeimage
- Darkening background images with opacity in XD
- How to make & use components in Adobe XD
- How to share your document with clients & stakeholders & user testers
Figma
- Importing and Exporting Files
- Creating New Document in Photoshop
- The Toolbar
- The Layers and Pages Panel
- The Prototype Panel
- Working with Frames
- Working with Shapes
- Drawing Icons using the Pen Tool
- Working with Text
- Masking Images and Shapes
- Importing Icons and other Graphics
- Working with Color
- Working with Styles
- Setting up Components
- Using Constraints for Responsive Design
Sharing your design
HTML 5
- History of HTML
- What is Tag?
- What is Element?
- HTML Tag vs. Element
- What is Attribute?
- What’s Different in HTML5?
- HTML Tag
- Head Tag
- Title Tag
- Body Tag
- B Tag
- U Tag
- I Tag
- SMALL Tag
- MARK Tag
- DEL Tag
- SUP Tag
- SUB Tag
Tag
- Alternative (ALT) Text
- Resizing an Image
- What is Link?
- Anchor tag
- Text Link
- Image Link
- Opening a Page in a New Tab
- Order list
- Unordered list
- Type Attribute
- Nested List
- Creating table
- All table related Tags & Attributes
- Marquee ---Marquee Tag &its Attributes
Form--Form Tag & its Attribute
Input Tag
HTML Input Types
- Type="text"
- Type="email
- Type="password"
- Type="radio"
- Type="checkbox"
- Type="file"
- Type="number"
- Type="range"
- Type="date"
- Type="color"
- Type="time
The Submit Button
The Reset Button
Text area---Text area>Tag
Select---Select Tag
Option---Option Tag
- Fieldset---Fieldset Tag
- Legend---Legend Tag
CSS
- What is CSS?
- Importance of CSS in Web Development
- Advantages of CSS
- External Style sheet
- Internal Style sheet
- Inline Style sheet
- The Element Selector
- The Id Selector
- The Class Selector
- Comparing ID and CLASS selectors
- Background Color
- Background Image
- Background Repeat
- Background Attachment
- Background Position
- Border Style
- Border Width
- Border Color
- Outline Style
- Outline Color
- Outline Width
- Outline Offset
- Text Color
- Text Alignment
- TextDecoration
- Text Transformation
- Text Indent
- Letter spacing
- Word spacing
- White space
- Line-height
- Font-family
- Font Size
- Font Style
- Font Variant
- Font Weight
- Shadowing
- Setting margin for each side
- Setting margin for all sides
- Setting padding for each side
- Setting padding for all sides
- What is a box model?
- Margin
- Padding
- Border
- Outline
- List Style Type
- List Style Images
- List Style Position
- List Style
- Borders
- Collapsed Borders
- Table Width and Cell Height
- Table Color
- Table Padding
- Text Align
- Vertical Align
- Opacity
- Floating Images
- Relative Positioning
- Absolute Positioning
- Fixed Positioning
- Static Positioning
Bootstrap
- What is Bootstrap and why we use it ?
- Downloading and Using Bootstrap
- Bootstrap Grid System
- Understanding Row and Container Classes
- Understanding Col-XX-Y classes
- Implementing Different Column Layout
- Understanding Offest
- Nested Column Concept
- Clearing Float in Bootstrap
- Decorating Images with Bootstrap
- Responsive Images
- Creating Navigation in Bootstrap in Easy Concept
- Adding Custom Styles to Bootstrap Navigation
- DropDown
- Creating Carousel in Bootstrap
- Creating Modal Dialogue in Bootstrap
Frequently Asked Questions
Are You Providing Weekend Training?
- Yes We Providing Weekend training.
Can you provided certificate after training completion?
- Yes, We will give a Certificate.
Can you adjust timing for my training session ?
- Sure we can adjust training session as per your requirement.
Related Course
