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 تومان

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

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

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

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