Figma HTML CSS JavaScript in Web Design and UI UX Design

سرفصل های دوره

Responsive design in Figma HTML CSS Bootstrap combined with user interface design and user experience design principles

01 - Figma Fundamentals

001 Download Figma Fundamentals File.html

001 figma-fundamentals.zip

002 Important Figma UI 3 Update.html

003 Figma dashboard view

004 Figma project overview

005 Figma thumbnail & community file

005 boroji-figma-profile-handle.zip

006 Figma design file overview

007 Figma essential shortcuts

008 Figma basic shape tool

009 Figma basic text tool

010 Figma shapes part 2

011 Figma layer hierarchy

012 Figma align & group

013 Figma group layer navigation

014 Figma layer selection

015 Run Figma plugins

015 automater.zip

015 sort-layers.zip

016 Figma rename function

017 Figma regular expression renaming

018 Figma text plugins part 1

018 add-numbers-to-texts.zip

018 change-text.zip

018 reverse-layer-order.zip

019 Figma text plugins part 2

019 lorem-ipsum.zip

019 many-paster.zip

019 max-line-length.zip

019 text-counts.zip

019 text-cutter.zip

020 Frame vs groups in Figma

021 Frame and constraints in Figma

022 Images and constraints in Figma

022 unsplash.zip

023 Video and images in Figma

024 Videos and prototype overview in Figma

025 Image properties in Figma

026 Stroke properties in Figma

027 Gradient properties in Figma

028 Effect properties in Figma

029 Mask property in Figma

030 Figma layout grid part 1

031 Figma layout grid part 2

032 Figma prototype part 1

033 Figma prototype part 2

034 Figma prototype interactions

035 Figma smart animate

036 Find and replace in Figma

external-links.txt

02 - Figma Auto Layout

001 Download Figma Auto Layout File.html

001 figma-auto-layout.zip

002 Important Figma UI 3 Update.html

003 Figma auto layout hug property

004 Figma auto layout fixed property

005 Figma auto layout fill property

006 Figma padding & spacing part 1

007 Figma padding & spacing part 2

008 Figma auto layout directions

009 Figma auto layout wrap

010 Figma canvas stacking & negative spacing

011 Figma smart animate & negative spacing

012 Figma absolute position

012 bootstrap-icons.zip

012 iconify.zip

012 lucide-icons.zip

013 Figma smart animate & truncate text

014 Figma auto layout alignment

015 Figma auto layout min max behaviour

016 Figma constraints vs auto layout

external-links.txt

03 - Figma Web Design Projects

001 Download Figma Web Design Projects File.html

001 web-design.zip

002 Important Figma UI 3 Update.html

003 Airbnb project part 1

003 lorem-ipsum.zip

004 Airbnb project part 2

005 Airbnb project part 3

005 change-text.zip

006 Medignition project part 1

006 bootstrap-icons.zip

007 Medignition project part 2

007 many-paster.zip

008 Medignition project part 3

009 Biography project part 1

009 automater.zip

009 lucide-icons.zip

010 Biography project part 2

010 get-waves.zip

011 Commerce project part 1

011 unsplash.zip

012 Commerce project part 2

external-links.txt

04 - Color Theory in Figma

001 Download Figma Color Theory File.html

001 color-theory.zip

002 Important Figma UI 3 Update.html

003 Primary RGB colors

004 RGB values in Figma

005 RGB alpha channel in Figma

006 Secondary RGB colors in Figma

007 Hexadecimal colors in Figma

008 Pure white & black color in Figma

009 Hue in Figma

010 Saturation in Figma

011 Lightness in Figma

external-links.txt

05 - Color Wheel in Figma

001 Download Figma Color Wheel File.html

001 color-wheel.zip

002 Important Figma UI 3 Update.html

003 HSL color wheel in Figma

004 Color wheel divided by 6 in Figma

005 Color wheel divided by 12 in Figma

006 Color wheel side by side

007 Color modes explained

008 Generate color palette in Figma

008 color-scale-generator.zip

008 layer-counter.zip

009 Color plugins in Figma part 1

009 color-shades.zip

010 Color plugins in Figma part 2

010 blobs.zip

010 cool-hue-gradient.zip

010 get-waves.zip

010 web-gradients.zip

external-links.txt

06 - Figma Components

001 Download Figma Components Project File.html

001 figma-component.zip

002 Important Figma UI 3 Update.html

003 Figma components fundamentals

003 delete-multiple-pages.zip

004 Figma instances fundamentals

005 Detach instance in Figma

006 Instagram story component

007 Instance swap in Figma

008 Component naming convention in Figma

009 Nested component behaviour in Figma

external-links.txt

07 - Figma Variants

001 Download Figma Variant Project File.html

001 figma-variant.zip

002 Important Figma UI 3 Update.html

003 Figma variants fundamentals

004 Figma variant values

005 Figma variant property

006 Figma boolean variant

007 Figma text variant

008 Figma boolean property

008 bootstrap-icons.zip

009 Figma boolean comparison

010 Figma instance swap variant

010 skale.zip

011 Figma icon component proportion

011 bootstrap.zip

011 skale.zip

012 Expose nested properties part 1

012 automater.zip

013 Expose nested properties part 2

014 Variant project part 1

015 Variant project part 2

016 Variant project part 3

017 Interactive variants

017 simple-sort.zip

external-links.txt

08 - Figma Styles & Automation

001 Download Figma Style Project File.html

001 figma-styles.zip

002 Important Figma UI 3 Update.html

003 Figma text styles

004 Manage Figma styles

005 Figma text style automation part 1

005 change-text.zip

005 typescales.zip

006 Figma text style automation part 2

007 Figma text style automation part 3

007 styler.zip

008 Figma text style automation part 4

008 batch-styler.zip

009 Search & re-order text styles in Figma

010 Find and replace text in Figma

011 Figma color styles

012 Figma color style automation part 1

012 batch-styler.zip

012 color-scale-generator.zip

012 color-shades.zip

012 color-shades-kit.zip

012 styler.zip

013 Figma color style automation part 2

013 reverse-layer-order.zip

014 Figma brand style guide automation

014 color-style-guide.zip

014 typography-style-guide.zip

015 Manage color & text styles in Figma

015 design-lint.zip

016 Figma shadow styles

016 beautiful-shadows.zip

016 shadow-maker.zip

017 Figma bootstrap grid style part 1

018 Figma bootstrap grid style part 2

019 Figma accessibility colors

019 contrast.zip

external-links.txt

09 - Figma Library

001 Before you start

002 Important Figma UI 3 Update.html

003 Minor Figma updates

004 Figma library overview

005 Publish changes using Figma library

006 Manage Figma library

007 Figma version history

008 Scoping Figma library

009 Swapping Figma library

010 Removing Figma library

011 Live Figma library example

012 Enable Figma library by default

013 Download Annotation Project File.html

013 figma-annotation-project.zip

014 Figma annotation project part 1

015 Figma annotation project part 2

016 Figma annotation project part 3

017 Figma annotation project part 4

external-links.txt

10 - Design Principles & Theories

001 Bundle-Resources.zip

001 Download Course Material Bundled.html

002 Unity and Similarity

002 unity.zip

003 Dominance and Working Memory

003 dominance.zip

004 Negative Space and Complexity

004 negative-space.zip

005 Contrast and Emphasis

005 contrast.zip

006 Proximity and Common Region

006 proximity.zip

007 Alignment and Uncompleted Task

007 alignment.zip

008 Psychological Barrier and Proportion

008 proportion.zip

009 Repetition and Common Behavior

009 repitition.zip

010 Rhythm and Line Connection

010 rhythm.zip

011 UI Design Components

011 ui.zip

012 UI Design Analysis

012 ui-analysis.zip

013 Typography

013 graphic-design-1.zip

014 Serif and Sans Serif Typeface

014 san-serif.zip

015 Font Weight

015 font-weight.zip

016 Font Size

016 font-size.zip

017 Kerning

017 Kerning.zip

018 Word Spacing

018 word-spacing.zip

019 Leading

019 Leading.zip

020 Line Width

020 Line-Width.zip

021 Orphan and Widow

021 Orphan-Widow.zip

022 Type Alignment

022 Type-Alignment.zip

023 Type Hierarchy

023 Type-Hierarchy.zip

11 - HTML

001 Set Up

002 VS Code Theme & Shortcut Set Up.html

003 01-HTML-skeleton.zip

003 HTML Anatomy

004 02-HTML-list.zip

004 HTML List

005 03-HTML-anchor-tag.zip

005 HTML Attribute

006 04-HTML-images.zip

006 HTML Images

007 05-HTML-videos.zip

007 HTML Videos

008 06-HTML-iframe.zip

008 HTML iFrame

009 07-HTML-checkboxes.zip

009 HTML Checkbox and Radio Button

010 08-HTML-input.zip

010 HTML Input Field

011 09-HTML-dropdown.zip

011 HTML Dropdown

012 10-HTML-button.zip

012 HTML Button

013 11-HTML-linking.zip

013 Linking CSS and JavaScript Files

014 12-HTML-semantic.zip

014 HTML Semantics

015 13-HTML-meta-tags.zip

015 HTML Meta Tags

016 14-HTML-external-style.zip

016 HTML External Style

017 15-HTML-style-tag.zip

017 HTML Style Tag

018 16-HTML-inline-style.zip

018 HTML Inline Style

019 17-HTML-linking-fonts.zip

019 Linking Fonts inside HTML

020 18-HTML-block-element.zip

020 HTML Block Elements

021 19-HTML-inline-element.zip

021 HTML Inline Elements

022 20-HTML-box-anatomy.zip

022 HTML Box Anatomy

12 - CSS 101

001 01-CSS-selector.zip

001 CSS Anatomy

002 02-CSS-class.zip

002 CSS Classes

003 03-CSS-id.zip

003 CSS ID

004 04-CSS-multiple-selector.zip

004 CSS Multiple Selector

005 05-CSS-variables.zip

005 CSS Variable

006 06-CSS-specificity.zip

006 CSS Specificity

007 07-CSS-width-height.zip

007 CSS Width and Height

008 08-CSS-margin-padding.zip

008 CSS Margin and Padding

009 09-CSS-border-radius.zip

009 CSS Border Radius

010 10-CSS-box-model.zip

010 CSS Box Model

011 11-CSS-universal-selector.zip

011 CSS Universal Selector

012 12-CSS-descendant-selector.zip

012 CSS Descendant

013 13-CSS-direct-child-selector.zip

013 CSS Direct Child

014 15-CSS-general-sibling-selector.zip

014 CSS General Sibling

015 14-CSS-adjacent-selector.zip

015 CSS Adjacent

016 16-CSS-attribute-selector.zip

016 CSS Attribute Selector

017 17-CSS-focus-pseudo-class.zip

017 CSS Focus Pseudo Class

018 18-CSS-first-child-selector.zip

018 CSS First Child

019 19-CSS-last-child-selector.zip

019 CSS Last Child

020 20-CSS-nth-child-selector.zip

020 CSS Nth Child

021 21-CSS-odd-child-selector.zip

021 CSS Odd Selector

022 22-CSS-even-child-selector.zip

022 CSS Even Selector

023 23-CSS-nth-of-type-selector.zip

023 CSS Nth of Type

024 24-CSS-not-selector.zip

024 CSS Not Selector

025 25-CSS-link-pseudo-classes.zip

025 CSS Link Pseudo Classes

026 26-CSS-pseudo-elements.zip

026 CSS Pseudo Elements

027 27-CSS-comments.zip

027 CSS Comments

13 - CSS 201

001 01-CSS-background-color.zip

001 CSS Background Color

002 02-CSS-background-image.zip

002 CSS Background Image

003 03-CSS-background-repeat.zip

003 CSS Background Repeat

004 04-CSS-background-position.zip

004 CSS Background Position

005 05-CSS-background-size.zip

005 CSS Background Size

006 06-CSS-background-shorthand.zip

006 CSS Background Shorthand

007 07-CSS-linear-gradient.zip

007 CSS Gradient

008 08-CSS-multiple-backgrounds.zip

008 CSS Multiple Background

009 09-CSS-filter.zip

009 CSS Filters

010 10-CSS-opacity.zip

010 CSS Opacity

011 11-CSS-clip-path-circle.zip

011 CSS Clip Path Circle

012 12-CSS-clip-path-polygon.zip

012 CSS Clip Path Polygon

013 13-CSS-display.zip

013 CSS Display and Visibility

014 14-CSS-overflow.zip

014 CSS Overflow

015 15-CSS-text-shadow.zip

015 CSS Text Shadow

016 16-CSS-box-shadow.zip

016 CSS Box Shadow

017 17-CSS-blend-mode.zip

017 CSS Blend Mode

14 - CSS 301

001 01-CSS-scale.zip

001 CSS Scale

002 02-CSS-skew.zip

002 CSS Skew

003 03-CSS-translate.zip

003 CSS Translate

004 04-CSS-matrix.zip

004 CSS Matrix

005 05-CSS-rotate.zip

005 CSS Rotate

006 06-CSS-transform-origin.zip

006 CSS Transform Origin

007 07-CSS-multiple-transform.zip

007 CSS Multiple Transform

008 08-CSS-easing-functions.zip

008 CSS Easing Functions

009 09-CSS-cubic-bezier.zip

009 CSS Cubic Bezier

010 10-CSS-transition.zip

010 CSS Transitions

011 11-CSS-multiple-transition.zip

011 CSS Multiple Transitions

012 12-CSS-transition-shorthand.zip

012 CSS Transitions Shorthand

013 13-CSS-animation.zip

013 CSS Animations

014 14-CSS-animation-shorthand.zip

014 CSS Animations Shorthand

015 15-CSS-multiple-animation.zip

015 CSS Multiple Animations

016 16-CSS-position-relative.zip

016 CSS Position Relative

017 17-CSS-position-absolute.zip

017 CSS Position Absolute

018 18-CSS-position-fixed.zip

018 CSS Position Fixed and Sticky

019 19-CSS-z-index.zip

019 CSS Z-Index

020 20-CSS-media-query.zip

020 CSS Responsive Design

15 - CSS Grid and Flexbox

001 01-CSS-flexbox.zip

001 CSS Flexbox

002 02-CSS-justify-content.zip

002 CSS Justify Content

003 03-CSS-flex-start.zip

003 CSS Flex Start

004 04-CSS-flex-end.zip

004 CSS Flex End

005 05-CSS-space-evenly.zip

005 CSS Space Evenly

006 06-CSS-space-around.zip

006 CSS Space Around

007 07-CSS-space-between.zip

007 CSS Space Between

008 08-CSS-align-items.zip

008 CSS Align Items

009 09-CSS-align-baseline.zip

009 CSS Align Baseline

010 10-CSS-align-self.zip

010 CSS Align Self

011 11-CSS-flex-order.zip

011 CSS Flex Order

012 12-CSS-flex-grow-shrink.zip

012 CSS Flex Grow and Shrink

013 13-CSS-flex-shorthand.zip

013 CSS Flex Shorthand

014 14-CSS-flex-direction.zip

014 CSS Flex Direction

015 15-CSS-flex-column.zip

015 CSS Flex Column

016 16-CSS-flex-wrap.zip

016 CSS Flex Wrap

017 17-CSS-align-content.zip

017 CSS Align Content

018 19-CSS-grid-template-row.zip

018 CSS Grid Template Row

019 20-CSS-grid-template-column.zip

019 CSS Grid Template Column

020 21-CSS-grid-shorthand.zip

020 CSS Grid Shorthand

021 22-CSS-grid-row.zip

021 CSS Grid Row

022 23-CSS-grid-column.zip

022 CSS Grid Column

023 24-CSS-grid-area.zip

023 CSS Grid Area

024 25-CSS-grid-gap.zip

024 CSS Grid Gap

025 26-CSS-justify-self.zip

025 CSS Justify Self

16 - Photoshop to CSS Project

001 Download Coding and Photoshop Files.html

001 Photoshop-to-CSS.zip

002 Affinity-Designer-File-Photoshop-to-CSS.zip

002 Download Affinity Designer File.html

003 Photoshop Project Overview

004 Photoshop HTML Markup

005 Photoshop CSS Root Declaration

006 Photoshop CSS Grid Layout

007 Photoshop CSS Card Design Part 1

008 Photoshop CSS Card Design Part 2

009 Photoshop CSS Card Design Part 3

010 Photoshop CSS Interactions

011 Photoshop CSS Responsive Behavior

17 - Bootstrap 5 Grid System

001 Bootsrap-Grid-All-Files.zip

001 Download All Coding Files Bootstrap PDF.html

002 01-Bootstrap-Breakpoints.zip

002 Bootstrap Breakpoints

003 02-Bootstrap-Naming-Convention.zip

003 Bootstrap Naming Convention

004 03-Bootstrap-Hierarchy.zip

004 Bootstrap Hierarchy

005 04-Bootstrap-Container.zip

005 Bootstrap Container

006 05-Bootstrap-Rows.zip

006 Bootstrap Rows

007 06-Bootstrap-Columns.zip

007 Bootstrap Columns

008 07-Bootstrap-Gutter-and-Spacing.zip

008 Bootstrap Gutter and Spacing

009 08-Bootstrap-Order.zip

009 Bootstrap Order

010 09-Bootstrap-Offset.zip

010 Bootstrap Offset

011 10-Bootstrap-Display.zip

011 Bootstrap Display

012 11-Bootstrap-Alignment.zip

012 Bootstrap Alignment

013 12-Bootstrap-Nested-Columns.zip

013 Bootstrap Nested Columns

014 13-Bootstrap-Responsive-Project.zip

014 Responsive Design Project

18 - Figma to HTML CSS

001 Download All Files.html

001 Figma-to-CSS-files.zip

002 Important Figma UI 3 Update.html

003 Boilerplate file

003 Starter-File.zip

004 Reusable Figma Styles

005 Brand Styleguide

005 airbnb-development.zip

006 CSS Automation

007 CSS DRY Classes

008 Airbnb Hero Section

009 Airbnb Navigation Section

010 Airbnb Card Section

010 Airbnb-Development.zip

19 - SVG

001 01-SVG-tag.zip

001 SVG Anatomy

002 02-SVG-rectangle.zip

002 SVG Rectangle

003 03-SVG-transparency.zip

003 SVG Transparency

004 04-SVG-coordinates.zip

004 SVG Coordinates

005 05-SVG-round-corners.zip

005 SVG Round Corners

006 06-SVG-text.zip

006 SVG Text

007 07-SVG-circle.zip

007 SVG Circle

008 08-SVG-ellipse.zip

008 SVG Ellipse

009 09-SVG-line.zip

009 SVG Line

010 10-SVG-stroke.zip

010 SVG Stroke

011 11-SVG-multiple-objects.zip

011 SVG Multiple Objects

012 12-SVG-polygon.zip

012 Adobe Illustrator SVG Polygon

013 13-SVG-path.zip

013 Figma SVG Path

014 14-SVG-viewBox.zip

014 SVG Viewbox

015 15-SVG-transfrom-group.zip

015 SVG Animation and Transform Group

016 16-SVG-clipPath.zip

016 Adobe Illustrator SVG Clip Path

017 17-SVG-gradient.zip

017 Figma SVG Gradient

018 18-SVG-filter.zip

018 Figma SVG Filter

20 - JavaScript

001 01-JavaScript-variable.zip

001 JavaScript Variables

002 02-JavaScript-string.zip

002 JavaScript String

003 03-JavaScript-boolean.zip

003 JavaScript Boolean

004 04-JavaScript-number.zip

004 JavaScript Number

005 05-JavaScript-concatenation.zip

005 JavaScript Concatenation

006 06-JavaScript-template-literal.zip

006 JavaScript Template Literal

007 07-JavaScript-index-number-length.zip

007 JavaScript Index Number and Length

008 08-JavaScript-array.zip

008 JavaScript Array

009 09-JavaScript-manipulating-array.zip

009 JavaScript Array Manipulation

010 10-JavaScript-object.zip

010 JavaScript Object

011 11-JavaScript-manipulating-object.zip

011 JavaScript Object Manipulation

012 12-JavaScript-comparison-operator.zip

012 JavaScript Comparison Operators

013 13-JavaScript-logical-operator.zip

013 JavaScript Logical Operators

014 14-JavaScript-conditional-statement.zip

014 JavaScript Conditional Statements

015 15-JavaScript-building-logic.zip

015 JavaScript Logic

016 16-JavaScript-for-loop.zip

016 JavaScript For Loop

017 17-JavaScript-for-of-loop.zip

017 JavaScript For Of Loop

018 18-JavaScript-for-each-loop.zip

018 JavaScript For Each Loop

019 19-JavaScript-function.zip

019 JavaScript Functions

020 20-JavaScript-function-parameters.zip

020 JavaScript Function Parameters

021 21-JavaScript-anonymous-function.zip

021 JavaScript Anonymous Functions

022 22-JavaScript-callback-function.zip

022 JavaScript Callback Functions

023 23-JavaScript-arrow-function.zip

023 JavaScript Arrow Functions

21 - JavaScript DOM

001 01-JavaScript-querySelector.zip

001 JavaScript Query Selector

002 02-JavaScript-querySelectorAll.zip

002 JavaScript Query Selector All

003 03-JavaScript-other-selectors.zip

003 JavaScript Other Selectors

004 04-JavaScript-textContent.zip

004 JavaScript Text Content

005 05-JavaScript-innerHTML.zip

005 JavaScript Inner HTML

006 06-JavaScript-attributes.zip

006 JavaScript Attribute

007 07-JavaScript-classList.zip

007 JavaScript Class List

008 08-JavaScript-style.zip

008 JavaScript Styling

009 09-JavaScript-parent-child.zip

009 JavaScript Parent Child

010 10-JavaScript-siblings.zip

010 JavaScript Siblings

011 11-JavaScript-create-element.zip

011 JavaScript Create Element

012 12-JavaScript-remove-child.zip

012 JavaScript Remove Child

013 13-JavaScript-append-prepend.zip

013 JavaScript Append and Prepend

014 14-JavaScript-insert-before.zip

014 JavaScript Insert Before

015 15-JavaScript-event.zip

015 JavaScript Event Listener

22 - 10 Coding Projects

001 01-splitShadow.zip

001 Split Shadow Project

002 02-ResponsiveLandingPage.zip

002 Responsive Landing Page Project

003 03-masonryGrid.zip

003 Masonry Grid Project

004 04-typographyPoster.zip

004 Typography Poster Project

005 05-morphingStroke.zip

005 Morphing Stroke Project

006 06-PrimaryArtBrush.zip

006 Primary Art Brush Project

007 07-dynamicCardDesign.zip

007 Dynamic Card Design Project

008 08-fullscreenMenu.zip

008 Full Screen Menu Project

009 09-morphingBackground.zip

009 Morphing Background Project

010 10-deStijlArtGrid.zip

010 DeStijl Art Grid Project

139,000 تومان

خرید اشتراک افزودن به سبد خرید

خرید دانلودی فوری

در این روش نیاز به افزودن محصول به سبد خرید و تکمیل اطلاعات نیست و شما پس از وارد کردن ایمیل خود و طی کردن مراحل پرداخت لینک های دریافت محصولات را در ایمیل خود دریافت خواهید کرد.

تولید کننده: Udemy