Please enable JavaScript.

Coggle requires JavaScript to display documents.

:star: Web Development :star: (:<3: HTLM5 & CSS3 (semantics of…

- - - - Extensions
        
        python
        
        vs icons
        
        material theme
        
        css peek
        
        Prettier
        
        SVG viwer
        
        Rest Api client
        
        Past JSON as code
        
        Live SaaS Compiler
        
        Emmet
        
        Syntax
        
        > Child
        
        :red_cross: Multiplication
        
        :heavy_plus_sign: Sibling
        
        :heavy_dollar_sign: Item Numbering
        
        :hash:(ID) . (Class) attributes
        
        () Grouping
      - (Ctrl + Shift + E) : File Explorer
        (Ctrl + Shift + F) : Search across files
        (Ctrl + Shift + G) : Source Code Mgmt
        (Ctrl + Shift + D) : 🚀 & 🐛
        (Ctrl + Shift + X): Manage Extensions
        (Ctrl + Shift + M) : View Error & ⚠
        (Ctrl + `): Toggle Terminal
        (Ctrl + /): Auto Comment a line
        (Ctrl + ,): VScode Settings:hammer_and_wrench:
    - - codepen
      - scrimba
- - - - Object
        
        Properties
        
        Methods
        
        Events
        
        HTML Elements
        
        DOM Properties
        
        DOM Methods
        
        document.getElementById().innerHTML
        
        document : object
        
        .getElementById(): method
        
        innerHTML : property
        
        :small_red_triangle: html element
        
        :heavy_plus_sign: / :heavy_minus_sign: html elements
        
        1 more item...
        
        :mag_right: html elements
        
        1 more item...
  - - - document.querySelector(element.id,className,attrib)
        
        e.g document.querySelector('li').textContent = "Some text";
    - - document.querySelectorAll(element.id,className,attrib)
    - - children
        
        traverse specific element in html-collection
        
        returns html collection
      - childNodes
        
        traverses entire html-collection
        
        returns node list
        
        [properties]:
        
        .nodeName
        
        .nodeType
        
        [.nodeType]:
        
        element
        
        attribute (deprecated)
        
        text node.
        
        comment
        
        document itself
        
        doctype.
    - - document.createElement('html elem')
        
        .className() = 'something'
        
        .appendChild()
        
        document.querySelector('parent element').appendChild('child element')
- - - - Getting Started
        
        Download Source Zip
        Or,
        Add CDN Code
      - CSS
        
        (Components-1)
        
        Typography & Alignment
        
        Add Tag: <blockquote></blockquote>
        
        Flow Text: auto-set font-size to viewport width
        Code: <p class = "flow-text"></p>
        
        Vertical Alignment: Provides vertical alignment to a container element (div).
        Code: `<div style = "height: 400px; background: #f4f4f4;" class=valign-wrapper"
        
        Text & BG colors
        
        Standard Font-color: <p class= <color-name>-text>
        
        Background-Color: <p class= <color-name>
        
        Darken BG-Color: <p class= <color-name> darken-1,2..>
        
        Lighten-Color: <p class= <color-name> lighten-1,2..>
        
        Buttons
        
        Standard Button: <button class="btn"></button>
        
        Waves Effect: Adds a wave extending outwards on button click
        <button class="btn blue white-text waves-effect waves-light">
        
        Material Icon: <i class="material-icons">shopping_cart</i>
        
        Icon Size: large, medium, small, and tiny
        Code: <i class="material-icons {large, medium, small, tiny}">done</i>
        
        Icon Button: nest icon class inside a link tag
        Code: <a class = "btn waves-effect waves-light" "href="#"><i class = "material-icon [left, right, center]">shopping_cart</i>Buy Now</a>
        
        Font-Awesome Button: Icon class changes to "fa fa-shopping-cart left"
        Code: <i class = "fa fa-shopping-cart [right,left]"></i>
        
        Floating Buttons
        
        Floating: Round shaped button, by adding class = "btn-floating"
        (Code): <button class = "btn-floating btn-large waves-effect waves-light"><i class = "material-icons">add</i></button>
        
        Pulse Floating Button: radiates a lighter colored wave.
        Code: <button class = "btn-floating red pulse btn-large><i class = "material-icons">add</i></button>
        
        Fixed Action Button: absolute version of floating button defined in container.
        (Optional orientation): can add horizontal, or click-to-toggle.
        Code:
        <div class="fixed-action-btn horizontal">(add floating properties)</div>
        
        (Component-2)
- - - - items flex (grow or shrink) to fill the spaces.
        
        Learn more
    - - float: left; right; center;