Skills to learn
1. HTML
a. Heading
b. Paragraph
c. Anchor
d. Image
e. Division
f. Span
g. Input
h. Label
i. Button
j. Ordered List
k. Unordered List
l. Tables
m. iFrame
n. Textarea
o. Inline and Block
2. CSS
a. Color
b. Background color
c. Opacity
d. Border Radius
e. Border
f. Width
g. Height
h. Font size
i. Font weight
j. Justify content
k. Font family
l. Z-index
m. Margin
n. Padding
o. Shadow
p. Display
3. Bootstrap
a. Integration with HTML
b. Breakpoints
c. Color
d. Grid System
e. Buttons
f. Input group
g. Cards
h. Tables
i. Images
j. Flex
k. Rounded
l. Border
m. Typography
n. Navbar
o. Carousal
p. Dropdown
q. Modal
4. Javascript
a. Variables
b. If else
c. For loop
d. Functions
e. Scopes
f. Arrays
g. JSON
h. DOM
i. BOM
j. Basic Regex
5. Node.js
a. Event Listeners
b. Async await
c. Axios
d. Fetch
e. Promises
f. Callback
g. Node Modules
h. Import Export
i. Express
j. Fastify
k. Swagger
6. Rest APIs
a. Endpoints
b. GET
c. POST
d. PUT
e. Headers
f. Request Body
g. Response Body
h. Query Parameters
7. Postman
a. Collections
b. Code Snippet
c. Workspaces
8. Github
a. Repo Creation
b. Pull
c. Push
d. Merge
e. Branches
f. Collaborations
g. Personal Access Token PAT
9. Firebase
a. Project Creation
b. Integration in Web
c. Authentication
d. Firestore
e. Realtime
f. Storage
g. Hosting
h. Firebase CLI
i. Analytics
10. MongoDB
a. Database Creation
b. Compass Installation and Use
c. CRUD
d. Node.js integration and CRUD
11. MySQL
12. Heroku
a. Account Creation
b. App Creation
c. Node.js app deployment
13. Cpanel
a. Domain Purchase
b. Domain linkage
c. Cpanel Access
d. Emails Management
e. Domain Management
f. Sub Domains Management
g. Wordpress Installation
h. Wordpress Management
i. File Manager
j. Backups
k. Restore
l. Frontend Deployment
m. Backend Node.js Deployment
14. AWS
a. Account Creations
b. Services Summary
c. LightSail
15. Paint.net
a. JPEG, PNG and WebP
b. Resizing
c. Rotation
d. Layers
e. Background Removal
f. Design Basics
16. Figma
a. Software Installation
b. Design Basics
c. Prototyping
d. Plugins Installation
17. Trello
a. Cards Creation
b. Labels Creation
c. Task Assignment
d. Stacks
18. Concepts
a. React
b. Docker
c. Container
d. Kubernetes
e. Postgres
f. Stripe
HTML Learning Content
Preparation:
Video Lecture 01
Video Lecture 02
Tips:
● Press ! and then tab button to autocomplete boilerplate of html document in vs code
● In general, all CSS and font files are placed under <head> tag
● In general, all script files are placed just before closing tag of body </body>
● To run HTML file we first need to install live server extension from plugin store in vs code
Important Tags
1. Headings // block tag and have 6 types h1,h2…… h6
2. Paragraph // block tag
3. Image // inline self closing tag and must have src attribute
4. Span // inline tag
5. Division // inline tag. Used to make divisions or components
6. Anchor // inline tag. Must have href attribute. Used to link to some external link.
7. Ordered List // block tag. Must have list item children tags. Does not have numbering.
8. Unordered List // block tag. Must have list item children tags. Do have numbering.
9. Input // block tag. Used to take keyboard or mouse input from user. Have multiple types.
10. Label // block tag. Used as helping text for input tag
11. Textarea // inline tag. Used to take long input from the user.
12. Button // inline tag. Have some css by default. Used to perform click-able actions.
13. iFrame // inline tag. Used to place external content as it it.
14. Table // inline tag. Have two parts. Header and Body.
Questions
1. What is HTML?
2. What are inline and block tags?
3. What are attributes?
4. What is a self closing tag?
5. What if I put one tag into another tag?
6. Does HTML give errors on console if i have a typo mistake in code?
7. Can I use block tag as inline or inline as block? If yes then how?
8. Can I use paragraph tag as heading and vice versa?
9. Can I use div or span tag as heading or paragraph tag?
10. Can anchor tags be used to open links in a new tab instead of the current tab?
11. Can I use an external link in the src of the image tag?
12. What is the purpose of the division tag?
13. Can I use Alphabets instead of numbers in an ordered list?
14. What are different types of input tag?
15. How do I create a table?
16. Can I place multiple headers in a table?
17. Can I use attributes of one tag into another tag?
18. Do we have some attributes which are common in all tags? If yes please name some of
them?
CSS Learning Content
Tip
No need to master CSS as it has a huge set of properties. You have to just practice the
following most used properties.
Some Most Used Properties
1. Color
2. Background color
3. Opacity
4. Border Radius
5. Border
6. Width
7. Height
8. Font size
9. Font weight
10. Justify content
11. Font family
12. Z-index
13. Margin
14. Padding
15. Shadow
16. Display
17. Gradient
18. Background Image
19. Height: 100vh
Questions
1. What are three methods to add css in an HTML file?
2. What css stands for?
3. What if I have multiple css applied on the same HTML tag?
4. What is the purpose of !important?
5. What are different units of sizes? Like px for pixels and there are some more like rem etc
6. How to use custom fonts?
7. How can I make a tag to take full height and full width?
8. What is margin and padding?
9. What is the command structure of giving borders to any tag?
10. What is the purpose of z-index?
Bootstrap Learning Content
Preparation
Udemy Account Details
Username manshoor110@gmail.com
Password P@kistan1
Course Link Is This
Zoom Meetings
Some basic concepts
First Website Development Part 01
First Website Development Part 02
Bonus Content
Bootstrap Landing Page Video Tutorial From Scratch in 30 mins
Image files link used in the above tutorial
Instruction: Above 30 min video can change the next 30 years of your life so please watch it
accordingly. If needed, practice multiple times.
Topics to cover from Udemy Bootstrap Course
1. Section 1
2. Section 2
3. Section 3
4. Section 4
5. Section 5
○ Alert [39 - 40]
○ Button [43 - 46]
○ Card [47 - 51]
○ Dropdown 64
○ Modal 87 and the [92 - 95]
○ Navbar [96 - 106]
6. Section 6
○ Colors and Background 139
○ Stacks 143
7. Section 7
○ Background, Colors, Text, Borders [148 - 161]
○ Flex [162 - 174]
Questions
1. How do you add bootstrap to HTML?
2. What is the purpose of popper js? What is its link with dropdown?
3. Does the order matters in adding scripts of bootstrap?
4. What is a grid system? How many columns does one row have?
5. Can I add more than 12 columns in one row?
6. What is the main purpose of bootstrap?
7. What is responsiveness?
8. What is the difference between container and container-fluid?
9. Do different classes of bootstrap have default padding and margin?
10. How can I use the docs of bootstrap?
11. How can I use custom fonts using CDN?
12. How can I align items vertically center?
13. How can I give a custom color to tag having some bootstrap color class?
14. What is new in Bootstrap 5?
15. What are different breakpoints and what is their purpose?
16. How can we hide some content from some breakpoints?
17. What If I add 14 columns in one row?
Javascript Learning Content
Preparation
Tutorial Video Link 01: https://www.youtube.com/watch?v=2ndFMZ4lXMY&t=2744s
To start the video, we must have installed VS Code in your system. Download link of VS Code
for windows is https://code.visualstudio.com/sha/download?build=stable&os=win32-x64-user
Zoom Recorded Meetings
Javascript 01
Javascript 02
Javascript 03
Javascript 04
Javascript 05
Important topics to cover
1. Link Javascript to HTML
2. Variables and Data Types
3. Arrays and Builtin Methods
4. Objects
5. Comments
6. DOM Only how to get value from tag and modifying CSS in javascript
7. BOM Only Pop Alerts and TIming
8. Conditional Statements
9. Operators
10. Functions
11. Loops
12. Date and Time
13. Regular Expressions
14. OOP
15. Closure
16. Javascript Application Not Required
17. The ES6 Version of Javascript
Questions
1. How to write javascript code directly in an HTML file?
2. How to write javascript code in .js file and then link this .js file to HTML?
3. How do we use console.log()? Can it print multiple variables at the same time?
4. What variable types are there?
5. What is global and local scope?
6. How do we create arrays?
7. Can one array contain multiple value types?
8. How can we access different array elements?
9. How can we assign or change values of particular elements of an array?
10. How do we get the length of an array?
11. What are different built-in methods of array?
a. pop() => removes last element from array
b. push(value) => inserts element at the end of array
c. slice(start, end) => creates sub-array
d. splice(index, how many, item1,item2,.....itemN) => remove and insert elements
at the same time
e. sort() => sort array in alphabetically order
f. reverse() => inverts the array
g. filter(function()) => filter array based on some condition
h. every(function()) => return true or false based on condition on all elements
i. map(function()) => returns new array by applying operation on each element
j. reduce(function()) => used to find sum, average, max and min
k. concat(array1, array2,....arrayN) => concatenates two arrays
l. fill(value) => updates value of all elements
m. join(separator) => returns a concatenated string based on all elements
n. forEach(function()) => calls function for each element of array
o. includes(value) => returns boolean to find a specific string or value
p. find(function()) => returns value where ever finds first
q. findIndex(function()) => returns index where ever finds first
12. How to create JSON objects?
13. How to access, update, delete and insert into a JSON object?
14. How do we create a JSON array?
15. How to access, update, delete and insert into different JSON objects of a JSON array?
16. How to convert JSON objects into String and vice versa?
17. How do we do single line or multiline comments?
18. What is DOM?
19. How do we access values from HTML tags into a .js file?
20. How do we use DOM to apply CSS styles on HTML tags from javascript?
21. How to write if and else statements? What are possible conditional statements?
22. How to write a ternary if else statement?
23. How to deal with null or default values?
24. How to write multiple conditions in a single if statement?
25. How to write a switch statement?
26. What if I skip the default case in the switch statement?
27. How can i decide to use between if else or switch statement?
28. How to write a for loop? What are two types? In for loop and of for loop?
29. How to write while loop?
30. How can I decide whether I should use for loop or while loop?
31. How to create HTML tags from javascript?
32. How to assign class names to HTML tags from javascript?
33. How to assign attributes to HTML tags from javascript?
34. How to append, insertAtEnd, remove and replace a child of an HTML tag from
javascript?
35. What is BOM?
36. How many types of pop alerts are there and how to use them?
37. What is setInterval and setTimeout? How to use them?
38. What is the difference between setTimeout and setTimeInterval?
39. How to write a function?
40. How to pass parameters in a function?
41. Can we make multiple functions with the same name in the same file?
42. Can I pass less or more parameters in a function?
43. How can i set default value of parameter in a function if parameter is not passed in
function call?
44. Can I return multiple values in return of function?
45. Can I save a function in a variable? If yes then how do i pass parameters and make
function calls?
46. How do I get the current date and time?
47. How to get the current month? Is there something special in it?
48. What is regex and why is it used?
49. What is the writing structure of regex?
50. How do we do phone, name and email validation using regex?
51. How can we do password validation? Let's say a user is allowed to enter a password of
length 8 and at least one character must be capital and one must be a special
character?
52. What are classes? Why do we use them?
53. What are getters and setters?
54. What are constructors?
55. How do we access functions defined inside a class?
56. What is a closure function?
57. How do we use the Math Random function to generate random numbers?
58. What are the main changes proposed in ES6?
59. Which ES version do you use?
Postman and Rest APIs Learning Content
Preparation
Zoom Meetings
Basic Concepts
Postman Hands-on
API Calls from Javascript and data insertion into table and graphs
Weather Application Learning Content
API LINK https://open-meteo.com/en/docs
Zoom Meetings
VS Code Important Extensions and Weather API Initial Setup
Web App Development Part 01
Web App Development Part 02
Deployment on Netlify
Working Demo
Firebase Learning Content
Working Demo
Source Code
Firebase Documentation Link
Zoom Meetings
Meeting Link 01
Meeting Link 02
Meeting Link 03
Meeting Link 04
Meeting Link 05
Node.js Learning Content
Zoom Meetings
Meeting Link 01
Meeting Link 02
Figma Learning Content
Zoom Meetings
How to add and use custom fonts in HTML file?
Figma Basics
Wordpress Learning Content
Zoom Meetings
Wordpress Basics
Editing with WP Bakery or JS Composer Basics
Cpanel Learning Content
Zoom Meetings
How to buy domain and hosting?
Cpanel basics
Idara e Khudi Project
Zoom Meetings
Database Structure 01
Database Structure 02
Project Initialization
Admin login and registration
Github Repo Basics
Github Collaboration and Admin LTE theme import
Side Menu Navigation and Linking
Firebase Storage, Dropdown
Orphan Page Complete
Issue in multiple images upload
Addressing some common mistakes
Page Refresh, Sweet Alert, Font Awesome Icons, Delete Firestore Document
Implementation of filters on table
Implementation of dynamic dropdowns
Implementation of City, Province and Country
Save data in multiple collections and use of foreign keys and primary keys
Dashboard Development
SELF ASSESSMENT DAY (20th March, 2023)
mzawarulhassan@gmail.com
shoaib.jafferi@gmail.com
Following are the content which we have learned in roughly 10 days
Topics Covered
HTML
CSS
Bootstrap
Javascript
Node.js
Express.js
Rest API
Postman
Firebase
Zoom Meetings
Total 24 meetings
Total 15 watchable hours
Projects Developed
Cars Showroom
Construction Company Landing Page
Weather API Simple
Weather API Advance
User Management Mini App Firebase based
Node.js based GET and POST on local server
