بــــرمـــجـــــة وتــــطــــويــــــر واجـهـــات الـــويــــب الأمامــيــــة
FRONT-END Web Development

Course Overview:

This course provides a complete introduction to front-end web development, starting with HTML and CSS for building and styling web pages, then advancing to responsive layouts with Bootstrap, interactive features using JavaScript, and modern application development with TypeScript and Angular. By the end of the course, students will be able to design and deploy professional, dynamic, and responsive web applications.

Learning Objectives:

By the end of this course, students will be able to:

• Build structured and responsive web pages using HTML5 and CSS3, applying proper layout, styling, and design practices.

• Utilize Bootstrap to create modern, mobile-friendly, and visually appealing web layouts.

• Write interactive scripts with JavaScript, including variables, functions, events, loops, and DOM manipulation to add dynamic behavior to web applications.

• Apply TypeScript for type-safe, scalable, and maintainable front-end development.

• Design, develop, and deploy professional Angular applications, mastering components, directives, services, forms, HTTP requests, and routing.

• Implement best practices for front-end project structure, modularity, reusability, and optimization for real-world applications.

What You Will Learn:

Part 1: HTML Language 

1.HTML Beginner Level 

• What is HTML 

• HTML web page structure 

• Heading 

• Paragraphs 

• Emphasis and strong tag 

• Comments 

2.HTML Intermediate Level 

• Images Tag 

• Ordered List 

• Unordered List 

• Links 

3.HTML Advanced Level 

• Tables tag. 

• Forms. 

• Div. and Span. 

• Inputs tag. 

4.Cascade Style Sheet (CSS) 

• Introduction to CSS 

• CSS syntax 

• CSS inline method 

• CSS internal method 

• CSS external method 

• Text and background color 

• Use image as background 

• Class and id 

• CSS border 

• Border radius 

• CSS margin and padding 

• CSS text properties 

•  CSS direction 

Part 2: Put all together: Webpage layout and design with Bootstrap 

• Use HTML5 and CSS3 together by Bootstrap 

• Learn bootstrap documentation 

• Apply bootstrap to our webpage layout using classes. 

• Changing the background color of div and heading. 

Part 3: Java Scripts ( js ) 

• Introduction to Java scripts. 

• Where to write code. 

• Output 

• JavaScript Syntax 

• JavaScript Statement. 

• JavaScript Comment 

• JavaScript Data type and variable 

• JavaScript Athematic and Assignment Operator. 

• JavaScript Condition statement IF Statement. 

• JavaScript Logical Operation. 

• JavaScript Loop Statement 

• JavaScript Function Definition 

• Invoking Functions. 

• JavaScript Events 

• JavaScript Methods like: replace, to Lowercase, substring and search. 

Part 4: Angular 

      1. Typescript 

• Introduction 

• Installing TypeScript 

• Preparing a TypeScript Project 

• Understanding Typing, Variables, and Functions 

• Working with Classes and Interfaces 

• Organizing Your Code with Namespaces 

• Reusing Code through Modules 

      2. Angular: 

• Introduction to angular 

• What is angular? why do we use angular? 

• What should I know before start learning angular? 

• The hole history of angular and how angular improved with time? 

• Angular CLI 

      3.Installing the required environment and tools to start working with Angular 

      4. General Basics 

• Components 

• Interpolation 

• Property binding 

• Class binding 

• Style binding 

• Event binding 

• Template reference variable 

• Tow way binding 

      5.Directives 

• ng IF 

• ng Switch 

• ng For 

• ng Form 

• module 

• ng Class 

      6.Component Interaction 

• 3arent -> Child 

• Child -> Parent 

      7.Services 

• Services

• Dependency Injection 

      8.Http Requests 

• HTTP and Observables 

• Fetch Data using Http 

• Http error handling 

      9.Routing And navigation 

• Wildcard Route and redirecting routes 

• Route Parameters 

• PARAM Map Observable 

• Optional route parameters 

• Relative navigation 

• Child Routes 

     10.Forms 

• TDF (Template Driven approach) 

• Binding Data with ng form 

• Binding data to a model 

• tracking state and validity 

• validation with visual feedback 

• Displaying Error messaging 

• Form validation 

• Reactive (Model Driven approach) 

• Creating Form model 

• Nesting Form groups 

• Form builder service 

• Validation 

      11. Pipes 

• what is pipes 

• Creating custom pipes