git init
git add [Link]
git commit -a
git branch -M main
git remote add origin link(path)
git push -u origin main
intellise code
Selectors:
[Link] selector(*)
selects all elements in [Link] for resetting styles or applying general
styles.
[Link] selector(div,p,h1,etc)
select specific html elements based on tag name.
[Link] selector(.class)
selects specific class attributes,denoted by period(.) followed bye class name.
[Link] selector(#id)
selects elements with a specific id,denoted by hash(#) followed by id [Link]
should be unique on page.
[Link] selector([type="text"],[href^="https"],etc)
select elements based on presence or value of attributes,enclosed in square
brackets.
[Link] selector(h1,h2,p,{})
applies the same styles to multiple selectors by separating them with commas.
[Link](div > p{})
selects all elements that are descendants of a specific element (not just direct
child).
[Link](div>p{})
selects only direct children of a specific element(not all descendants)
[Link] Sibling selector(div +p{})
select an element that is directly after another specific elemnt,sharing the same
parent.
[Link] Sibling(div ~p{})
select alkl elements that are siblings of a specified element and come after it.
[Link] classes(:hover,:nt-child,:last-child,etc)
select elements based on a state or position,denoted with single colon.
[Link] Elements(::before,::after,::first-letter,::first-line,etc)
Creates and styles a part of an element,denoted with double colons.
!important
overrides all previous styling rules for a specific property,giving it the highest
precedence.
CSS Positioning(Static,Relative,Absolute,Fixed,Sticky):
[Link](Default Positioning)
This is the default positioning of all [Link] are placed in the normal
document flow(top to bottom).No effect from top,left,rightor bottom properties.
[Link] Positioning:
The elements is positioned relative to its normal [Link] can move it using
top,left,right,or bottom without affecting other elements.
[Link] Positioning:
The element is removed from the normal [Link] is positioned relative to the
nearest positioned ancestor(relative,absolute,or,fixed).If no such ancestors exists
,it is positioned relative to <html>.
Other elements behave as if its not there.
[Link] Positioning:
The element is positioned relative to the viewpoint(browser window).It stays in the
same position even when scrolling.
[Link] Positioning:
The element behaves like relative initially,but when scrolling reaches a certain
point,it sticks to that position.
Require at least one directional property(top,left,right,bottom).
CSS Units:
CSS units define the measurement of properties like
width,height,margin,padding,font,size,etc
two parts
[Link] units
[Link] units
Absoulte units:(fixed and do not change)
these units are not affected by parent elements or screen size
px(pixels)
pt(points)
cm&mm
in(inches)
Relative units:
a)Font based relative units
em-relative to the font size of the parent element.
rem-relative to the root(html) elements font size.
b)Viewport-Based Units(Adapt to screen size)
vw(viewport width)-1vw=1% of the viewports width
vh(viewport height)-1vh=1% of viewport height
c)Percentage units
%-relative to the parent elements size.
It takes the given percentage of parents width.
Media Queries:
Media queries allows you to apply different styles based on the screen
size,resolution,or device [Link] make your websites responsive by adapting
styles to different devices like mobiles,tablets,and desktops.
Basic Syntax:
@media(condition){
/*css styles*/
}
Condition based on screen width(min-width&max-width):
min-width:Applies styles when the screen width is greater than or equal to a value.
max-width:Applies styles when the screen width is less than or equal to a value.
@media(max-width:600px){
/*css styles*/
}
@media(orientation:landscape/portrait){
/*css styles*/
}
JavaScript:
DOM(doc obj model):
Arrays methods(map,filter):
let numbers=[1,2,3,4];
let squared=[Link](num=>num*num);
[Link](squared);
let evennumbers=[Link](num=>num*2);
[Link](evennumbers);
Objects:
[Link]
reactapp
npx create-react-app-my-app
cd my-app
npm start // to start running the app
Composability
Wrapping a component into particular component.
fetch() used to get data from backend.
Promises -
objects which handles asynchronous operations
//new Promise((resolve,reject)=>(asynchronous operations))