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
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
510
Demystifying Angular Universal
Avatar for Ire Aderinokun ireade
5
570
Introduction to UI/UX Design
Avatar for Ire Aderinokun ireade
9
720
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
メタプログラミングで実現する「コードを仕様にする」仕組み/nikkei-tech-talk43
Avatar for 日本経済新聞社 エンジニア採用事務局 nikkei_engineer_recruiting
0
200
Linux Kernelの1文字のミスで 権限昇格ができた話
Avatar for rona rqda
0
2k
Windows on Ryzen and I
Avatar for 瀬尾佳隆 seosoft
0
340
ふつうのRubyist、ちいさなデバイス、大きな一年 / Ordinary Rubyists, Tiny Devices, Big Year
Avatar for chobishiba chobishiba
1
480
AIに任せる範囲を安全に広げるためにやっていること
Avatar for Masashi Fukuzawa fukucheee
0
150
脱 雰囲気実装！ AgentCoreを良い感じに WEBアプリケーションに組み込むために
Avatar for Takuya Yonezawa takuyay0ne
3
370
Claude Codeセッション現状確認 2026福岡 / fukuoka-aicoding-00-beacon
Avatar for monochromegane monochromegane
4
450
ポーリング処理廃止によるイベント駆動アーキテクチャへの移行
Avatar for Seitaro Fujigaki seitarof
3
1.1k
20260228_JAWS_Beginner_Kansai
Avatar for Takuya Yonezawa takuyay0ne
5
600
GoのDB アクセスにおける 「型安全」と「柔軟性」の両立 - Bob という選択肢
Avatar for tak tak848
0
260
new(1.26) ← これすき / kamakura.go #8
Avatar for utagawa kiki utgwkk
0
2.6k
存在論的プログラミング： 時間と存在を記述する
Avatar for Akihito Koriyama koriym
3
290

Featured

See All Featured
[RailsConf 2023] Rails as a piece of cake
Avatar for Vladimir Dementyev palkan
59
6.4k
コードの90%をAIが書く世界で何が待っているのか / What awaits us in a world where 90% of the code is written by AI
Avatar for r-kagaya rkaga
61
43k
Why Your Marketing Sucks and What You Can Do About It - Sophie Logan
Avatar for Sophie Logan marketingsoph
0
110
Dealing with People You Can't Stand - Big Design 2015
Avatar for Cassini Nazir cassininazir
367
27k
How to Grow Your eCommerce with AI & Automation
Avatar for Katarina Dahlin katarinadahlin
PRO
1
150
AI in Enterprises - Java and Open Source to the Rescue
Avatar for ivargrimstad ivargrimstad
0
1.2k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
Avatar for Michelle Schulp Hunt marktimemedia
31
2.7k
Art, The Web, and Tiny UX
Avatar for Lynn Fisher lynnandtonic
304
21k
The Curse of the Amulet
Avatar for Matthew Lei leimatthew05
1
10k
Stewardship and Sustainability of Urban and Community Forests
Avatar for Eric Wiseman pwiseman
0
150
How to Align SEO within the Product Triangle To Get 
Buy-In & Support - #RIMC
Avatar for Aleyda Solis aleyda
1
1.4k
Site-Speed That Sticks
Avatar for Harry Roberts csswizardry
13
1.1k

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