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
460
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
Bytecode Manipulation 으로 생산성 높이기
Avatar for Daekyu bigstark
2
360
Java on Azure で LangGraph！
Avatar for Kohei Saito kohei3110
0
160
社内での開発コミュニティ活動とモジュラーモノリス標準化事例のご紹介/xPalette and Introduction of Modular monolith standardization
Avatar for Mitsuharu Maruyama m4maruyama
1
130
コードの90%をAIが書く世界で何が待っているのか / What awaits us in a world where 90% of the code is written by AI
Avatar for r-kagaya rkaga
41
27k
Webからモバイルへ Vue.js × Capacitor 活用事例
Avatar for Naoki Haba naokihaba
0
730
Spring gRPC で始める gRPC 入門 / Introduction to gRPC with Spring gRPC
Avatar for mackey0225 mackey0225
2
520
プロダクト開発でも使おう 関数のオーバーロード
Avatar for yoiwamoto yoiwamoto
0
160
アンドパッドの Go 勉強会「 gopher 会」とその内容の紹介
Avatar for ANDPAD inc andpad
0
250
Cloudflare Realtime と Workers でつくるサーバーレス WebRTC
Avatar for Taiyu Yoshizawa nekoya3
0
420
DroidKnights 2025 - 다양한 스크롤 뷰에서의 영상 재생
Avatar for 이가은 gaeun5744
3
300
iOSアプリ開発で 関数型プログラミングを実現する The Composable Architectureの紹介
Avatar for yimajo yimajo
2
210
GraphRAGの仕組みまるわかり
Avatar for とすり tosuri13
7
440

Featured

See All Featured
Practical Tips for Bootstrapping Information Extraction Pipelines
Avatar for Matthew Honnibal honnibal
PRO
20
1.3k
It's Worth the Effort
Avatar for 3n 3n
184
28k
Dealing with People You Can't Stand - Big Design 2015
Avatar for Cassini Nazir cassininazir
367
26k
Done Done
Avatar for chrislema chrislema
184
16k
Building Adaptive Systems
Avatar for Chris Keathley keathley
43
2.6k
Designing Dashboards & Data Visualisations in Web Apps
Avatar for Des Traynor destraynor
231
53k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
Avatar for Morgane Peng morganepeng
130
19k
Scaling GitHub
Avatar for Zach Holman holman
459
140k
Art, The Web, and Tiny UX
Avatar for Lynn Fisher lynnandtonic
299
21k
Balancing Empowerment & Direction
Avatar for Lara Hogan lara
1
340
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
Avatar for Sam Stephenson sstephenson
161
15k
ReactJS: Keep Simple. Everything can be a component!
Avatar for Pedro Nauck pedronauck
667
120k

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