Another step in the field of website design (front-end) is learning three libraries to make it easier for you to build attractive and nice websites. They are in order: jQuery, Sass, Boostrap, and a second programming language, which is Typescript.
Detailed objectives:
jQuery library: Its importance is that it facilitates the process of writing code and reduces the number of lines of writing code, and it also makes pages more dynamic.
1- Synatx
- jQuery Intro
- jQuery Syntax
- jQuery Selectors
- jQuery Events
- On Method
2- jQuery Effects
- jQuery Hide/Show
- jQuery fade
- jQuery slide
- jQuery Chaining
- Callback
- Scrolling
3- jQuery DOM
- jQuery Get
- jQuery Set
- jQuery Add
- jQuery Remove
- jQuery css
- jQuery dimensions
4- jQuery Navigation
- jQuery Ancestors
- jQuery Descendants
- jQuery Siblings
- - jQuery Filtering
Bootstrap 5 library: Because it provides a set of ready-made components that can be used to build websites and web applications quickly and effectively, Bootstrap also works to provide responsive designs that are compatible with all devices and screens.
1- Getting Started to Bootstrap5
- Introduction
- Bootstarp5 Document
2- Layouts in Bootstrap5
- Breakpoints in Bootstrap5
- Containers
- Grid options
- Nesting Rows and Columns
- Column vertical alignment
- Column Horizontal alignment
- Column wrapping and column Breaks
- Reordering and Offsetting Columns
- Margin Utilities
- Gutters
- Horizontal Gutters
- Vertical Gutters
- Horizontal and Vertical Gutters
3- Contents in Bootstrap5
- Typography
- Inline Text Elements
- Abbreviations and Blockquotes
- Working with Lists
- Images in Bootstrap
- Tables in Bootstrap
- Table Alignment, Nesting and Anatomy
- Figures in Bootstrap
4- Form in Bootstrap5
- Form Control
- Checks and Radios
- Range
- Input Groups
- Floating Labels
- Form Layout
- Horizontal Forms
- Auto Sizing Forms
- Inline Forms
- Form Validation
5- Components in Bootstrap5
- Accordions
- Alerts
- Dismissing Alerts
- Badges
- Breadcrumb
- Buttons
- Card
- Carousel
- Collapse
- Multiple Targets
- Dropdowns
- Split Button
- Menu Items
- List Group
- Modals
- Static Backdrop
- Scrolling Long Content
- Vertically Centered
- Modal Tooltips and Popovers
- Using Grid System In Modal
- Navbar
- Navs and Tabs
- Tabs and Pills Behaviors
- Offcanvas In-Depth
- Pagination
- Placeholders
- Progress Bars
- Stripes And Animation
- Spinners
- Toasts
- Tooltips In-Depth
6- Utilities in Bootstrap5
- Backgrounds
- Borders
- Text color
- Text Opacity
- Displaying Inline and Block
- Flex
- Interactions
- Opacity
- Overflow
- Position
- Bootstrap Icons
Sass Library: Learning it helps organize our CSS code through the use of variables, functions, Mixins, and nested style, which makes website development more effective and fast.
- Introduction to Sass
- SASS Compilation Tools
- Import And Use And Advanced Architecture
- Variables
- Nesting And Parent Element
- Property Declarations And Placeholder
- Control Flow – If And Else
- Create Triangle With If And Else
- Interpolation
- Comments And Documenting
- Mixin And Include
- Loop – For
- Loop – Each And Map
- Loop – While
- Create Bootstrap Grid System
- Function
- Practice Mixin With Content
Typescript Language: Typescript language: It adds a layer of diversity and strength to the JavaScript language, as the JavaScript language does not depend on OOP, so TypeScript came and added this power to it.
- Introduction And What Is Typescript
- Install Typescript And Transpile Files
- Create Configuration And Watch Files
- Statically vs Dynamically Typed Languages
- Type Annotations And Any Type
- Type Annotations With Arrays
- Type Annotations With Multi-Dimensional Array
- Type Annotations With Function
- Optional And Default Parameter
- Function Rest Parameter
- Type Annotations With Anonymous And Arrow Function
- Data Types – Type Alias
- Data Types – Type Alias Advanced
- Data Types – Literal Types
- Data Types – Tuple
- Data Types – Void And Never
- Data Types – Enums Part 1
- Data Types – Type Assertion
- Data Types – Intersection And Union Types
- Type Annotations With Object
- Interface Declaration
- Interface Methods And Parameters
- Interface ReOpen And Use Cases
- Interface Extends
- Interface Final Discussion
- Class Type Annotations
- Class Access Modifiers
- Class Accessors
- Class Static Members
- Class Implements Interface
- Abstract Classes And Members
- Polymorphism And Method Override
- Generics Introduction
- Generics Multiple Types
- Generics Classes
- Generics And Interfaces
Course Topics
jQuery Library
- Syntax
- jQuery Effects
- jQuery DOM
- jQuery Navigation
Bootstrap Library:
- Getting Started to bootstrap5
- Layouts in Bootstrap5
- Contents in Bootstrap5
- Forms in Bootstrap5
- Components in Boostrap5
- Utilities in Bootstrap5
Sass Library :
- Introduction to sass
- Variables
- Property and placeholders
- Control flow
- Loop
- function
Typescript Language:
- Introduction
- Type Annotations
- Data Type
- Function
- Interface
- Class
- Abstract
- Polymorphism
- Generic
Duration
Lectures
30
Start Date
01 May, 2024