Scribd Logo
Upload

Welcome to Scribd!

  • Modern Front-End Development

    Uploaded by

    Nick Baker
    10 views17 pages

    Original Title

    Modern Front-end Development

    Copyright

    © © All Rights Reserved

    Available Formats

    KEY, 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 KEY, PDF, TXT or read online from Scribd
    Flag for inappropriate content
    10 views17 pages

    Modern Front-End Development

    Uploaded by

    Nick Baker

    Copyright:

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

    Modern Front-End

    Development
    Using HTML 5, CSS 3, and JavaScript
    Novium Collective
    Specialized in modern digital media

    App UX/UI and Development


    Web Front-end
    Gamification
    The only AAC (Authorized Apple Consultants) in the
    Middle East
    International clients such as Range Rover, Lipton, and
    Rovio.
    The Instructor

    Co-founder and Creative Technologist at Novium Collective


    Over 12 years of software engineering experience
    In the US, worked at Microsoft, Konami, and Apple Inc.
    In Lebanon, worked at Ministry of Telecom and Ministry of Economy
    Yearly presenter at AltWWDC San Francisco, CA.
    Teaches front-end and Mobile app development at Formatech and LAU
    HTML 5

    Course Structure
    Syntax for design scaffolding.
    Syntax for content handling
    CSS 3

    Stylization and element types


    Responsive web design and media
    queries
    JavaScript

    Syntax overview
    Web History

    XHTML
    CSS 2.1
    1.0
    Content Presentation
    Web History

    HTML
    CSS 3
    5
    Content Presentation
    Web History

    WHAT WG; web hypertext application


    technology working group.
    W3C; world-wide web consortium.
    HTML

    Hyper-text Markup Language


    Descendant of XML
    Used for expressing layout
    XHTML Example
    <div id=”header”></div>

    <table cellpadding=”2” cellspacing=”1” border=”0”>


    <tr>
    <td>Content area text</td><td>Side bar text</td>
    </tr>
    </table>
    XHTML Example
    <div id=”header”></div>

    <div id=”wrapper”></div>
    <div id=”content”></div> <div id=”side”>
    </div>

    <div id=”footer”></div>
    Structural Tags
    <!Doctype html>
    html
    head
    body
    link
    script
    Semantical Block Tags
    div (layer)
    nav
    header
    footer
    table

    th
    tr
    td
    ul / ol
    Inline Tags

    span
    img
    i
    a
    Expression Tags

    aside
    section
    article
    em
    Tag attributes
    Common attributes

    id
    style
    data-*
    Tag-specific configuration

    cellpadding, cellspacing... etc.


    HTML5 Example
    <header></header>

    <div id=”wrapper”></div>
    <section> <aside>
    </aside>
    <article>
    </article>
    <article>
    </article>
    </section>

    <footer></footer>
    DEMO

    You might also like