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

Learn Complete Front-End Web Development Course (2023)

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

Learn Complete Front End Web Development with HTML5, CSS3, Bootstrap 5, JavaScript, ECMAScript 6, Angular & React JS


01 - Introduction to HTML
  • 001 Choosing The Right Browser
  • 002 Choosing the right code editor
  • 003 Download and Install VS Code
  • 004 What is HTML
  • 005 Whats the web made of
  • 006 What do HTML, CSS, and JavaScript do
  • external-links.txt

  • 02 - Text Formatting in HTML
  • 001 HTML Syntax
  • 002 Paragraph Tag in Practical
  • 003 Headings in HTML
  • 004 Bolds and Italics in HTML
  • 005 Lists in HTML
  • 006 Types of Elements
  • 007 Quotes in HTML
  • 008 Date and Time in HTML
  • 009 Kbd Code Pre and Br Tag
  • 010 Subscript Superscript and Small Tag

  • 03 - HTML Essentials
  • 001 Attributes in HTML
  • 002 ARIA in HTML
  • 003 Blank Spaces and Comments
  • 004 Uppercase and Lowercase
  • 005 Types of Tags
  • 006 Non Breaking Space
  • 007 Links and Anchor Tags
  • 008 Absolute URLs
  • 009 Relative URLs
  • 010 Organizing Files
  • 011 Naming Files
  • 012 HTML Navigation

  • 04 - Images in HTML
  • 001 Images in HTML
  • 002 Image File Formats
  • 003 Responsive Images in HTML
  • 004 Responsive Images Based on Width
  • 005 Responsive Picture Tag
  • 006 Figure and Fig-Caption Tag

  • 05 - Multimedia in HTML
  • 001 Audio in HTML
  • 002 Video in HTML
  • 003 Video Captions and Subtitles
  • 004 Embedding Videos with iFrame

  • 06 - Content in HTML
  • 001 Languages in HTML
  • 002 The Div and The Span Tag
  • 003 The Document Structure
  • 004 Inside the Head Tag
  • 005 Inside the Body Tag
  • 006 Creating a Basic Page

  • 07 - Form Elements in HTML
  • 001 Form Elements
  • 002 Input Types in Forms
  • 003 Phone and Password Field
  • 004 URL and Number Field
  • 005 Date Time Month Week and More
  • 006 Radio Buttons
  • 007 Checkbox Fields
  • 008 Search and Upload Fields
  • 009 The Color Field
  • 010 Dropdown Fields in Forms
  • 011 Message and Range Field
  • 012 Range Fancy Button Hidden Field and Reset
  • 013 Wrapping Form Fields

  • 08 - Tables in HTML
  • 001 Tables in HTML
  • 002 Working with Tables in HTML

  • 09 - Getting started with CSS
  • 001 Getting Started with CSS
  • 002 Browser Developer Tools
  • 003 Placements
  • 004 CSS Syntax

  • 10 - CSS Essentials
  • 001 CSS Core Concepts
  • 002 Color Property Values
  • 003 CSS Selectors
  • 004 Class and ID in CSS
  • 005 Live Example of Class and ID
  • 006 Descendant Selectors in CSS
  • 007 Grouping Selectors
  • 008 Inheritance in CSS
  • 009 Pseudo Classes in CSS

  • 11 - Understanding Box Model in CSS
  • 001 Getting Started with Box Model
  • 002 Inline Block and Display
  • 003 Box Model Testing

  • 12 - Typography in CSS
  • 001 Introduction to Typography
  • 002 Font Weight and Style
  • 003 Font-Size and Formatting

  • 13 - Layouts in CSS
  • 001 Floats and Clear
  • 002 Build a Layout with Floats
  • 003 Positions in CSS
  • 004 The Z-Index

  • 14 - Flexbox and Grid in CSS
  • 001 Flexbox and Grid Systems
  • 002 Flex Directions and More
  • 003 CSS Grid Essentials

  • 15 - Advanced CSS Selections
  • 001 Advanced CSS Selectors
  • 002 Pseudo Selectors

  • 16 - Building The Website
  • 001 The Website Structure
  • 002 Installing Google Fonts for Website
  • 003 Styling The Site Header
  • 004 Building The Navigation Bar
  • 005 Creating a Responsive Image Slider
  • 006 Styling The Content Holder
  • 007 Styling The Footer
  • 008 Creating and Styling Services and Products Page
  • 009 Creating and Styling About Page
  • 010 Creating and Styling Contact Page

  • 17 - Responsive Web Design (RWD)
  • 001 Introduction to Responsive Web Design (RWD)
  • 002 How Responsive Web Design Works
  • 003 Creating Responsive Header
  • 004 Creating Responsive Navigation Bar
  • 005 Creating Responsive Banner Slider
  • 006 Creating Responsive Content Holder
  • 007 Creating Responsive Footer

  • 18 - JavaScript - Getting Started
  • 001 Introduction to JavaScript
  • 002 What you should know
  • 003 Hello World
  • 004 JavaScript Statements
  • 005 Placements in JavaScript Part-1
  • 006 Placements in JavaScript Part-2

  • 19 - JavaScript - Fundamentals
  • 001 Variables in JavaScript
  • 002 Conditions in JavaScript
  • 003 Operators in JavaScript
  • 004 Working with Browser Console
  • 005 Loops in JavaScript
  • 006 Functions in JavaScript
  • 007 Creating Custom Loops with Functions

  • 20 - JavaScript - Data Types
  • 001 Working with Arrays
  • 002 Numbers in JavaScript
  • 003 Strings in JavaScript
  • 004 Working with Dates Object
  • 005 Objects in JavaScript

  • 21 - JavaScript DOM - Document Object Model
  • 001 DOM in JavaScript
  • 002 Element Node Types
  • 003 Working with DOM Elements
  • 004 Changing Contents of DOM
  • 005 Creating New Elements with JavaScript
  • 006 Adding Events to DOM Elements
  • 007 Working with Form Elements
  • 008 Timers in JavaScript

  • 22 - JavaScript - Advanced
  • 001 Debugging in JavaScript
  • 002 Creating Modern Live Validation Forms
  • 003 Minify & Validate JavaScript
  • 004 Using JavaScript Libraries
  • 005 Working with Modern JavaScript
  • 006 Making Use Of Use Strict
  • 007 JavaScript Bad Practices
  • 008 JavaScript Regular Expressions

  • 23 - ECMA Script 6 (JavaScript ES6)
  • 001 Introduction to ES6
  • 002 What you should know
  • 003 What is ES6
  • 004 Transpiling in ES6
  • 005 Why use Babel JS
  • 006 How to use Babel JS
  • 007 Installing Node JS

  • 24 - ECMA Script 6 (ES6) - Fundamentals
  • 001 Let Syntax in ES6
  • 002 Using The Const Keyword
  • 003 Working with Template Strings
  • 004 Spread Operator in JavaScript ES6
  • 005 Default Function Parameters in ES6
  • 006 Working with Object Literals in ES6
  • 007 Arrow Functions in JavaScript ES6
  • 008 Arrow Functions with This Scope in ES6
  • 009 Destructuring in JavaScript ES6
  • 010 Generators in JavaScript ES6
  • 011 Working with Class Syntax in JavaScript ES6
  • 012 Class Inheritance in JavaScript ES6

  • 25 - Bootstrap 5 - Getting Started
  • 001 Introduction to Bootstrap 5
  • 002 What you will need
  • 003 Hello World
  • 004 Bootstrap Document Structure

  • 26 - Bootstrap 5 - Layouts
  • 001 Breakpoints in Bootstrap 5
  • 002 Container Types
  • 003 Grid
  • 004 Grid Options
  • 005 Nesting Rows and Columns
  • 006 Column Vertical Alignment
  • 007 Column Horizontal Alignment
  • 008 Column Wrapping and Column Breaks
  • 009 Reordering and Offsetting Columns
  • 010 Margin Utilities
  • 011 Gutters
  • 012 Horizontal Gutters
  • 013 Vertical Gutters
  • 014 Horizontal and Vertical Gutters

  • 27 - Bootstrap 5 - Contents
  • 001 Typography
  • 002 Inline Text Elements
  • 003 Abbreviations and Blockquotes
  • 004 Working with Lists
  • 005 Images in Bootstrap
  • 006 Tables in Bootstrap
  • 007 Table Alignment, Nesting and Anatomy
  • 008 Figures in Bootstrap

  • 28 - Bootstrap 5 - Forms
  • 001 Forms in Bootstrap
  • 002 Form Control
  • 003 Checks and Radios
  • 004 Range
  • 005 Input Groups
  • 006 Floating Labels
  • 007 Form Layout
  • 008 Horizontal Forms
  • 009 Auto Sizing Forms
  • 010 Inline Forms
  • 011 Form Validation

  • 29 - Bootstrap 5 - Components
  • 001 Accordions
  • 002 Alerts
  • 003 Dismissing Alerts
  • 004 Badges
  • 005 Breadcrumb
  • 006 Buttons
  • 007 Button Group
  • 008 Button Toolbar
  • 009 Button Group Alteration
  • 010 Card
  • 011 Card Sizing
  • 012 Card Navigation
  • 013 Card Images
  • 014 Card Styles
  • 015 Carousel
  • 016 Carousel Controls
  • 017 Carousel Indicators
  • 018 Carousel Caption
  • 019 Carousel Fade Effect
  • 020 Carousel Timing
  • 021 Disable Carousel Touch Swiping
  • 022 Carousel Dark Variant
  • 023 (Bootstrap 5.3 Update) Deprecation of Carousel Dark & The New Method
  • 024 Close Button
  • 025 (Bootstrap 5.3 Update) Deprecation of btn-close-white & The New Method
  • 026 Collapse
  • 027 Horizontal Collapse
  • 028 Multiple Targets
  • 029 Dropdowns
  • 030 Split Button
  • 031 Dropdown Sizing
  • 032 Dark Dropdowns
  • 033 (Bootstrap 5.3 Update) Deprecation of Dark Dropdowns & The New Method
  • 034 Dropdown Directions
  • 035 Dropup and Dropdown Alignment
  • 036 Menu Items
  • 037 Menu Alignment
  • 038 Dropdown Alignment Options
  • 039 Menu Contents
  • 040 Dropdown Forms
  • 041 Dropdown Options
  • 042 Dropdown Auto Close
  • 043 List Group
  • 044 List Group Links and Buttons
  • 045 List Group Flush
  • 046 Numbered List
  • 047 Horizontal List Groups
  • 048 Contextual List Group Classes
  • 049 List Group with Badges
  • 050 List Group with Custom Content
  • 051 List Group Checkboxes and Radios
  • 052 List Group JavaScript Tabs
  • 053 Modals
  • 054 Static Backdrop
  • 055 Scrolling Long Content
  • 056 Vertically Centered
  • 057 Modal Tooltips and Popovers
  • 058 Using Grid system in Modal
  • 059 Varying Modal Content
  • 060 Toggle Between Modals
  • 061 Optional Modal Sizes
  • 062 Navbar
  • 063 (Bootstrap 5.3 Update) The All New bg-body-tertiary
  • 064 Navigation Links
  • 065 Navbar Dropdown
  • 066 Navbar Nested Dropdown
  • 067 Navbar Forms
  • 068 Navbar Input Group
  • 069 Navbar Plain Text
  • 070 Navbar Colors
  • 071 (Bootstrap 5.3 Update) The Navbar Dark-Mode
  • 072 (Bootstrap 5.3 Update) The New Navbar Color
  • 073 Navbar Containers
  • 074 Navbar Placement
  • 075 Navbar Scrolling
  • 076 Off Canvas Navbar
  • 077 Navs and Tabs
  • 078 Nav Flex Utilities
  • 079 Nav Tabs and Pills with Dropdown
  • 080 Tabs and Pills Behaviors
  • 081 Offcanvas In-Depth
  • 082 (Bootstrap 5.3 Update) Offcanvas Dark-Mode
  • 083 Offcanvas Scrolling
  • 084 Offcanvas Placement
  • 085 Pagination
  • 086 Placeholders
  • 087 Popovers In-Depth
  • 088 Popover Direction
  • 089 Custom Popovers
  • 090 Dismiss on next click
  • 091 Enable Popover on Hover
  • 092 Progress Bars
  • 093 Progress bar height and Background
  • 094 Stripes and Animation
  • 095 (Bootstrap 5.3 Update) The New Progress Bar
  • 096 (Bootstrap 5.3 Update) Progress Bar Height
  • 097 (Bootstrap 5.3 Update) Labels and Backgrounds in Progress Bars
  • 098 (Bootstrap 5.3 Update) Multiple Stacked Progress Bars
  • 099 (Bootstrap 5.3 Update) Stripped and Animated Progress Bars
  • 100 Scrollspy
  • 101 Spinners
  • 102 Growing Spinner
  • 103 Spinner Alignment
  • 104 Spinner Sizes
  • 105 Spinner in Buttons
  • 106 Toasts
  • 107 Toast Alignment
  • 108 Tooltips In-Depth
  • 109 Custom Tooltip
  • 110 Tooltip Directions
  • 111 HTML in Tooltip
  • 112 Tooltip on Disabled Elements

  • 30 - Bootstrap 5 - Helpers
  • 001 Clearfix
  • 002 Colors and Background
  • 003 Colored Links
  • 004 (Bootstrap 5.3 Update) Link Utilities
  • 005 (Bootstrap 5.3 Update) Focus Rings
  • 006 (Bootstrap 5.3 Update) Icon Links
  • 007 Ratios
  • 008 Positions
  • 009 Stacks
  • 010 Visually Hidden
  • 011 Stretched Link
  • 012 Text Truncate
  • 013 Vertical Rule

  • 31 - Bootstrap 5 - Utilities
  • 001 Backgrounds
  • 002 (Bootstrap 5.3 Update) Additional Background Colors
  • 003 Background Gradients
  • 004 Background Opacity
  • 005 Borders
  • 006 Border Color
  • 007 Border Opacity
  • 008 Border Width
  • 009 Border Radius
  • 010 Rounded Border Sizes
  • 011 Text Colors
  • 012 Text Opacity
  • 013 Display Inline and Block
  • 014 Hiding Elements
  • 015 Display in Print
  • 016 Flex
  • 017 Flex Direction
  • 018 Flex Justify Content
  • 019 Flex Align Items
  • 020 Flex Align Self
  • 021 Flex Fill
  • 022 Flex Grow and Shrink
  • 023 Flex Auto Margins
  • 024 Flex with Align Items
  • 025 Flex Wrap
  • 026 Flex Order
  • 027 Flex Align Content
  • 028 Flex Media Object
  • 029 Responsive Float
  • 030 Interactions
  • 031 (Bootstrap 5.3 Update) Link Opacity
  • 032 (Bootstrap 5.3 Update) Link Underlines
  • 033 (Bootstrap 5.3 Update) Colored Links
  • 034 (Bootstrap 5.3 Update) Object Fit
  • 035 (Bootstrap 5.3 Update) Responsive Object Fit
  • 036 Opacity
  • 037 Overflow
  • 038 Position
  • 039 Position Center Elements
  • 040 Position Center Elements within Edges
  • 041 Position Examples Part 1
  • 042 Position Example Part 2
  • 043 Shadow
  • 044 Sizing
  • 045 Spacing
  • 046 Gap
  • 047 Text Alignment
  • 048 Text Wrap
  • 049 Text Break
  • 050 Text Transform
  • 051 Font Size
  • 052 Font weights and italics
  • 053 Line Height
  • 054 Monoscope
  • 055 Reset Color
  • 056 Text Decoration
  • 057 Vertical Alignment
  • 058 Visibility
  • 059 (Bootstrap 5.3 Update) The Z-Index
  • 060 Bootstrap Icons

  • 32 - Bootstrap 5 Project 1 - EMS App
  • 001 Introduction to EMS2.0 Project
  • 002 Creating the Login Page
  • 003 Creating Dash Nav and Brand Logo
  • 004 Creating the Navbar Toggler
  • 005 Creating Navbar Items
  • 006 Creating Form Fields for Navbar
  • 007 Creating Cards for Dashboard
  • 008 Creating Employees List Page
  • 009 Creating Employees Page Sidebar
  • 010 Creating Employees List Table
  • 011 Creating Add Employee Modal
  • 012 Creating Add Employee Modal Form
  • 013 Creating Details Modal for Employee List
  • 014 Creating Edit Details for Employee List
  • 015 Creating Delete Modal for Employees List
  • 016 Creating Jobs List Page
  • 017 Updating the Job List Page
  • 018 Creating Job List Table
  • 019 Creating Add Job Modal
  • 020 Creating Details Modal for Job
  • 021 Creating Edit Details for Job Modal
  • 022 Creating Delete Modal for Job List
  • external-links.txt

  • 33 - Bootstrap 5 Project 2 - BLOG2.0 App
  • 001 Blog Project Introduction
  • 002 Whats Required for Template Building
  • 003 Creating The Index File
  • 004 Creating The Navbar and Brand Logo
  • 005 Creating Navbar Toggler
  • 006 Creating Navbar Items
  • 007 Creating The Search Field
  • 008 Creating The Home Banner
  • 009 Creating The Subscribe Modal
  • 010 Creating Home Posts Section
  • 011 Creating Blog Footer
  • 012 Adding Custom Effects To Navbar
  • 013 Creating Default Page Header
  • 014 Creating Post Loop For Default Page
  • 015 Creating Sidebar Subscribe Form
  • 016 Creating Categories and Archive Widgets
  • 017 Creating Page and Post Content Area
  • 018 Creating Comment Form for Posts
  • 019 Creating The Search Page
  • 020 Linking Everything Together
  • external-links.txt

  • 34 - Bootstrap 5 Project 3 - Professional Website
  • 001 Introduction To Project
  • 002 Setting Up Project Folder
  • 003 Creating Navbar and Brand
  • 004 Creating Navbar Toggler
  • 005 Creating Nav Items
  • 006 Creating Navbar Search Field
  • 007 Creating Navbar Sign-Up and Login Buttons
  • 008 Creating The Banner Text
  • 009 Adding Banner Image
  • 010 Creating Site Feature Set
  • 011 Creating Course Loop Header
  • 012 Creating Course Loop Filter
  • 013 Creating Course Loop Header
  • 014 Creating Single Course List Item
  • 015 Creating Duplicates of Course Items
  • 016 Creating Home Page Content
  • 017 Adding Home Content Image
  • 018 Creating Subscribe Area
  • 019 Creating Main Footer
  • 020 Creating Footer Address
  • 021 Creating Link Items For Footer
  • 022 Creating Social Icons
  • 023 Creating Copyright Info
  • 024 Creating Sticky Footer
  • 025 Creating About Page Header
  • 026 Creating About Content Section
  • 027 Creating The Courses Page
  • 028 Creating Single Course Page And Breadcrumb
  • 029 Creating Course Header Description and Meta Data
  • 030 Creating Course Meta Data
  • 031 Adding Icons To Course Meta Data
  • 032 Adding Course Buttons
  • 033 Creating Single Course Image
  • 034 Creating Single Course Contents
  • 035 Creating FAQ Header
  • 036 Creating FAQ List
  • 037 Creating Post Question Form
  • 038 Creating Blog Page and Header
  • 039 Creating Blog Posts List
  • 040 Creating Blog Sidebar
  • 041 Creating Subscribe Modal
  • 042 Creating The Subscribe Form
  • 043 Creating Single Post Page
  • 044 Creating Contact Page Header
  • 045 Creating Contact Page Cards
  • 046 Creating Contact Modal
  • 047 Linking Everything Together
  • external-links.txt

  • 35 - Angular - Getting Started
  • 001 Introduction to Angular
  • 002 What you should know
  • 003 What you need to get started
  • 004 Installing Node JS
  • 005 Installing Angular
  • 006 Installing Cmder for Angular

  • 36 - Angular - Fundamentals
  • 001 Setting up Angular Project
  • 002 Install VS Code for Angular
  • 003 Creating the Hello World Project in Angular
  • 004 Angular App Directory Structure
  • 005 Creating New Components in Angular
  • 006 Creating Styles for Angular Components
  • 007 Adding Bootstrap & jQuery to Angular Project
  • 008 Interpolation in Angular
  • 009 Data Binding in Angular
  • 010 Ng If Else Directives in Angular
  • 011 Event Binding in Angular
  • 012 Pipes in Angular
  • 013 Input Decorator in Angular
  • 014 Creating Services in Angular
  • 015 HTTP Client Module in Angular

  • 37 - React JS - Getting Started
  • 001 Introduction to React JS
  • 002 Installing Browser Tools
  • 003 Installing Node JS for React
  • 004 Install VS Code for React
  • 005 Hello World in React JS
  • 006 JSX in React JS
  • external-links.txt

  • 38 - React JS - Fundamentals
  • 001 What is a Component in React JS
  • 002 Create First React Component
  • 003 Stateless Component in React JS
  • 004 Props in React JS
  • 005 Events in React JS
  • 006 State in React JS
  • 007 Adding State to Note Component
  • 008 Refs in React JS

  • 39 - React JS - Project Sticky Notes
  • 001 Creating Board With Props in React JS
  • 002 Adding Child Elements to Board
  • 003 Updating & Deleting Notes
  • 004 Adding Notes
  • 005 Keys in React JS
  • 006 Mounting Components
  • 007 Setting Default Styles
  • 008 Updating Components
  • 009 Making React Components Draggable
  • 010 Setup & Install Create React App
  • 011 Building Scratch Pad With React JS

  • 40 - Create React App - Getting Started
  • 001 Introduction to Create React App
  • 002 Prerequisites

  • 41 - Create React App - What is React
  • 001 What is React
  • 002 Install React Tools on Chrome
  • 003 Install React Tools on Firefox

  • 42 - Create React App - React Elements
  • 001 Install Create-React-App
  • 002 Project Generation
  • 003 Creating React Elements
  • 004 Using JSX to Refactor Elements

  • 43 - Create React App - Components in React
  • 001 Creating React Components
  • 002 Creating Different Components
  • 003 Component Properties
  • 004 Working with Lists
  • 005 Adding Keys to List Items
  • 006 Display Images in React
  • 007 Working with Fragments

  • 44 - Create React App - State in React Component
  • 001 Conditional Rendering
  • 002 Destructureing Arrays and Objects
  • 003 Working with useState Hook
  • 004 Working with useEffect
  • 005 Incorporating useReducer with React

  • 45 - Create React App - React Asynchronous
  • 001 Using Hooks to Fetch Data
  • 002 Displaying Data from API with React
  • 003 Handling Loading States

  • 46 - Create React App - Testing in React
  • 001 Testing Platform using Create React App
  • 002 Using Jest to Test Small Functions
  • 003 Testing Library in React
  • 004 Testing Hooks with React Testing Library

  • 47 - Create React App - Working with React Routers
  • 001 Installing and Setting up React Routers
  • 002 React Routers Configuration
  • 003 Linking Components Together

  • 48 - React Project - Introduction
  • 001 Introduction to React Project

  • 49 - React Project - Setting-Up and Installation
  • 001 Installing Requirements
  • 002 Create React App Installation
  • 003 Clean up React Application
  • 004 Using External Components
  • 005 Installing Bootstrap CSS in React
  • 006 Customizing Bootstrap Components in React

  • 50 - React Project - Developing Project
  • 001 Building your first Component
  • 002 Sub Component Hooks
  • 003 Adding Appointments into our Project
  • 004 Creating JSON Data for Demo Users
  • 005 Importing JSON Data into React Part-1

  • 51 - React Project - Setting-up Sort and Search Functionality
  • 001 Sending Data to the Component
  • 002 Conditional Classes and useState Hooks

  • 52 - React Project - Manipulation Data
  • 001 Working with useEffect and useCallback
  • 002 Deleting Data
  • 003 Searching Data with Filters
  • 004 Working with Sort
  • 005 Applying the Sort Algorithm
  • 006 Adding New Appointments
  • 139,000 تومان
    بیش از یک محصول به صورت دانلودی میخواهید؟ محصول را به سبد خرید اضافه کنید.
    افزودن به سبد خرید
    خرید دانلودی فوری

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

    ایمیل شما:
    تولید کننده:
    مدرس:
    شناسه: 20750
    حجم: 12297 مگابایت
    مدت زمان: 2319 دقیقه
    تاریخ انتشار: ۱۵ مهر ۱۴۰۲
    طراحی سایت و خدمات سئو

    139,000 تومان
    افزودن به سبد خرید