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

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

Sponsored · Ship Features Fearlessly Turn features on and off without deploys. Used by thousands of Ruby developers. →
Avatar for Ire Aderinokun Ire Aderinokun
February 18, 2017
Programming
310
3

Building "The Loop" (Introduction to Frontend Development)

forLoop Covenant University conference

Avatar for Ire Aderinokun

Ire Aderinokun

February 18, 2017

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
490
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
510
Demystifying Angular Universal
Avatar for Ire Aderinokun ireade
5
570
Introduction to UI/UX Design
Avatar for Ire Aderinokun ireade
9
730
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.9k
Hosting with Firebase
Avatar for Ire Aderinokun ireade
3
810

Other Decks in Programming

See All in Programming
(Re)make Regexp in Ruby: Democratizing internals for the JIT
Avatar for TSUYUSATO Kitsune makenowjust
2
180
感情を設計する
Avatar for nakamichi ichimichi
5
1.5k
ふりがな Deep Dive try! Swift Tokyo 2026
Avatar for watura watura
0
220
Lightning-Fast Method Calls with Ruby 4.1 ZJIT / RubyKaigi 2026
Avatar for Takashi Kokubun k0kubun
3
410
Xdebug と IDE による デバッグ実行の仕組みを見る / Exploring-How-Debugging-Works-with-Xdebug-and-an-IDE
Avatar for shin1x1 shin1x1
0
380
PDI: Como Alavancar Sua Carreira e Seu Negócio
Avatar for Marcel dos Santos marcelgsantos
0
120
TiDBのアーキテクチャから学ぶ分散システム入門 〜MySQL互換のNewSQLは何を解決するのか〜 / tidb-architecture-study
Avatar for DPon dznbk
1
180
HTML-Aware ERB: The Path to Reactive Rendering @ RubyKaigi 2026, Hakodate, Japan
Avatar for Marco Roth marcoroth
0
140
Kubernetes上でAgentを動かすための最新動向と押さえるべき概念まとめ
Avatar for Sota Makino sotamaki0421
3
500
10 Tips of AWS ～Gen AI on AWS～
Avatar for matsukada licux
5
410
Cache-moi si tu peux : patterns et pièges du cache en production - Devoxx France 2026 - Conférence
Avatar for Sébastien LECACHEUR slecache
0
240
2026-03-27 #terminalnight 変数展開とコマンド展開でターミナル作業をスマートにする方法
Avatar for SUZUKI Masashi masasuzu
0
340

Featured

See All Featured
Side Projects
Avatar for Sacha Greif sachag
455
43k
Kristin Tynski - Automating Marketing Tasks With AI
Avatar for Tech SEO Connect techseoconnect
PRO
0
220
JAMstack: Web Apps at Ludicrous Speed - All Things Open 2022
Avatar for David Neal reverentgeek
1
420
From π to Pie charts
Avatar for Rasagy Sharma rasagy
0
160
New Earth Scene 8
Avatar for Sydney Stone popppiees
3
2.1k
How to make the Groovebox
Avatar for あそなす asonas
2
2.1k
Design of three-dimensional binary manipulators for pick-and-place task avoiding obstacles (IECON2024)
Avatar for konakalab konakalab
0
410
The Organizational Zoo: Understanding Human Behavior Agility Through Metaphoric Constructive Conversations (based on the works of Arthur Shelley, Ph.D)
Avatar for Dr. Kim W Petersen kimpetersen
PRO
0
310
Navigating Weather and Climate Data
Avatar for Ryan Abernathey rabernat
0
170
Bootstrapping a Software Product
Avatar for Garrett Dimon garrettdimon
PRO
307
120k
Avoiding the “Bad Training, Faster” Trap in the Age of AI
Avatar for Mike Taylor tmiket
0
130
Ecommerce SEO: The Keys for Success Now & Beyond - #SERPConf2024
Avatar for Aleyda Solis aleyda
1
1.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