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 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 Slide

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

    View Slide

  4. Introduction to
    Markup & Styling

    View Slide

  5. View Slide

  6. View Slide

  7. 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 Slide

  8. Hello, world!
    Opening Tag
    Closing Tag
    Content

    View Slide

  9. View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  13. View Slide

  14. 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 Slide

  15. Introduction to
    Frontend Frameworks

    View Slide

  16. Why Frontend Frameworks?

    View Slide

  17. View Slide

  18. Building “The Loop”

    View Slide

  19. View Slide

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

    View Slide

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

    View Slide

  22. Thank You!
    @IreAderinokun

    View Slide