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
550
Introduction to UI/UX Design
Avatar for Ire Aderinokun ireade
9
660
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.4k
Hosting with Firebase
Avatar for Ire Aderinokun ireade
3
790

Other Decks in Programming

See All in Programming
A2A プロトコルを試してみる
Avatar for azukiazusa azukiazusa1
2
1.3k
A full stack side project webapp all in Kotlin (KotlinConf 2025)
Avatar for Dan Kim dankim
0
110
猫と暮らす Google Nest Cam生活🐈 / WebRTC with Google Nest Cam
Avatar for Yutaro Muta yutailang0119
0
110
チームで開発し事業を加速するための"良い"設計の考え方 @ サポーターズCoLab 2025-07-08
Avatar for Agata Naomichi agatan
1
320
ISUCON研修おかわり会 講義スライド
Avatar for Yuki Yata arfes0e2b3c
1
430
Rubyでやりたい駆動開発 / Ruby driven development
Avatar for chobishiba chobishiba
1
660
Modern Angular with Signals and Signal Store: New Rules for Your Architecture @enterJS Advanced Angular Day 2025
Avatar for Manfred Steyer manfredsteyer
PRO
0
210
NPOでのDevinの活用
Avatar for みんなのコード codeforeveryone
0
810
ソフトウェア品質を数字で捉える技術。事業成長を支えるシステム品質の マネジメント
Avatar for takuya542 takuya542
1
12k
Deep Dive into ~/.claude/projects
Avatar for Yuya Hirayama hiragram
13
2.5k
『自分のデータだけ見せたい！』を叶える──Laravel × Casbin で複雑権限をスッキリ解きほぐす 25 分
Avatar for AkitoTsukahara akitotsukahara
2
630
おやつのお供はお決まりですか？@WWDC25 Recap -Japan-\(region).swift
Avatar for gangan shingangan
0
120

Featured

See All Featured
Let's Do A Bunch of Simple Stuff to Make Websites Faster
Avatar for Chris Coyier chriscoyier
507
140k
A better future with KSS
Avatar for Kyle Neath kneath
239
17k
Git: the NoSQL Database
Avatar for Brandon Keepers bkeepers
PRO
430
65k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
Avatar for Irina Nazarova irinanazarova
8
810
GraphQLとの向き合い方2022年版
Avatar for Yosuke Kurami quramy
49
14k
We Have a Design System, Now What?
Avatar for Morgane Peng morganepeng
53
7.7k
Principles of Awesome APIs and How to Build Them.
Avatar for Keavy McMinn keavy
126
17k
Navigating Team Friction
Avatar for Lara Hogan lara
187
15k
Fashionably flexible responsive web design (full day workshop)
Avatar for Andy Clarke malarkey
407
66k
Writing Fast Ruby
Avatar for Erik Berlin sferik
628
62k
The Art of Programming - Codeland 2020
Avatar for Erika Heidi erikaheidi
54
13k
VelocityConf: Rendering Performance Case Studies
Avatar for Addy Osmani addyosmani
332
24k

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