Please enable JavaScript.

Coggle requires JavaScript to display documents.

Web Dev (Jake Wright) - Coggle Diagram

- - - - x.length; returns the length of a variable
      - Also have methods that can be called (can take input, do computation and output an answer)
        
        substring
        
        x.substring(3, 5); returns characters within that range of the string with the parameters
  - - - x[0] = "cat"; defines the first item in the new array as "cat"
        
        document.write(x[0]); to output the first itme in the x array
      - Alternatively, can make an array without defining the number of items, and just adding the items
        
        const x = new Array ("cat, "dog", 53, true);
        
        Another Alternative
        
        const x = ["dog", "cat", 3, 5, false];
        
        Shorthand
  - - - function sayHello(who) { ... } function with parameters
    - - sayHello("Bob"); calling function with parameters
  - - - ==, <, >, >=. <=, !=
      - else { ... } else statements
- - - - Best practice
  - - - #tag {customisation}
    - - Colour
        
        background-color: colour name/#hex code; changes the background colour
        
        color: colour; changes colour of the text
      - Target the whole page through the #body tag
      - Adjusting position
        
        text-align: center; centers/aligns text
        
        Divs proportions
        
        width: 500px; adjusts the width of a div
        
        Adjusting both of these would center a div to the middle of the screen horizontally
        
        margin-left: auto;
        
        margin-right: auto;
        
        Padding between divs
        
        padding: 10px 10px 10px 10px; (top, right, bottom, left)
        
        if all numbers are the same, just use the one number padding: 10px;
        
        To have divs not just appear on a new line by default, they need to float next to each other (floats next to it's parent)
        
        float: right; floats to the right of the parent
        
        If another div overlaps as a result of floating clear: both; should reset the overlapping by making sure it is clear of any floating elements before displaying itself
      - Customising classes
        
        Instead of using #, add a .class {...}
        
        If that class exists somewhere else and you want to be more specific, you can do #tag. class {...} filters it down to any object with the class inside the object with the id/tag
      - font-weight: bold; makes the font bold
      - To get rid of any decoration of text text-decoration: none; whilst targetting the a { ... }
      - To get rid of the physical bullet points in an ul list, do #tag ul { list-style-type: none; }
      - targetting h1 tags
        
        h1 { margin: 0; } changes the margin to 0
      - Target multiple tags by adding commas between them
      - Changing the font
        
        font-family: font1, font2, font3;
        
        Always good to have additional fonts in case one doesn't exist
      - Come in the form of propertyname: value;
      - can also target a tag instead of an id (don't need the #)
      - Can seperate identifiers with spaces i.e #content .sidebar { ... } this'll apply this rule to any object with the class "sidebar" inside the object with the id, "content", but this id could also be any class and the chain can be any length as long as they are all inside of each other from left to right
- - - - <x> </x>
    - - All html documents have to have this, everything in the html file goes inbetween these tags
        
        <head> </head>
        
        Where information about the page is
        
        <title> </title>
        
        Content is what is displayed on the title bar
        
        <body> </body>
        
        Content in the page
        
        <h> </h> (h1, h2, h3, h4, h5, h6)
        
        Headings that get smaller with each number
        
        <p> </p>
        
        Used for text
        
        <br /> used inside the <p> tag to break the text to the next line
        
        <img src="Image Path" /> (width="x" is optional attribute, and would be added after the src, if that property isn't put in, the image is displayed as default size) Adds an image. (Can also use height="x" attribute to adjust height)
        
        A technically required attribute is alt="x" which contains a description of the image, in case the user is using a screenreader or text only browser (won't actually see yourself)
        
        <hr /> creates a horizontal line across the page
        
        <a href="url">text for hyperlink</a> creates a hyperlink to another web page, with the text used fthe hyperlink
        
        Lists
        
        Bullet pointed
        
        <ul> </ul>
        
        Inbteween, indented used <li>Item</li> to insert each point
        
        For numbered lists, instead use <ol> </ol> in place of <ul>
        
        Div tags
        
        Groups the elements of a page into sections
        
        Always causes an invisible linebreak before and after itself, by default, nothing can appear to the sides of a div, only above and below. But this can be cahnged through CSS
        
        <div> </div> indented inbetween, put contents of the group
        
        Can be nested
        
        Best to give it the id="id" attribute, ids must all be unique
        
        To target a group of elements, you can give them all the same class using the class="class" attribute
        
        You can give any element on the page the same class
        
        For copyright symbol type, (& copy ; with no spaces)
        
        Span tag
        
        Same as the <div> tag, except it doesn't cuase a line break, so good for wrapping around anything laready inside an element
        
        <span> </span>
      - At very beginning explicitly type the doc type. Which tells the browser what version of HTML to expect, must be the first thing in the html file. Even before the <html> tags. Add <!DOCTYPE html>