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

Building "The Loop" (Introduction to Frontend D...

Avatar for Ire Aderinokun Ire Aderinokun
February 18, 2017
Programming
3
280

Building "The Loop" (Introduction to Frontend Development)

forLoop Covenant University conference

Avatar for Ire Aderinokun

Ire Aderinokun

February 18, 2017
Tweet

More Decks by Ire Aderinokun

See All by Ire Aderinokun
Web Accessibility: It Doesn't Have to Be Hard
Avatar for Ire Aderinokun ireade
4
1.1k
Becoming a GDE & Overcoming Stage Fright
Avatar for Ire Aderinokun ireade
4
470
Web Components: The Future of Web Applications
Avatar for Ire Aderinokun ireade
6
1.6k
What about CSS? Progressive Enhancement & CSS (Updated)
Avatar for Ire Aderinokun ireade
4
470
Demystifying Angular Universal
Avatar for Ire Aderinokun ireade
5
560
Introduction to UI/UX Design
Avatar for Ire Aderinokun ireade
9
680
Building Modern Progressive Web Apps
Avatar for Ire Aderinokun ireade
7
1.6k
What about CSS? Progressive Enhancement & CSS
Avatar for Ire Aderinokun ireade
9
4.5k
Hosting with Firebase
Avatar for Ire Aderinokun ireade
3
790

Other Decks in Programming

See All in Programming
KessokuでDIでもgoroutineを活用する / Go Connect #6
Avatar for mazrean mazrean
0
130
Laravel Boost 超入門
Avatar for Arlo fire_arlo
2
170
オープンセミナー2025@広島 「君はどこで動かすか？」 アンケート結果
Avatar for Satoshi Kaneyasu satoshi256kbyte
0
230
FindyにおけるTakumi活用と脆弱性管理のこれから
Avatar for adachi.ryo rvirus0817
0
340
2025 年のコーディングエージェントの現在地とエンジニアの仕事の変化について
Avatar for azukiazusa azukiazusa1
2
780
Claude Codeで挑むOSSコントリビュート
Avatar for kmuto eycjur
0
190
CSC305 Summer Lecture 12
Avatar for Javier Gonzalez-Sanchez javiergs
PRO
0
130
MLH State of the League: 2026 Season
Avatar for Swift theycallmeswift
0
210
Introducing ReActionView: A new ActionView-compatible ERB Engine @ Rails World 2025, Amsterdam
Avatar for Marco Roth marcoroth
0
220
AIでLINEスタンプを作ってみた
Avatar for kmuto eycjur
1
220
コンテキストエンジニアリング Cursor編
Avatar for kinopee kinopeee
1
740
開発チーム・開発組織の設計改善スキルの向上
Avatar for 増田 亨 masuda220
PRO
18
9.6k

Featured

See All Featured
Building a Modern Day 
E-commerce SEO Strategy
Avatar for Aleyda Solis aleyda
43
7.5k
Large-scale JavaScript Application Architecture
Avatar for Addy Osmani addyosmani
512
110k
GraphQLとの向き合い方2022年版
Avatar for Yosuke Kurami quramy
49
14k
The Art of Programming - Codeland 2020
Avatar for Erika Heidi erikaheidi
55
13k
Building Applications with DynamoDB
Avatar for Matt Wood mza
96
6.6k
RailsConf 2023
Avatar for Aaron Patterson tenderlove
30
1.2k
jQuery: Nuts, Bolts and Bling
Avatar for Doug Neiner dougneiner
64
7.9k
Imperfection Machines: The Place of Print at Facebook
Avatar for Scott Boms scottboms
268
13k
Easily Structure & Communicate Ideas using Wireframe
Avatar for Afnizar Nur Ghifari afnizarnur
194
16k
StorybookのUI Testing Handbookを読んだ
Avatar for Shingo Yamazaki zakiyama
30
6.1k
Documentation Writing (for coders)
Avatar for Carmen Chung carmenintech
73
5k
Why You Should Never Use an ORM
Avatar for John Nunemaker jnunemaker
PRO
59
9.5k

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