Please enable JavaScript.

Coggle requires JavaScript to display documents.

Full Stack Developer - Coggle Diagram

- - - - Non-semantic
        
        div
      - Semantic
        
        section
        
        A section is a thematic grouping of content, typically with a heading.
        
        A home page could normally be split into sections for introduction, content, and contact information.
        
        article
        
        An article should make sense on its own, and it should be possible to read it independently from the rest of the web site.
        
        Examples of where an <article> element can be used:
        
        Forum post
        
        Blog post
        
        Newspaper article
        
        header
        
        The <header> element should be used as a container for introductory content.
        
        You can have several <header> elements in one document.
        
        footer
        
        A <footer> element should contain information about its containing element.
        
        A footer typically contains the author of the document, copyright information, links to terms of use, contact information, etc.
        
        You may have several <footer> elements in one document.
        
        nav
        
        The <nav> element defines a set of navigation links.
        
        aside
    - - Responsive design
        
        Flexible Box
        
        flex containers
        
        display: flex or inline-flex -> This is a block like display:block, inline is the same thing than inline-block
        
        justify-content
        
        align vertically
        
        align-items
        
        align horizontally
        
        align-content
        
        space flex items from the top to the bottom of multiple rows in a flex container
        
        space-around
        
        flex-start
        
        flex-end
        
        center
        
        space-between
        
        stretch (default value)
        
        flex items
        
        flex-grow
        
        S'étire
        
        flex-shrink
        
        Rétréci
        
        flex-basis
        
        Taille de base de l'objet
        
        flex property
        
        Gather all properties above in one element, order : flex-grow, flex-shrink, and flex-basis
        
        flex-wrap
        
        wrap
        
        child elements of a flex container that don’t fit into a row will move down to the next line
        
        wrap-reverse
        
        the same functionality as wrap, but the order of rows within a flex container is reversed (for example, in a 2-row flexbox, the first row from a wrap container will become the second
        
        nowrap
        
        prevents items from wrapping; this is the default value and is only necessary to override a wrap value set by a different CSS rule.
        
        flex-flow
        
        Like the flex property, the flex-flow property is used to declare both the flex-wrap and flex-direction properties in one line.
        
        Media queries
    - - ES6