About Course
The Full Stack Web Development Course provides a comprehensive learning experience in building dynamic and responsive web applications. This course covers:
- Front-End Technologies:
- HTML & CSS: Core web markup and styling skills.
- JavaScript: Fundamental programming for interactivity and client-side logic.
- Bootstrap & Tailwind: Modern CSS frameworks for responsive design.
- Sass: Preprocessor for more efficient and organized styling.
- React: Component-based JavaScript library for creating complex user interfaces.
- Back-End Technologies:
- Node.js: JavaScript runtime for server-side development.
- Express: Web application framework for handling requests and building APIs.
- Database Management:
- MongoDB: NoSQL database for handling large volumes of unstructured data.
- CRUD Operations: Techniques for managing data (Create, Read, Update, Delete).
- API Design: Best practices for designing robust APIs for data handling and integration.
- Development Tools:
- VS Code: Code editor with tools and extensions for efficient development.
- Terminal: Command-line usage for executing tasks and managing files.
- Git & GitHub: Version control for tracking changes and collaborating on projects.
This course equips students with a solid foundation in full-stack web development, empowering them to build complete, data-driven web applications and gain skills that are highly valuable in the tech industry.
Course Content
Getting Started
-
Introduction
22:00 -
Roadmap
05:15 -
VS Code Crash Course
01:29:48
Learn HTML
-
Introduction
02:43 -
Creating HTML Files
07:31 -
HTML Elements (Tags)
06:00 -
Document Structure
06:39 -
Headings and Paragraphs
09:38 -
Comments, Line Breaks and WhiteSpaces
08:00 -
HTML Attributes
04:40 -
HTML Images
06:13 -
HTML Links (Anchor Tags)
18:17 -
HTML Lists
09:38 -
HTML Tables
11:23 -
HTML Forms – Part 01
08:12 -
HTML Forms – Part 02
12:00 -
HTML Form Submission
10:16 -
Media – Video and Audio
05:00 -
Divs and Spans
08:00 -
Semantic HTML Elements
04:31 -
Block VS Inline Elements
06:51
Learn CSS
-
Introduction
06:24 -
Inline CSS
06:20 -
Internal CSS
04:34 -
External CSS
05:15 -
CSS Selectors
14:45 -
CSS Colors
25:00 -
CSS Backgrounds
13:49 -
Box Model
04:13 -
Borders
13:24 -
Padding
06:06 -
Margin
05:00 -
Text Formatting
12:48 -
Google Fonts
09:11 -
Icons
10:17 -
Styling Links
07:04 -
Styling Lists
04:24 -
Styling Tables
08:21 -
Transitions
11:04 -
Animations
10:45 -
Flexbox introduction
04:23 -
FlexBox – practical
21:08 -
CSS Grid
18:24 -
SASS
31:02
Learn Bootstrap
-
Introduction of Bootstrap
08:35 -
Setting-up
11:53 -
Typography
15:12 -
Bootstrap Colors
07:22 -
Bootstrap Buttons
12:57 -
Utility Classes
21:27 -
Bootstrap Container VS Container Fluid
00:00 -
Bootstrap Grid
13:57 -
Images
03:56 -
Bootstrap tables
06:42
Project – Fully Responsive Website
-
Project Introduction
02:47 -
Navbar
23:52 -
Hero Section
14:30 -
Newsletter Section
08:09 -
Popular Courses Section
09:09 -
Popular Courses Section – Part 2
22:08 -
Pricing Plan Section
17:14 -
Learn Section
11:16 -
FAQ Section
07:11 -
Contact Information
10:09 -
Footer Section
04:24 -
Bootstrap Modal and Forms
10:46
Learn Tailwind
-
Introduction
10:00 -
How to setup tailwind project
07:39 -
Utility Classes
06:00 -
Tailwind Colors
21:00 -
Container and Spacing
21:00 -
Tailwind Typography
28:00 -
Sizing
22:38 -
Layout and Position
17:32 -
Backgrounds and Shadows
16:30 -
Borders
22:00 -
Filters
13:14 -
Interactivity
19:00 -
Breakpoints
07:47 -
Columns
05:14 -
Tailwind Flexbox
14:20 -
Tailwind Transitions
08:40 -
Tailwind Animations
08:24 -
Better Development Environment
19:55
Tailwind Project 01
-
Project Setup
10:20 -
Creating Navigation
15:21 -
Creating a Hero Section
05:18 -
Instructors and Learners Section
12:33 -
Recent Courses Section
23:36 -
View All Courses Card
04:49 -
Courses Page
08:46 -
Single Course Details Page
06:26 -
Completing course details page
36:04 -
Add Course Page
27:13
Learn JavaScript
-
Introduction
21:49 -
Setting up JavaScript
08:00 -
JavaScript Code Files
00:00 -
Console
14:08 -
JavaScript Comments
05:27 -
Variables – Theory
09:47 -
Variables – Practical
11:34 -
Data Types
13:40 -
Type Conversion
10:42 -
JavaScript Operators – Theory
18:39 -
JavaScript Operators – Practical
16:57 -
Strings
00:00 -
Math Object
07:27 -
Dates
00:00 -
Arrays
08:24 -
Array Methods
11:55 -
Array Nesting, concatenation and spread
12:59 -
Objects
11:36 -
Destructuring
10:15 -
JSON
13:00 -
Basics of Functions
14:27 -
More on Function Parameters
08:22 -
Function Expression
03:00 -
Arrow Function
05:00 -
IIFE( Immediately Invoked Function Expression
03:10 -
If statements
00:00 -
If else statement
06:37 -
Else if and Nested If
11:30 -
Switch Statement
07:45 -
Ternary Operator
04:49 -
For Loop
09:40 -
Break and Continue
04:50 -
While and Do While Loop
07:11 -
For Of Loop
05:35 -
For in loop
04:41 -
Array.Foreach Method
06:00 -
Array.map method
07:28 -
Array.Filter method
00:00
Learn DOM (Document Object Model)
-
Introduction
00:00 -
Selecting DOM Elements
21:52 -
Changing the content of Elements and Attribute Values
14:57 -
Changing the style of element
09:00 -
Creating New Attributes
09:15 -
Events and Event Listerners
13:00 -
ClassLists (Add, Remove, and Toggle)
11:15 -
Creating New HTML Elements
08:33 -
Navigating Between DOM Elements
11:15
JS Project 1 – Responsive Menu (Hamburger Menu)
-
Project Intro
01:10 -
HTML Part
06:33 -
CSS Part
23:00 -
JavaScript Part
11:00
JS Project 2 – Sidebar Project
-
Project Introduction
02:00 -
HTML Part
09:25 -
CSS Part
21:19 -
JavaScript Part
08:28
JS Project 3 – Counter Application
-
Project Intro
01:06 -
HTML Part
03:46 -
CSS Part
08:17 -
JavaScript Part
12:48
JS Project 4 – Notes Taking Application
-
Project Intro
02:19 -
HTML and CSS Part – Layout
21:30 -
Javascript Part 1 – Adding, removing and editing notes
19:19 -
JavaScript Part 2 – Saving Notes To Local Storage
17:53
JS Project 5 – Animated Login Form
-
Project Introduction
01:00 -
HTML and CSS Part
17:53 -
JavaScript Part
12:00
JS Project 6 – Password Length Checker
-
Project Intro
01:00 -
HTML and CSS Part
17:15 -
JavaScript Part
12:00
JS Project 7 – Text To Speech Convertor
-
Project Intro
01:14 -
HTML & CSS Text To Speech App
16:16 -
JavaScript Part 1 – Convert text to speech
11:00 -
JavaScript Part 2 – Add Voices
12:12 -
JavaScript Part 3 – Adding Pause and Resume
08:00
JS Project 8 – Random User Generator
-
Project Introduction
01:00 -
HTML and CSS
10:41 -
JavaScript Part
24:14
Learn Git & GitHub
-
Introduction
10:24 -
Downloading and Installing Git
05:00 -
Git configuration
02:33 -
Basic Windows Commands
13:24 -
Git Workflow
16:38 -
Undo changes – Part 1 – Working Area
04:34 -
Unstaging files
05:51 -
Reset Commit
06:44 -
Git Ignore (.gitignore)
03:56 -
Git Branching
21:10 -
Merge Conflict
06:41 -
Use VSCode instead of terminal – GUI
07:08 -
Creating github account
08:47 -
First GitHub Repository + Local Repository
15:10 -
Cloning Remote Git Repository
04:18 -
Git Push, Pull and Fetch
07:47 -
Pull Request and Merge
09:38
Learn React
-
Introduction
00:00 -
Creating First React App
10:25 -
React Folder Structure
09:00 -
Removing some unwanted files
03:45 -
Creating React Component
10:42 -
Challege – Components
13:00 -
JSX and Its Rules
08:15 -
Expressions in JSX
05:14 -
Challege – JSX Expressions
10:43 -
Rendering a List
12:43 -
List Challenge
08:08 -
Destructuring
03:15 -
Props
09:17 -
Props Challenge
08:18 -
Children Props
04:47 -
Condtional Rendering
10:00 -
Challenge – Conditional Rendering
19:19 -
Styling components
15:30 -
Bootstrap + React
05:29 -
Tailwind + React
07:00 -
Daisy UI
10:09 -
FlowBite React
08:51 -
React Icons
03:25 -
Events
09:53 -
useState Hook
00:00 -
More on useState Hook
00:00
Iftiinshe Academy -React Project
-
Project Setup
06:12 -
Adding Tailwind and Git
07:14 -
Downloading Theme Files
03:10 -
Starting Home Page
08:42 -
NavBar Component
06:28 -
Hero Component
06:25 -
Cards Wrapper Component
10:12 -
Course Listings and Course Listing Component
06:40 -
Rendering Courses Info from JSON File
09:34 -
Limit Courses to only 3
03:26 -
Toggle Description – useState Hook
09:00 -
Adding Icon – React Icons
04:18 -
React Router Setup
17:00 -
Link Component
12:00 -
Not-Found Page
07:19 -
Active Links
08:00 -
Courses Page
08:13 -
Introduction about API
06:06 -
JSON Server
05:39 -
Data Fetching From an API – useEffect
14:49