Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Building "The Loop" (Introduction to Frontend Development)

Building "The Loop" (Introduction to Frontend Development)

forLoop Covenant University conference

Ire Aderinokun

February 18, 2017
Tweet

More Decks by Ire Aderinokun

Other Decks in Programming

Transcript

  1. Building “The Loop”: Frontend
    forLoop Covenant University
    Ire Aderinokun

    View full-size slide

  2. Hello!
    • Ire Aderinokun
    • UI/UX Designer and Front-
    End Developer
    • Blogger at bitsofco.de
    • Head of Technology at Big
    Cabal
    • Google Expert in Web
    Technologies

    View full-size slide

  3. What We’ll Cover
    • Introduction to Markup and Styling
    • Introduction Frontend Frameworks
    • Building “The Loop”

    View full-size slide

  4. Introduction to
    Markup & Styling

    View full-size slide

  5. What is HTML?
    HTML (Hyper Text Markup Language) is structure of
    Web Pages. HTML elements define the content that
    is represented on any page.

    View full-size slide

  6. Hello, world!
    Opening Tag
    Closing Tag
    Content

    View full-size slide

  7. Some HTML Elements
    Element Description
    Sets the page as an HTML page
    , , … Heading
    Paragraph
    Footer
    Link (anchor)
    Text Input Field
    General Purpose Element

    View full-size slide

  8. What is CSS?
    CSS (Cascading Style Sheets) describes how HTML
    elements are to be displayed.

    View full-size slide

  9. p { font-size: red; }
    Selector
    Value
    Property

    View full-size slide

  10. Some CSS Properties
    Element Description
    color Text colour
    font-size Text size
    background Background
    margin Margin
    position Position type
    border Border
    box-shadow Drop Shadow

    View full-size slide

  11. Introduction to
    Frontend Frameworks

    View full-size slide

  12. Why Frontend Frameworks?

    View full-size slide

  13. Building “The Loop”

    View full-size slide

  14. Join In!
    • Install angular-cli using npm
    • Clone the starting repository from
    bit.ly/theloop-fe

    View full-size slide

  15. The Final Product
    http://bit.ly/theloop-app

    View full-size slide

  16. Thank You!
    @IreAderinokun

    View full-size slide