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

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
860
45ca9033757d209fabf1481740d1c936?s=48 ireade
4
360
45ca9033757d209fabf1481740d1c936?s=48 ireade
6
1.2k
45ca9033757d209fabf1481740d1c936?s=48 ireade
5
380
45ca9033757d209fabf1481740d1c936?s=48 ireade
6
510
45ca9033757d209fabf1481740d1c936?s=48 ireade
9
390
45ca9033757d209fabf1481740d1c936?s=48 ireade
7
1.3k
45ca9033757d209fabf1481740d1c936?s=48 ireade
9
3.3k
45ca9033757d209fabf1481740d1c936?s=48 ireade
3
610

Other Decks in Programming

See All in Programming
0eb5ff24722856be0e9c4f66faf363be?s=48 greendog
1
3.5k
5e511bb6d01d856b4ec7a0e5b1f6a2f0?s=48 syumai
5
740
31107eb924f0f352bc3dc4916be5ba59?s=48 negi_andleek
0
190
9f33218af7ae5c04e102fcc3076f2f5c?s=48 yhkaplan
0
140
Faafc04d9e69b73b9f49995fd4c94d4d?s=48 whatyouhide
0
230
75486cbfd37125f121cf4a6c5614601c?s=48 hideokamoto
PRO
4
1.3k
15934fa2aa7b2ce21f091e9b7cffa856?s=48 manfredsteyer
PRO
0
180
5b3338b3676d4f7091a575e584f3a4f4?s=48 coe401_
PRO
2
630
Eae7b6aeee72d3081b01d09a2d675f9a?s=48 akkeylab
5
580
7850a83d81b034248782d63e7dcf7974?s=48 tatsuya4451
0
470
8e686c2dcfd4cc143fbc21baf893626b?s=48 tako8ki
0
410
B8e501d93b98a553abf0b5cee0c33503?s=48 yasaichi
31
11k

Featured

See All Featured
651dcfe41723207fbb0aa044a4f7c07f?s=48 dotmariusz
99
5.7k
0c6fd6a08d0f898159cda7cafcacf07f?s=48 afnizarnur
180
14k
A9a491b0fcbe0fbce3d64063a37add99?s=48 rmw
15
1k
A415db3ac9e9668acbc1fb36eead84ac?s=48 mthomps
44
2.5k
3d4519fd34b76fb265fc0237f3792bd4?s=48 danielanewman
208
20k
027d1ebf66cc039a0bd3b55eeadbe75d?s=48 sachag
448
36k
11c84dff30266b907714802088852677?s=48 jasonvnalue
87
8.3k
D83926c323d4f9289f947b4b4e76b939?s=48 jensimmons
209
11k
D8fc2580cfaca035f666d9e4ee79a7f7?s=48 mongodb
25
4.1k
Aff5641764408271f7bc398f2097edd0?s=48 denniskardys
222
120k
9128d500301ae51524e887bb680f471d?s=48 caitiem20
314
18k
48c098b6579220a67a6ba949be6e4b5a?s=48 revolveconf
203
9.9k

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