تفاصيل الدورة

The front-end is what the user sees and interacts with. It’s the app on your phone or the website you visit. So, front-end developers are in charge of building beautiful, interactive user interfaces.
  • As a front-end developer, you should know HTML, CSS, JavaScript and at least one of the popular JavaScript frameworks/libraries that are used for building client apps, including Angular, React and Vue.
Diploma Courses:
  • HTML, CSS and JavaScript (40 Hours)
  • Angular 8 (40 Hours)
  • Bootstrap (8 Hours)
Courses Outlines:

HTML, CSS and JavaScript:

Module 1: How the web works?
  • Web development environment
  • Web design and development workflow
  • Web technologies
Module 2: HTML
  • HTML History
  • HTML Document/Page Types
  • Tags, attributes, Doctypes
  • HTML Forms and Lists
  • Module 3: CSS
  • CSS Fundamentals
  • CSS properties and Methods
  • CSS Floats and Layouts
  • CSS Inheritance
Module 4: JavaScript
  • JavaScript Values, variables, operators
  • Type Conversions
  • Arrays
  • Conditional Statements
  • Objects
  • Loop Statements
Module 5: HTML5
  • Tags in HTML5
  • Form handling and validations
  • Data Storage
  • Web SQL and indexed database
  • HTML5 Input Types
  • HTML Form Attributes
  • Embedding audio and video
  • Geolocation API
  • Canvas API
Module 6: CSS3
  • CSS3 properties
  • CSS3 Animations
  • CSS3 Layouts
  • Rounded and Elliptical Borders
  • Box Shades
  • Multiple background images
Module 7: Advanced JavaScript
  • What is Object Oriented JavaScript?
  • DOM Manipulation
  • Understanding DOM
  • DOM methods and events
  • Inner functions, closures
  • Anonymous functions
  • Immediate functions
  • Ajax
Module 8: jQuery
  • Introduction to jQuery
  • Selectors
  • Events
  • Hide/Show
  • Fade/Slide
  • Animate
  • Call-backs
  • Chaining
  • CSS Classes
  • jQuery css()
  • Dimensions
  • Traversing
  • Ancestors
  • Descendants
  • Siblings
  • Filtering
  • Ajax in jQuery
  • DOM manipulation using jQuery
  • jQuery Filtering


Angular 7
  • User Experience similar to a Desktop Application
  • Productivity and Tooling
  • Performance
  • Community
  • Full-featured Framework
  • Platform for Targeting Native Mobile not just Web Browsers
Typescript & ES6
  • What is Typescript
  • Why Typescript
  • Setup and installation
  • IDE support
  • Scoping using Let and Const Keywords ( ES6 )
  • Template Literals ( ES6 )
  • Spread Syntax and Rest Parameters ( ES6 )
  • Destructuring ( ES6 )
Power of Types
  • Type inference
  • Type Annotations
  • Number
  • Boolean
  • String
  • Array
  • Tuple
  • Enum
  • Any
  • Void
  • Null and Undefined
  • Never (Typescript 2)
Explore Functions
  • Using types in functions
  • Function as types
  • Optional and default parameters
  • Arrow functions
Classes
  • Inheritance
  • Access modifiers
  • Getters and setters
  • Readonly & static
Interfaces
  • Optional properties and methods
  • Strict structural contract
  • Extending interface
  • Implementing interface
Modules
  • Introduction
  • Import
  • Export
  • Default
Working with Angular CLI
  • Angular CLI
  • Anatomy of the project
  • Debugging Angular apps
  • Working with Augury
8 Main Building blocks of Angular
  • Modules
  • Components
  • Templates
  • Metadata
  • Data binding
  • Directives
  • Services
  • Dependency injection
Angular modules
  • Why modules
  • How to create modules
  • Built in modules
  • Root Module
  • Feature module
Components
  • @ Component decorator
  • Component configuration object
  • Custom components
  • Component with templates
  • Inline
  • External
  • Component with Styles
  • Inline
  • External
Templating
  • HTML as template
  • Data binding
  • Interpolation
  • Property Binding
  • Event Binding
  • Two way binding
  • Template expressions
  • Template syntax
  • Attribute, class and style bindings
  • @Input()
  • @Output
  • Template reference variables
  • Safe navigation operator
Directives
  • Built-in directives
  • Structural directive
  • Attribute directive
Pipes
  • Built-in pipes
  • @Pipe decorator
Forms
  • @angular/forms library
  • Template driven forms
  • Form and field validation
  • Validation check with ng-pristine,ng-dirty, ng-touched, ng-untouched, ng-valid, ng-invalid
  • Show and hide validation error messages
  • Form submission with ngSubmit
  • Reactive/ Model drive forms
  • ReactiveFormsModule
  • FormGroup, FormControl classes
  • FormBuilder for easy form building
  • Validations using Validators
  • Setting form model using setValue and patchValue
  • Use FormArray to build repeated form controls or form groups
Dependency Injection
  • Why DI
  • @Injectable decorator
  • Custom service development
  • Registering the service with NgModule using providers key
  • Provider Types
  • Class
  • Factory
  • Value
Routing And Navigation
  • @angular/router library
  • Configure routes
  • forRoot and
  • RouterOutlet, RouterLink, RouterLinkActive
  • Nested Routes
  • Parametrized routes
  • Route guards
RxJs Primer
  • Observable interface
  • Streams
  • Operators
  • Subscription
  • Subject
  • Schedulers
HTTP Deprecated & HttpClient
  • Setup installing the module
  • Making a request for JSON data
  • Typechecking the response
  • Error handling
  • Sending data to the server
  • Making a POST request
  • Configuring other parts of the request
Testing
  • Testing in Typescript
  • Testing Component
  • Testing Service/Provider
  • Testing Pipe
Deployment
  • Manually
  • Using the Angular CLI with Ahead-Of-Time (AOT) Compilation and Tree-Shaking (removing unused library code)


Bootstrap:
  • Introduction
  • Bootstrap Library
  • Container Class
  • Designing in Grids
  • Typography
  • CSS and HTML
  • JavaScript Components

  تحديث بتاريخ 20 July, 2020

المتطلبات

The front-end is what the user sees and interacts with. It’s the app on your phone or the website you visit. So, front-end developers are in charge of building beautiful, interactive user interfaces.
The average salary for a front-end Developer is $102,768 per year in the United States.
As a front-end developer, you should know HTML, CSS, JavaScript and at least one of the popular JavaScript frameworks/libraries that are used for building client apps, including Angular, React and

وظائف مناسبة لهذه الدورة

Front End Developer , Lead Front-End Developer , Front End Crew Worker

نبذة عن معهد CLS Learn

Since 1995, CLS Learning solutions is leading the technology learning market in Egypt, the Middle East, and Africa. With our wide network of international partners, trainers, instructors, and technology leaders; we are able to deliver top notch training programs to our students and technology professionals.

25 Years in the market. 

We delivered over 4,200 courses to 63,500 professionals in our centers.

We delivered 1,200 courses to 18,240 corporate employees on Site.

عرض الجميع دورات CLS Learn
دورات يمكنك الالتحاق بها على الفور... خذ دورة عبر الإنترنت على CSS ابتداءً من الآن. See all courses

هل هذه الدورة التدريبية الاختيار المناسب لك؟

قيِم هذه الصفحة

لم تجد ما كنت تبحث عنه؟

أو