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
300

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
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
500
Demystifying Angular Universal
Avatar for Ire Aderinokun ireade
5
570
Introduction to UI/UX Design
Avatar for Ire Aderinokun ireade
9
710
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.8k
Hosting with Firebase
Avatar for Ire Aderinokun ireade
3
800

Other Decks in Programming

See All in Programming
AIフル活用時代だからこそ学んでおきたい働き方の心得
Avatar for shinoyu shinoyu
0
140
AI Agent の開発と運用を支える Durable Execution #AgentsInProd
Avatar for izumin5210 izumin5210
7
2.3k
余白を設計しフロントエンド開発を 加速させる
Avatar for karacoro / からころ tsukuha
7
2.1k
2026年 エンジニアリング自己学習法
Avatar for yumechi(Motoki Hirao) yumechi
0
140
Package Management Learnings from Homebrew
Avatar for Mike McQuaid mikemcquaid
0
230
AWS re:Invent 2025参加 直前 Seattle-Tacoma Airport(SEA)におけるハードウェア紛失インシデントLT
Avatar for tetutetu214 tetutetu214
2
110
カスタマーサクセス業務を変革したヘルススコアの実現と学び
Avatar for Tomoyuki Hamaguchi _hummer0724
0
700
LLM Observabilityによる 対話型音声AIアプリケーションの安定運用
Avatar for Hiroyuki Moriya gekko0114
2
430
Smart Handoff/Pickup ガイド - Claude Code セッション管理
Avatar for rasshii yukiigarashi
0
140
AI時代のキャリアプラン「技術の引力」からの脱出と「問い」へのいざない / tech-gravity
Avatar for MinoDriven minodriven
21
7.2k
インターン生でもAuth0で 認証基盤刷新が出来るのか
Avatar for takumi taku271
0
190
MUSUBIXとは
Avatar for Hisaho nahisaho
0
130

Featured

See All Featured
Joys of Absence: A Defence of Solitary Play
Avatar for Sebastian Deterding codingconduct
1
290
A designer walks into a library…
Avatar for Paul Jervis Heath pauljervisheath
210
24k
Agile that works and the tools we love
Avatar for Rasmus Luckow-Nielsen rasmusluckow
331
21k
Automating Front-end Workflow
Avatar for Addy Osmani addyosmani
1371
200k
Building Experiences: Design Systems, User Experience, and Full Site Editing
Avatar for Michelle Schulp Hunt marktimemedia
0
410
What does AI have to do with Human Rights?
Avatar for Per Axbom axbom
PRO
0
2k
DBのスキルで生き残る技術 - AI時代におけるテーブル設計の勘所
Avatar for soudai sone soudai
PRO
62
50k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
Avatar for Kevin Liebholz kevinliebholz
37
6.3k
WCS-LA-2024
Avatar for Leonardo Collado-Torres lcolladotor
0
450
Faster Mobile Websites
Avatar for Dean Hume deanohume
310
31k
Stewardship and Sustainability of Urban and Community Forests
Avatar for Eric Wiseman pwiseman
0
110
Test your architecture with Archunit
Avatar for Yoan thirion
1
2.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