Building "The Loop" (Introduction to Frontend Development)

forLoop Covenant University conference

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