Web Dev Notes
Web Dev Notes
HTML
CSS
1) CSS – Cascading Style Sheets.
2) CSS help us to style our site.
3) We can add CSS to HTML also & in a new file.
4) To change something to something we have to target it & and then
write the CSS code body {
Background-color – red;
}
5) To change background color, we use the color element.
6) To write CSS in HTML file we have to add <style></style> after the
element.
7) Types of CSS – Internal & External Sheets.
8) Viewport – Viewing website on.
9) Padding gibes space between the text and border.
10) CSS also have Margin, Border etc.
11) Span is inline display element.
12) By span we can target into a paragraph text or anything.
13) Common Inline Element are span, image, anker tag.
14) To target the class, we first have to give dot and then the
class name.
15) To hide elements on web page we use (display: none) and
(visibility: hidden;)
16) The visibility hides the element but show actual place where
it was first display
17) The order of code comes from the HTML code.
18) Every HTML element is treated by just by our CSS.
19) When we change height or width of div it pushes the other
div or content.
20) HTML also have the divs.
21) Width and Height can be write in px, percent, rem, em.
22) When we write the width of the div = 20% the div will take
the 20% of the screen.
23) We can also specify the border of the element.
24) When the height & width of element is 300, 300 respectively.
When add border of 300 by 300 px but the size of the div will
remain the same.
25) We should always specify the unit of the number.
26) Without CSS HTML element already has predefined rows for
how it should be display on our web page even if we don’t have any
CSS.
27) Inline CSS property takes that much height & width that of
the element.
28) On screen we have x,y and z axis.
29) Position example are Static, Reletive, Absolute, Fixed.
30) All HTML element are by defult Static.
31) Reletive Positing means we can set the position by our own.
32) Absolute value change the flow of the HTML flow.
33) Text-align center makes the text or image to the center.
34) Important decision is to choose the font family.
35) To change the font family simply type the ( font-family: arial;
).
36) By default we have Serif as font family.
37) 100% of font size is equal to 16px.
38) To make the font size dynamic we use percent or em.
39) Pixel is the static value.
40) REM – Root EM.
41) REM is easy to debug and doesn’t allow the parent work on
font-size.
42) 1 em = 16px.
43) For margin (recommended) px.
44) By auto it will be in the center.
45) By clock-wise sized is fixed.
46) Font-weight can be numerical, keyword or globe.
47) Auto keeps everything at middle.
48) When we specify the line height, we don’t specify the unit.
49) We can float the image to any side.
50) To take text to right, left, to image we use the CSS float
property.
51) When we want only title to right of image, we can use clear
property.
52) When we say float, it means all the text will wrap aroud it.
53) When we say clear it means we don’t want to wrap text
around it.
54) When we gibe class or id to anything so we have to give the
class or id neatly (related to topic).
55) Clear prevents wrapping.
56) Float is commonly used property.
57) The absolute takes the element out of the flow.
58) Bootstrap is Front-end library.
59) CDN – Content Delivery Network.
60) Bootstrap is made by Twitter.
61) Wireframe – Lowed feudality representation.
62) When divs don’t have any content, it will not see at all.
63) Sm – Small, lg – large, xl – extra-large, and md – medium.
64) Location where we create div is very important.
65) Position of any element is also very important.
66) Responsive – Responds to viewport.
67) Total column for the single row is 12 (Twelve).
68) To target id’s we use pound sign or hash tag sign (#).
69) Bootstrap containers are automatically responsive.
70) Bootstrap fluid containers take 100% of the view port. It
adapts to the screen.
71) FAB – Font Awesome Buttons.
72) To comment out in HTML, CSS we can select the text and
hold down Ctrl + /
73) #fffff This is hex code of white color.
74) #000000 This is hex code of black color.
75) #8f8f8f This is hex code of grey color.
76) #ef8172 This is hex code of orangish-red color.
77) Hex code always is in 6-digit alphanumeric code.
78) When we continue style, we have to go by more specific to
less specific way so we can easily change.
79) When we have to give padding top-bottom and right-left we
can use (padding: 0 18px;)
80) When we use 0 as unit, we don’t have to give is unit as I
have done .
81) To rotate image (transform: rotate(20deg) ;)
82) By top view rotation we use ShewY transform property.
83) When the degree is in positive it rotates right and when
degree is in negative it rotates left (right means forward & left
means backwards).
84) Staticly all text is left-aligned.
85) FAS – Font Awesome Symbol.
86) We should apply the custom class or id.
87) By using border radius, we can change the edges of the
image.
88) Carousel is something like slideshow.
89) If we don’t specify any column by default it is 100% of the
screen.
90) Every element on the screen has X & Y index.
91) Z index is advance CSS concept.
92) Default Z index to all HTML elements is zero.
93) Z index is one of many things that affects the static order of
the code.
94) Z index only works when our elements have position.
95) CSS also have media query.
96) The absolute value is 0 for every HTML elements.
97) CSS also have media query.
98) Media query is pure CSS element.
99) The absolute rotation is 0.
100) Code Refactoring = Readability, Modularity, Efficiently,
Length.
101) Our code should be readable by anyone.
102) H1, h2, h3, h4, h5 and h6 by writing this heading and then
giving curly braces all the styles are applied to this heading.
103) When we have to give class to something, we can give it
section id.
104) We can combine CSS selectors.
105) When we are combining selector the space between two
selectors is optional.
106) Heierchal Selector Example =
#title, container – fluid {
padding-top: 3%;
}
107) Multiple Selectors are selected by giving comma between
them.
108) In heroical Selector space is important.
109) Highrokie is read from right to left.
110) Combined selected has no space.
111) When we add two style elements to the same style then it will
apply the second style.
112) Class is more specific than HTML element.
113) Ids are more specific than HTML element.
114) Inline style is more specific than all classes, ids and HTML
elements.
115) We can give a multiple class to the HTML elements.
JavaScript
1) JS – JavaScript.
2) The language that which powers the web is JavaScript.
3) Before the Browser Internet Explorer there was Moosic Browser.
4) Netscape shares 80% of Browsers shares.
5) Brendan Eich created JavaScript in 10 days.
6) When Brendan Eich created JavaScript is was actually called
LiveScript.
7) ECMAScript – (previous name of JavaScript European Computer
Manufactures Association.)
8) Before the ECMAScript the JavaScript was named Jscript.
9) JavaScript is interpreted programming language & Java is
compiled programming language.
10) Message
|
-----------
alert (“Hello”);
------- ---
| |
Function End
11) Keywords are special in JavaScript.
12) The browser identify the key value and the word we want to
display that it the string is made by adding double
quotation mark.
13) When we give quotation mark then it is out of the flow of
code.
14) String is the data type.
15) Data type is almost in every programming language.
16) “HELLO“ – String.
17) String is not interpreted in the code.
18) Number is also the data type.
19) Boolean Values
/\
/ \
True False
20) Boolean datatype descripted either value true of false.
21) When we type alert keyword the browser under stand that
we want pop-up.
22) Different pieces of Data have difference data type.
23) Prompt is somewhat similar to pop-up.
24) Var myName=”Vinod”;
25) | | |
------- --------- -----------
Keyword Name Value
(variable)
26) Var = variable.
27) When we want to change the variable or decide the variable
is classed var.
28) JavaScript doesn’t care about the name of the variable.
29) Alaway’s we have to give meaning full name to the variable
so other member can understand easily.
30) Variable cannot start with the numbers.
31) Our Variable should not be start with var.
32) Variable only contains – Letters, Numbers, Dollar Sign ($)
and Underscore (_).
33) Var myName = ”Vinod”’;
|
--------------
Camel Casing.
34) We can add string by plus sign ( + ).
35) String is added by special feature of programming called
Concatenation.
36) To know the exact letter that are there in the string we type
var name.lenght.
37) Without JavaScript world is not possible.
38) V I N O D
--- -- --- --- ----
| | | | |
0 1 2 3 4
============
Counting system in JavaScript.
39) Function to slice the string ~~~ something slices.
40) Programmers always count from Zero (0)
41) toUpperCase function changes all of letter to uppercase.
42) toLowerCase function changes all of letter to lowercase.
43) * Astrikes.
44) Addition is done by add sign (+).
Subtraction is done by subtract sign (-)
Multiplication is done by multiply sign or astrikes (*)
Division is done by forward slash (/)
45) Modulo operator is weird operator in JavaScript.
46) Modulo operator = (%).
47) Normal math operator in JavaScript are (+), (-), (*), (/),
(%).
48) x++ is same to x = x + 1 (Increment Expression).
49) x—is same to x = x – 1 (Decrement Expression).
50) Increment & Decrement changes the value of variable & add
1.
51) If we want to add 2 to the variable the code is as follows
var x = 5;
x + = 2; //7
52) Packaging is done by curly braces {}.
53) Using a function is known as calling the function.
54) Functions are also written by camelCasing.
55) We have to give meaningful names for function.
56) JavaScript function should be closed by semicolon (;).
57) DRY – Don’t Repeat Yourself.
58) To keep our code, we use the function.
59) Return is the keyword.
60) (math.round) is more mathematically correct.
61) (math.round) round the nearest whole number.
62) To write random number code as follows
math.random();
63) Random number generated by math.random is digit decimal
number.
64) (If, else) keyword are known as control flow.
65) Equality sign in JavaScript (===).
66) !== is not equal to.
67) > is greater than.
68) < is lesser than.
69) >= Is greater or equal to.
70) <= is lesser or equal to.
71) && and
72) || or
73) Array is collection of items.
74) To get item from array we use square bracket.
75) Multiple of three is – Fuzz.
76) Multiple of five is – Buzz.
77) Multiple of both 3 & 5 is FizzBuzz.
78) To put item is array the code is as follows we use (.put)
method.
79) (.pop) method removes the item from the array.
80) Order of (if else) statement matter huge deal.
81) Simplest type of loop is white loop.
82) While loop generally create error.
83) For loop works similarly like While loop.
84) We can add inline, internal & external JavaScript in our
websites.
85) Inline JavaScript is not very modular & difficult to debug.
86) To add JavaScript internally we use script tag the code is as
follows
<script></script>
87) The position of JavaScript external link in the HTML document
is very important.
88) We have to add the JavaScript tag before the closing body
tag.
89) DOM = Document Object Model.
90) Query Selector selects the object.
91) Objects inside the DOM have property & method.
92) When we assign value using equal to we set property to set
property or setter property.
93) Method is a thing that only objects can do.
94) Properties of button include like
.innerHTML
.style
.firstChild
95) To get properties we use period (.).
96) Methods of Button includes like
.click()
.append()
.setAttribute()
97) We can access properties & method using dot notation (.).
98) Text content is also use for adding text to element.
99) .setAttribute has two parameters
Attribute
Change in to
100) Script are placed at the end of the body tag.
101) The event target method add eventListner set up a function to
be called Whenever the specific event is delivered the target.
102) Listener is usually JavaScript function.
103) Anonymous function does not have name.
104) Function is denoted by (f) sign.
105) Higher-order function are functions that can take the function
as input.
106) new.Audio(); creates new audio element.
107) (this) identifies the elements.
108) In constructor function name is capitalized it does not use
camel casing.
109) Switch statement is somewhat similar to if else statement.
110) Events are always in lowercase.
jQuery
1) jQuery is JavaScript library.
2) jQuery is invented by John Resig.
3) Position of jQuery tag is very important.
4) (.css) fiction is use to change the CSS property.
5) (.addClass) adds the class to the selected elements.
6) (.removeClass) removes the class to the selected elements.
7) (.has class) method checks if the selected elements have that class
or not and returns the Boolean Values.
8) (.text) method changes the text of the selected elements.
9) (.html) method changes the HTML of the selected elements.
10) In jQuery method are use lot.
11) (.attr) gives the attribute of the selected elements.
12) Second input in (.attr) method set the value.
13) (.class) gives all the class of the selected elements.
14) To add thing before the selected elements (.before) method
is use.
15) To remove thing before the selected elements (.after)
method is use.
16) (.prepend) method add the elements into selected elements
(before the elements)
17) (.append) method add the elements into selected elements
(after the elements).
18) (.remove) method removes the all selected elements.
19) (.hide) method hides the selected elements.
20) (.show) method shows the selected elements.
21)