This is a repository for training persons interested in web development with a sole focus on JavaScript
- Purchase app
- Counter app
- Calculator app
- Registration Form
Here we learn how to create webpages from scratch using the most current standard in HTML ⇒ HTML5.
a. Introduction to Html b. Manuals and specification c. Code Editors
a. Document Type Declaration b. Html Structure (opening and closing elements) c. The HTML Element d. The Head Element e. Element Attributes f. Basic Html Tags (headings, paragraphs, breakpoints,lists, strong, div, section etc) g. Hyperlink or Anchor element h. Images and Videos i. Comments j. Whitespace k. Good Code Structure (indentation)
a. The Table Element
b. Table head
c. Table body
d. Table Footer
e. Table Row
f. Table Heading (th)
g. Table data
h. Table elements attributes (border, colspan, etc)
a. The Form Element b. Label c. Input d. Types Of Input e. Select f. Textbox g. Datalist h. Form elements Attributes (onsubmit, method, action, required, etc) i. Html form validation
a. Element Placement
b. Figure and Figcaption
c. Aside
d. Section
e. embedding media
Here we will learn how to beautify or add styles to web pages with the most current version of CSS ⇒ CSS3.
First Two Weeks For Learning about raw css. Last Two Weeks For Learning about a selected css library (etc material, bootstrap, tailwind etc) .
a. Introduction to CSS
b. Manuals and specification
c. Code Editors
a. Simple Selectors
i. Element
ii. Class
iii. ID
iv. Universal Selectors ( , ns|, |* )
b. Combinators & Multiple Selectors
i. Group of selector [A, B]
ii. Descendant selector [A B]
iii. Child selector [A > B]
iv. Adjacent sibling selector [A + B]
v. General sibling selector [A ~ B]
c. Attribute Selectors
d. Pseudo-class Selectors
e. Pseudo-element Selectors
a. CSS Variables
a. Colors
b. Length, sizes and numbers
c. Pre-Defined Options
d. Functions
a. Inline styles
b. IDs
c. Classes, attributes and pseudo-classes
d. Elements and pseudo-elements
a. Content
b. Padding
c. Borders
d. Fill Areas
e. Margins
f. Box Sizing
g. Background
h. clip-path
a. Typography
b. Lists
c. Links
d. Media
e. Forms
f. Tables
g. Buttons
a. Normal flow
b. Display properties
i. Block.
ii. Inline.
iii. Inline-Block.
iv. Flexbox.
v. Grid.
vi. Table.
c. Floats
d. Positioning
i. Default ( no property specified or Static ).
ii. Relative
iii. Absolute
iv. Fixed.
v. Sticky.
vi. Stacking Content ( Z-Index property ).
e. Multiple-column layout
a. Media Queries
b. Responsive Images
c. Common Responsive Patterns
i. Mostly Fluid.
ii. Column Drop.
iii. Layout Shifter.
iv. Off Canvas.
d. Responsive Layout Methods:
i. mobile-first
ii. desktop-first
a. CSS Animations - Transforms:
i. Transform translate().
ii. Transform rotate() and Transform-Origin.
iii. Transform scale().
iv. Transform skew().
v. Transform Shorthand.
b. CSS Animations - Transitions:
i. Transition Duration.
ii. Transition Property.
iii. Transition Timing Function.
iv. Transition Delay.
v. Transition Shorthand.
c. CSS Animations - Keyframes:
i. CSS Animation Keyframes.
ii. CSS Animation Duration.
iii. CSS Animation Fill Mode.
iv. CSS Animation Iteration Count.
v. CSS Animation Delay.
vi. CSS Animation Direction.
vii. CSS Animation Timing Function.
viii. CSS Animation Properties.
ix. CSS Animation Shorthand.
d. CSS Shapes
i. CSS Shapes: the inset() function.
ii. CSS Shapes: The circle() Function.
iii. CSS Shapes: The ellipse() Function.
iv. CSS Shapes: The polygon() function.
v. CSS Shapes: Shapes from the Alpha Channel.
vi. CSS Shapes: Shapes from the Reference Box.
a. Common Preprocessors:
i. SASS.
ii. LESS.
iii. Stylus.
iv. PostCSS.
a. Common naming conventions:
i. BEM.
ii. OOCSS.
iii. SMACSS.
iv. SUITCSS.
v. Atomic.
a. Bootstrap
b. Bulma
c. Tailwind CSS
d. Material Ui
Here we learn JavaScript, starting from scratch and going on to advanced concepts like OOP. We concentrate on the language itself here, with the minimum of environment-specific notes. This section emphasizes on the core javascript regardless of the runtime environment (browser, node, etc)
a. Introduction to Javascript
b. Manuals and specification
c. Code Editors
d. Developer Console
a. Hello World
b. Code Structure
c. Variables
d. Data types (basics)
e. Interaction: alert, prompt, confirm
f. Type Conversions
g. Basic Operators, math
h. Comparisons
i. Conditional Branches (if & ?)
j. Logical Operators
k. Nullish Coalescing Operator (??)
l. Loops (while & for)
m. Switch Statement
n. Functions
o. Function expressions
p. Arrow Functions
q. Javascript Specials And Recap
a. Debugging (In the browser)
b. Coding Style (optional)
c. Comments
d. Good Coding Strategies
e. Automated Testing
f. Polyfills And Transpilers
a. Objects
b. Object references and copying
c. Garbage Collection
d. Object Methods & The “THIS” Operator
e. Constructors & The “new” Operator
f. Optional Chaining (‘?.’)
g. Symbol Type
h. Object to primitive conversion
a. Methods Of Primitives
b. Numbers
c. Strings
d. Arrays
e. Array Methods
f. Iterables
g. Maps and Sets
h. WeakMap and WeakSet
i. Global Object properties (keys, values, entries, etc)
j. Destructuring
k. Date and time
l. JSON methods & toJSON
a. Recursion and stack
b. Rest parameters and spread syntax
c. Variable scope and Closure
d. The Old “Var”
e. Global Object
f. Function Object & Named Function Expressions (NFE)
g. The "new Function" syntax
h. Scheduling (setTimeout and setInterval)
i. Decorators and Forwarding, call/apply
j. Function binding
k. Arrow functions
a. Property flags and descriptors
b. Property getters and setters
a. Prototypal inheritance
b. F.prototype
c. Native prototypes
d. Prototype methods, objects without proto
a. Class basic syntax
b. Class inheritance
c. Static properties and methods
d. Private and protected properties and methods
e. Extending built-in classes
f. Class checking: "instanceof"
a. Error Handling, “Try Catch”
b. Custom errors, extending Error
a. Callbacks
b. Promise
c. Promise Chaining
d. Error handling with promises
e. The Promise API
f. Promisification
g. Micro tasks
h. Async/await
a. introduction
b. Export and Import
c. Dynamic imports
Learning how to manage the browser page: add elements, manipulate their size and position, dynamically create interfaces and interact with the visitor. This section concentrates on the web aspect of javascript with the browser as it’s runtime environment
a. Browser environment, spec
b. DOM
c. Traversing the DOM
d. Searching: getElement*, querySelector*
e. Node properties: type, tag and contents
f. Attributes and properties
g. Modifying the document
h. Styles and classes (html element classes)
i. Element size and scrolling
j. Window sizes and scrolling
k. Coordinates
a. Introduction to browser events
b. Bubbling and capturing
c. Event delegation
d. Browser default actions
e. Dispatch Custom Events
a. Mouse events
b. Moving the mouse: mouseover/out, mouseenter/leave
c. Drag and Drop with mouse events
d. Pointer events
e. Keyboard: keydown and keyup
f. Scrolling
a. Form properties and methods
b. Focusing: focus/blur
c. Events: change, input, cut, copy, paste
d. Forms: event and method submit
a. Page: DOMContentLoaded, load, beforeunload, unload
b. Scripts: async, defer
c. Resource loading: onload and onerror