Building "The Loop" (Introduction to Frontend Development)

45ca9033757d209fabf1481740d1c936?s=47 Ire Aderinokun
February 18, 2017
Programming
4
220

Building "The Loop" (Introduction to Frontend Development)

forLoop Covenant University conference

45ca9033757d209fabf1481740d1c936?s=128

Ire Aderinokun

February 18, 2017
Tweet

More Decks by Ire Aderinokun

See All by Ire Aderinokun
45ca9033757d209fabf1481740d1c936?s=48 ireade
4
830
45ca9033757d209fabf1481740d1c936?s=48 ireade
4
350
45ca9033757d209fabf1481740d1c936?s=48 ireade
6
1.2k
45ca9033757d209fabf1481740d1c936?s=48 ireade
5
370
45ca9033757d209fabf1481740d1c936?s=48 ireade
6
510
45ca9033757d209fabf1481740d1c936?s=48 ireade
7
340
45ca9033757d209fabf1481740d1c936?s=48 ireade
7
1.3k
45ca9033757d209fabf1481740d1c936?s=48 ireade
9
3.2k
45ca9033757d209fabf1481740d1c936?s=48 ireade
3
580

Other Decks in Programming

See All in Programming
Fbe54abf4094d19f1548783d072a7fa7?s=48 adoranwodo
0
190
4d40d82cc3c676e8a67ffc2a473bf423?s=48 kyoheig3
0
410
E0e036f89c14b3e59640318eedf9670b?s=48 bkuhlmann
4
610
079f41894122acf92719f5558dcaf944?s=48 dictoss
0
160
1623dd1adf096ba35ba33727d933e14c?s=48 nbkouhou
1
1k
Ca17a082a30f4cbfed1d0a6dacbe3af2?s=48 shin1x1
0
580
F04982ad61107b5408ad139966596316?s=48 hanhan1978
0
290
De266761b955b2636e454a1bc7a99ed4?s=48 masayaaoyama
4
520
2102a6b8760bd6f57f672805723dd83a?s=48 line_developers_tw
0
370
7eca3e06edc3c69004aaf57de51900c2?s=48 ajstarks
2
550
1821636ac95415aa6e84bc33b394283d?s=48 tommykw
1
310
4047c64e3a1e2f81addd4ba675ddc451?s=48 zsmb
1
120

Featured

See All Featured
4262b9cfacfb6b2c77f23e1d0310cd3e?s=48 myddelton
109
11k
Af6a12710770ad9a7cfd08c97efd40d3?s=48 pedronauck
652
110k
C0390e8b11079f8761c0cd3274ed61cb?s=48 productmarketing
5
640
016edace78ffe826f2348d1e0c504afd?s=48 maggiecrowley
8
400
465724d73fe3a92c0879fdfb43a3a6f3?s=48 philhawksworth
190
17k
F383c6a4dc55e331bbe2987b622cee6b?s=48 stephaniewalter
260
11k
2f5463832ccb768ccb4a1ca3607c27ef?s=48 jacobian
255
20k
B3d6434763caa0ef5dc4b792662c49f7?s=48 smashingmag
229
18k
A60068bce2e73de3a37ca9d2dbe36092?s=48 bryan
30
3.3k
B47b288784fda77a94aeb234ca743c24?s=48 keavy
106
14k
78b475797a14c84799063c7cd073962f?s=48 holman
448
130k
1177e050db6bafe62885362edf6e3537?s=48 lauravandoore
11
1.2k

Transcript

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

  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

  3. What We’ll Cover • Introduction to Markup and Styling •

    Introduction Frontend Frameworks • Building “The Loop”

  4. Introduction to Markup & Styling

  5. None
  6. None

  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.

  8. <p> Hello, world! </p> Opening Tag Closing Tag Content

  9. None

  10. Some HTML Elements Element Description <html> Sets the page as

    an HTML page <h1>, <h2>, … <h6> Heading <p> Paragraph <footer> Footer <a> Link (anchor) <input> Text Input Field <div> General Purpose Element

  11. What is CSS? CSS (Cascading Style Sheets) describes how HTML

    elements are to be displayed.

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

  13. None

  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

  15. Introduction to Frontend Frameworks

  16. Why Frontend Frameworks?

  17. None

  18. Building “The Loop”

  19. None

  20. Join In! • Install angular-cli using npm • Clone the

    starting repository from bit.ly/theloop-fe

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

  22. Thank You! @IreAderinokun