Requirements

• Basic Computer Knowledge
• No previous development experience required
• Access to various open-source (free) software.

Course Content

Course Introduction (FREE SESSION)

• How does the Internet work?
• Clients-Server Architecture
• Network Security
• Website Basic Structure Analysis and Concept of Webpages
• What are HTML, CSS, and JS and their importance?

Setup Environment

• Editors Introduction
• Setup Editor
• Configurations to boost productivity

Basic HTML Concepts

• Fundamentals of HTML
• Basic HTML tag structure
• More Tags: div, Span, p, a, ul, ol, li, header, footer, section, main, article, h1-h6, aside, tables

Advanced HTML Concepts

• Images
• Forms, Buttons, Input, Checkboxes, Radio Buttons, Select options
• Video, Audio, Source
• Doctype and Meta Tags
• Validating HTML
• Browser Support and Elements Deprecation
• Chrome/Firefox DevTools to improve productivity

Introduction to Cascading Style Sheets (CSS)

• What is CSS and What’s important?
• Elements of CSS
• Cascading Order to add CSS!
• Text, Hyperlinks, Font, Colors, Backgrounds, Borders
• Margin, Paddings, and Floating

Advanced CSS

• Flex, Absolute and Relative Positioning, Z-Index
• Pseudo-states and Elements
• Viewpoint width and height, overflowing content
• Geometry and Transition property
• Animation of objects
• Media Query

Basic JavaScript

• Introduction to JavaScript
• Script connection with webpages
• Alerts and console logging
• Understanding of Variables and Its types
• Undefined variables and modifying values of variables
• Boolean operators
• Comparing values
• Decision-Making Statement: If, Switch
• Loops: For, While & Do While and for Each
• DOM Introduction
• DOM Event handling
• DOM Functions, get and inset values from HTML tags

Advanced JavaScript

• Arrays
• Functions: parameters and non-parametric
• Return and non-return function
• OOP Concept and Classes Introduction
• Constructor, Objects, instance variables, and static variables
• Static and Inheritance

Bootstrap

• Introduction and Its Importance
• Understanding of Grids
• Bootstrap setup
• Containers, Navbar, Forms, Buttons, Badges
• Progress Bar, Pagination, Dropdown, Toast and Flex

Getting Started with jQuery

• Introduction
• Install, Configuration and jQuery Syntax
• preventDefault, Selectors and Event Handling,
• Events: Hide/Show, Fade, Slide, Animate, Stop, CSS
• jQuery Callback and Chaining
• AJAX Introduction
• AJAX with jQuery

Sass

• Introduction
• Install, Configuration and Sass Syntax
• Variables, Nesting, Import, extends, Function
• Sass compiling to CSS

Workshops

• JSON & API: Introduction and Implementation of API with Data mapping

Project #1 - Business/Ecommerce Website Design using Adobe XD/Figma
Project #2 - Google Chrome Extension