Scribd Logo
Upload

Welcome to Scribd!

  • 5 Day Coding Challenge Description Seif

    Uploaded by

    Andre
    39 views2 pages

    Original Title

    5 day coding challenge description Seif

    Copyright

    © © All Rights Reserved

    Available Formats

    PDF, TXT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    Report this Document

    Copyright:

    © All Rights Reserved
    Download as PDF, TXT or read online from Scribd
    Flag for inappropriate content
    39 views2 pages

    5 Day Coding Challenge Description Seif

    Uploaded by

    Andre

    Copyright:

    © All Rights Reserved
    Download as PDF, TXT or read online from Scribd
    Flag for inappropriate content
    of 2

    5 day coding challenge

    created by: Abdel Rahman Abu Seif


    module topic name symbol description example
    structures content on a web bowser. Can
    be created in any text editor. Usually
    shown by <_> *body of text* </_>.

    introduction

    elements

    syntax
    Elements nested within other elements <head> | </head>
    elements <> key
    (parent elements) are called child
    elements. JS and CSS sees this nesting
    Intro
    family tree and allows for manipulation of
    that content.
    displayed vertically on the left of the page
    block element
    until styles by CSS.
    browser reads and displays elements.
    HTML <html> / </html> at the start and end of every web page <html> / </html>
    where the main body of text in the web
    Body <body> / </body> <body> / </body>
    base structure elements

    page lies.
    contains tags that provide supporting
    <head>
    information as the page title (located in
    Head <head> / </head> <title>_______</title>
    the tab of the webpage not the actual
    Elements

    </head>
    webpage).
    crerates a paragraph with space before
    paragraph <p> / </p> and after body of text. Defined as a block <p>HTML is easy to learn</p>
    element.
    Provides a title to a body of text. Has 6
    heading elements nummbered from 1-6
    headers <h1> / </h1> <h1>Why is HTML so Successful?</h1>
    where h1= title, h2 section h3-6=sub
    sections. Block element.
    can be ordered or unordered depending on
    block elements

    if the order of the list matters. <ol> gives a <body> /


    list with number indexes. <ul> gives a list <ol>
    lists <ol> / <ul> / <li> with bullet point indexes. <li> is usually a <li>this is a list</li>
    child element of the previous two </ol>
    elements as it defines each row in the </body>
    defined list.
    emphasis
    <em> / </em> emphaising text in italics <p>HTML is <em>easy</em> to learn</p>
    (italics)
    strong (bold) <strong> / </strong> emphaising text in bold <p>HTML is <strong>powerful</strong></p>
    composed of an attribute name then
    followed by a value. Attribute gives extra
    intro

    attribute = info about what the element does or gives <img src="https://www.google.com">
    options for the element. CSS targets these
    attributes to style elements.

    contains address of HTML link that is


    anchor/ interacted with. Link must be refranced
    <a> / </a>
    HTML

    hyperlink with the attribute href in this form: <a


    href= *link address*>*text*</a>
    elements that require attribues

    adds a link to the webpage that can be


    referred to later in the script (usually under
    header). Can refer to external library
    extensions such as font awesome website. <link href="https://www.google.com" rel="stylesheet" type="text/css" /> |
    link <link/>
    This is then called upon within the text by <h2>ingredients <i class="fa fa-cutlery" aria-hidden="true"></i></h2>
    attributes

    copying and pasting the extension provided


    as a child element to the targeted
    element.

    <div>
    neutral identifies structural areas on a page or
    <div>/<span> *body of text*
    elements group elements together.
    </div>

    displays image on webpage. Src attribute is


    used to link image to webpage from
    image <img> website or own server. alt attribute gives a
    discription of the image (best practice to
    images

    use) <img src="https://www.google.com"; alt="this is an image">


    download image then upload to image
    source <img src="_"> hosting site like "imgur" then refer to the
    image url in the image tag
    alternate text <img alt="_"> shows a description for visually impared
    semantics allow the browser to
    understand the context of what is being
    created easily allowing for accurate SEO
    intro

    semantics
    ID. There are elements in HTML 5 that do
    that and suppliment what the puropse of a
    body of text is.
    provides introductory and navigatory
    header <header> <header></header>
    content. Contains one heading tag
    semantics

    independent piece of content (makes


    article <article> sense on its own. Can be understood <article></article>
    outside the context of the page.
    elements

    represents a location on a page that links


    navigate to <nav> to other pages. Major navigation blocks <nav></nav>
    only need a nav tag.
    the content in a section doesn’t need to
    section <section> make sense on its own. Ie: contact us, <section></section>
    about, section in a newspaper article…
    footer <footer> adds a footer section to the page <footer></footer>

    defines colour, size and position of


    elements. | Composed of a
    selector{property:value;} (the attributes
    intro

    CSS {} inside the curly brackets are called body{color:red}


    declarations). The selector defines what
    basics

    element the declaration will be applied to


    and this rule will propogate to all pages. |

    target multiple
    element1,element2 {} separate elements using a comma h1,h2{color:orange}
    targeting

    elements
    child element add a space after the parent element to
    __ parent_element child_element{_:_}
    targeting spacifically target a child element
    <head>
    style element controls the style of all <style>
    refered to elements in the HTML body {font-size: 14px; font-family:Arial;}
    document. This must be a child element if h1 {color: #ffd700; text-transform: uppercase;}

    style definition
    opening tag <style> the <head> element. import element p {color: darkslategray;}
    allows the import of external style sheets em {font-size: 20px; color:rgb(0,128,0);} created by: Abdel Rahman Abu Seif
    not declared on an HTML style page. strong {font-size: 24px; color:rgb(0,0,0);}
    style Allows chaining of style pages. </style>
    </head>
    1) inline style applies to individual <p style="property:value;"> _____</p>
    style attribute style=
    elements by using a style attribute.
    declarations

    sets a specific style choice to the HTML


    property:value color:red
    line targetted.

    #id_name() allows the application of the


    styling to one type of element with that
    tag, this is aplied as a child element to the
    ID definition #id_name{declaration} <head> element. provides a style to a #id_name{color:red}
    single type of element throughout the
    page. Can be used on an external style
    sheet
    <p id="CallToAction"> | <style>#CallToAction{declaration}</style></p> |
    <head> <style>
    #heading {font-family: Arial; background-color: red;color: white;}
    ID

    #uppercase{text-transform:uppercase;}
    this adds a tag to elements that CSS can </style>
    detect. This adds a tag that CSS can use to </head>
    ID attribute id="_"
    apply the same styles to. | Id= is used to |
    define the tag that the element will have. <body>
    grouping
    CSS

    <div id='heading'>
    <h1>Sporting History</h1>
    <p id='uppercase'>Giants & Heroes</p>
    </div>
    <style>
    allows the styling of elements with the
    .sports-history{color:orange;}
    class definition .class_name class name, this is used in the head
    .computing-history{color:green;}
    element or an external style sheet.
    </style>
    this allows for classification (tag) of
    classes

    multiple elements using the class attribute


    (class=) this is then called upon in the
    <head> with the .class_name element.
    class attribute class="_" <h3 class='sports-history'> Track & Field</h3>
    Values in the attribute don’t have to be
    unique throughout the document. Classes
    can provide a style template for all types of
    elements

    Responsive design is the process of building


    responsive a website that will automatically adjust
    body { font-size: 300%} ; {text-transform: uppercase}
    design and adapt to the screen size of whatever
    device the user is on.
    intro

    breakpoints sections that the browser is broken up into


    relative changes the size of the webpage relative
    % body { font-size: 300%}
    measurments to the screen size in %

    font size font-size: size of the font body { font-size: 300%}


    responsive design

    width width: width of the element on the screen


    linking external
    this links the external CSS style sheet to
    CSS sheet to <link href="CSS_stylesheet.css" rel="stylesheet" type="text/css" />
    the webpage
    webpage
    margin-top | margin-
    elements

    margin bottom | margin-right adds space to element above or below margin-top: 50px
    | margin-left
    padding-top | padding- adds space around the entirety of the
    padding padding-top: 50px
    bottom element
    allign text-align aligns the text on a side text-align: left
    allows for a set of styles that are only
    applied to certain screen dimensions. | the
    media query @media @media screen and (max-width: 768px) { body{text-align:center}}
    example states styles that only occur at
    screen sizes below 768px
    Allows enhancement of webpage with
    JavaScript

    animation, visual effects and interactivity.


    javaScript definition

    | responsible for logical decision making of


    the website.
    intro

    script element can be put in the header or


    body like the style element and tells the
    opening tag <script> browser that whats inside is javascript <script> </script>
    coding. Script only used when in the HTML
    file.
    event listeners

    onmouseover=
    on mouse do a function when the mouse is hovered
    elements

    "functionName()" | <section onmouseover="ingredientsHover()"


    over/out over the element | once away from
    onmouseout= onmouseout="ingredientsNormal()">
    attribute element do another function
    "functionName()"
    can create customised function to input
    function function into an element | actions are inputted in
    definition functionName() {_} curly brackets to tell the function what to
    do.
    JavaScript

    start of function creation, the element


    targeted must be located. This calls the
    document
    entire document as the first parent
    element
    .GetElementById("_")
    locate the parent element by ID or class
    locating target |
    function creation

    name, usually located after "document"


    element .GetElementByClass(" <script>
    when defining a function
    functions

    _") function ingredientsHover() {


    tells the browser to look at the first child document.getElementById('ingredients').style.fontSize='300%'}
    element of the element previously </script>
    .firstElementChild.
    mentioned allowing for a more detailed
    targetting of the function

    tells the browser that a style (CSS) element


    will be applied then what attribute=value
    declaration is chosen. This example shows
    attribute
    .style.attribute=value that when using JS = is always used for
    assignment
    declarations, this is because style is used
    to specify that its CSS| done after locating
    the child element

    You might also like