Please enable JavaScript.

Coggle requires JavaScript to display documents.

web developement, JAVASCRIPT, HOW ARE THEY CONNECTED, CUMULATIVE EFFECTS,…

- - - - DECLARATION
        
        PROPERTY VALUE PAIR
        
        SEPERATED BY A :(COLON)
      - select element by id
        
        first need to define id in html
        
        refer by #idvalue
      - select by element
        
        write the name of element
      - select by class
        
        first we have define class attribute for elements in html
        
        then refer to them .nameofclass
      - group selectors by separating them by comma
        
        example h1,h2
        
        how are they different
        
        combination of selector
        
        child
        
        direct
        
        parent>child
        
        any level
        
        parent child
        
        element with a class
        
        element.classname
        
        select elements having two classs
        
        .class1.class2
        
        trick read right to left
        
        adjacent sibling selector
        
        selector+selector
        
        general sibling selector
        
        selector ~ selector
        
        caution
        
        CAUTION div > div >p
        
        what does it mean
        
        find any div
        
        1 more item...
      - pseudo selctor
      - pseudoclass selector
        
        where are they used
        
        to have different styling according to what user does
        
        when clicked
        
        when hovered over
        
        to select nth child
        
        note that they too can be combined
      - CAN I SELECT ALL THE ELEMENTS OF HTML
        
        YES!
        
        USE * SELECTOR
        
        especially useful to reset the styles given by the browser
    - - EXAMPLES
        
        COLOR
        
        FONT SIZE
    - - reusable
      - allows multiple pages to have sam style
    - - link tag with a ref and href
        
        rel defines the relationship between the html and what it is linked with
        
        for this purpose it is the stylesheet
  - - - WHAT DO WE MEAN BY CONFLICT HERE
        
        IS YOU HAVE TWO OR MORE CSS RULES APPLIED TO SAME
    - - IF TWO RULES ON SAME ELEMNT
        
        IF THE CHANGE THE SAME PROPERTY
        
        LAST DECLARATION WINS
        
        IF THEY CHANGE DIFFREENT PROPERTY THET ARE MERGED
    - - ALL THE CHIDS OF A PARENT ELEMENT INHERIT THE STYLE OF THE PARENT
    - - ASSIGN A SCORE ACCORDING TO THE SELECTORS
        
        4 DIGIT
        
        STYLE =""
        
        ID
        
        3 CLASS , PSEUDOCLASS ATTRIBUTE
        
        ATTRIBUTE DOUBT
        
        4.NUMBER OF ELEMNTS
      - THE RULE WITH THE HIGHEST SCORE WINS
        
        but if we do diffrent properties in that two rules for the same elemnt
      - OVERRIDE THE SPECIFICITY IS USING
        
        !important;
        
        ofcourse the orign rules will matter
      - provided that the orign in the same
        
        DOUBT
  - - - RELATIVE
        
        2em
        
        2 times what was already there
        
        percent
        
        x percent of default or till now
        
        importance if zoom in
        
        note that if relative all the child elements of the parent all will have this change
      - ABSOLUTE
        
        PIXELS
    - - CAN USE HEXADECIMAL RGB
    - - MORE THAN ONE BETTER AS FONTS USER WILL EXPERIENCE DEPENDS ON HOW MANY HE HAS ON HIS COMPUTER
      - TWO BROAD CATEGORIES
        
        SERIF
        
        WHICH HAVE ENDS ON THE LETTERS
        
        SANS SERIF
  - - - each html element is a box
    - - content
        
        padding
        
        border
        
        margin
        
        i think so not sure separation between two boxes may be
        
        left right add and cumulative
        
        top botttom collapse
        
        space between content and border
        
        width of the box = width of content by default(contentbox)
        
        if we dont fix the height then itr chganges as width changes
        
        if we want to change use
        
        box sizing of border box
        
        but its not inherited!
        
        then how to make it true foe all the elements
        
        1 more item...
        
        what if we fix the height also and the width
        
        overflow if less space
        
        what to do use overflow property
        
        auto
        
        scroll
    - - img
        
        position
      - color
  - - - WHAT DOES IT MEAN
    - - FLECIBLE LAYOUTS
    - - VERTICAL MARGIN DO NOT COLLAPSE
    - - THIS SPECIFY WHICH SIDE OF THE GIVEN ELEMNT NO FLOATING ELEMNTS ARE ALLOWED
  - - - WHAT DOES IT Mean
  - - - Use media queries to target devices
        
        Within the cost media
        
        Properties which true or false
        
        Be careful of overlap rember always inclusive range
        
        Within which curly brace
        
        Inside of which we have particular styles
        
        HOW DOES THE MEDIA QUERY ACTUALLY WORK ????
        
        HOW IT KNOWS THE SCREEN SIZE
      - Have some base styles that apply to all also
    - - Have a server to find the type of device
        
        Then make different websites for mobile and desktop
- - - - web
        
        web page connected with other webpages
      - how you gpo from one webpage tyo another
      - i am still not clear
  - - - Generally both opening and closing tags
        
        <tag> content </tag>
        
        Invalid
        
        < nospacehere tag> or <no space here /tag>
      - What does it do
        
        Tag has a element
        
        That element specify what the content should have
        
        Elements
        
        Attributes
        
        Like meta data
        
        Id
        
        1 more item...
        
        Attribute value
        
        1 more item...
        
        Name
        
        1 more item...
        
        class
        
        1 more item...
        
        Head
        
        Meta data
        
        Meta tag only opening
        
        Title tag
        
        Body
        
        Main content
        
        Elementname can be uppercase as well
      - No closing tag example
        
        <br>
        
        WHAT DOES IT DO
        
        LINE BREAK
        
        <hr>
        
        meta
        
        img
      - Tags with no content
        
        Cannot use self closing tags use<></>
      - All child tags of a parent tag must be closed before the closing of parent tag
      - Doubts
        
        Self closing vs tag with no closing tag
      - Html tag parent tag
      - semantic vs nonsemantic html tag
        
        semantic tags have there own inherent meaning
        
        but also styling
        
        may help in somethingcalled SEO ranking
        
        SEO ranking
        
        search engine optimization
        
        NOT CLEAR
        
        why should you use them and not use div span or any other non sematic tag
        
        it attaches meaning to the things which makes code more understandable
        
        SEO
        
        EXAMPLES
        
        headings
        
        h1 , h2,h3......h6
        
        h1 should contain the main topic of the page
        
        section
        
        article
        
        footer
        
        aside
        
        most of them are block level
        
        are all ?????
        
        NON SEMATIC
        
        div
        
        span
      - list tags
        
        unordered
        
        <ul></ul>
        
        ordered
        
        <ol></ol>
        
        conetnt of these has to contain only li elemnts <li></li>
      - img tag
        
        scr(source)
        
        provide the url here
        
        why should you try to specify the width and height
        
        if image doent load still spacing layout remain sasme
        
        if image takes time to lad avoid jumping
        
        alt
        
        used by screen reading software
      - pre tag themnm white space matters
      - bold makes bold text and em tage italicizes
    - - !DOCTYPE HTML
      - !doctype html
      - Lower upper case or mixed also allowsd
        
        !docType HTmL
      - Any other way invalid
  - - - Inline
        
        Span
        
        Cannot contain block level
        
        In the same line if possible
        
        a tag(ANCHORTAG)
        
        its both m,eans you can have inside of it div
        
        title
        
        useful when screen read sowftare
        
        DOUBT
        
        EXTERNAL LINKS
        
        target
        
        attribute for a element
        
        if use target ="_blank"
        
        it forces to open the webpage in a new tab or window rather than in the same tab
        
        1 more item...
        
        INTERNAL LINKS
        
        WITHIN THE SAME DIRECTORY AS THIS HTML FILE
        
        IN ANOTHER DIRECTORY
        
        fragment identifiers
        
        DOUBT DOES IT WORK ONLY FOR SECTIONS
        
        NO
        
        TWO WAYS
        
        USE ID AND #POUND SYMBOL
        
        USING THE NAME ATTRIBUTE
      - Block level
        
        Div(division)
        
        note that inside the content any new line character any tabs and more than one space are all ignored so each of these things are equivalent to a single space character
        
        <div> hell0 , (newline) david</div>
        
        will be shown as hello, david
        
        Each on a new line
        
        Can contain inline
      - But if block level followed by a inline then push inline to a next line
        
        Example div followed by a span outside it
    - - Flow
        
        Very similar to block level
      - Phrasing
        
        Very similar to inline
  - - - is to avoid the rendering problem
        
        what is a rendering problem
        
        if use of chacters < > & which are used in html syntax
        
        they might confuse the browser
        
        <
        
        &It;
        
        &
        
        &amp ;
        
        >
        
        &gt ;
        
        different charcter encoding problem
        
        sprcail entity for the inverted comma
      - represent symbols not present on keyboards
      - test wrapping
        
        DOUBT
        
        &nbsp ;
        
        non breakable space
- - - - component
        
        start withcapatal letter
        
        to differentiate from html components
        
        how to create
        
        import react
        
        helps to write jsx code
        
        create function
        
        give name genrally as your file name
        
        arrow function
        
        return only one elemnent at root level
        
        export component
        
        1 more item...
        
        (arguments)
        
        for props
        
        1 more item...
      - .jsx files
        
        help to write javascript inside html
      - prop
        
        used to transfer properties from parent tcomponent to child component
      - STATE
        
        STATE VARIABLES
        
        UPDATE CONTENT DYNAMICALLY
        
        WHEN STATE VARIABLES CHANGED
      - UseEffect
        
        based on the change of somed state variable exceute function
      - UseState
        
        based on
      - UseRef
      - conditional rendering
      - terniary operator
        
        doubt
      - React documentation
- - - - photos
      - designs
  - - - have the colors fonts the photographs positions
- - - - confused not working as expected debug with chrome developer tools
- - - - cannot be changed after declaration
        
        DOUBT does it mean we cannot assign it a new value ANSWER NO
        
        but we could do it in case of undefined
        
        BASCIALLY THEY DONT HAVE ANY IDENTITY
        
        MEANS THE VARIABLE NAME POINTS TO THE VALUE NOT TO THE MEMORY LOCATION WHERE THE VALUE IS LOCATED
        
        doubt between memory location value
    - - Undefined
        
        automatically assign to a variable when we havent assigned value for that variable BUT WE HAVE DEFINED THE VARIABLE
        
        cleared(doubt)
        
        DECALARE A VARIABLE BUT NOT ASSIGN ANY VALUE
        
        it means that space has been allocated for that put no value has been put into it
        
        NOTE that it is different from not defined error which is when variable not declared
      - boolean
        
        true or false
        
        but some other things are also considered as true and false apart from these reserved words
      - null
        
        absense of a value
        
        DOUBTS
        
        where will we use a null type
      - Number
        
        double precession (what it mean s) FLOATING POINT
        
        IEEE STANDARD FOR 64BIT NUMBER
        
        NO INTS
      - SYMBOL
      - STRING
  - - - === compares only if same type
      - == may do type coercion and give weird results
- - - - global
      - function
        
        inside that function in which they are defined
        
        variable scope depend where its function is defined not where the function is invoked
        
        note that its not the nearest declaration to the invocation of function
  - - - use var name_function = function () {}
      - function name_function () {}
      - with parenthesis () we define arguments
        
        but all arguments are optional means even if you defined the function to take three arguments but while invoking you based no argument that is also fine
- - - - create a new execution context where things will be executed
        
        gets an outer reference from where the function which is being invoked was defined
      - a new variable environment
        
        where variablles and fucntion which are defined within
    - - has a this object