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
290

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
480
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
480
Demystifying Angular Universal
Avatar for Ire Aderinokun ireade
5
560
Introduction to UI/UX Design
Avatar for Ire Aderinokun ireade
9
690
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.6k
Hosting with Firebase
Avatar for Ire Aderinokun ireade
3
790

Other Decks in Programming

See All in Programming
AIの弱点、やっぱりプログラミングは人間が(も)勉強しよう / YAPC AI and Programming
Avatar for Naoki Kishida kishida
9
3.9k
組織もソフトウェアも難しく考えない、もっとシンプルな考え方で設計する #phpconfuk
Avatar for hideki kinjyo o0h
PRO
10
4.1k
問題の見方を変える「システム思考」超入門
Avatar for panda_program panda_program
0
190
イベントストーミングのはじめかた / Getting Started with Event Storming
Avatar for nrs nrslib
1
350
Eloquentを使ってどこまでコードの治安を保てるのか？を新人が考察してみた
Avatar for ito_kohhh itokoh0405
0
3.1k
Honoを技術選定したAI要件定義プラットフォームAcsimでの意思決定
Avatar for Tadashi Shigeoka codenote
0
150
Agentに至る道 〜なぜLLMは自動でコードを書けるようになったのか〜
Avatar for mackee mackee
4
670
例外処理を理解して、設計段階からエラーを見つけやすく、起こりにくく #phpconfuk
Avatar for Takuma Kajikawa kajitack
12
5.8k
知られているようで知られていない JavaScriptの仕様 4選
Avatar for syumai syumai
0
570
AIを駆使して新しい技術を効率的に理解する方法
Avatar for nogu nogu66
0
600
The Missing Link in Angular's Signal Story: Resource API and httpResource
Avatar for Manfred Steyer manfredsteyer
PRO
0
110
複数チーム並行開発下でのコード移行アプローチ ~手動 Codemod から「生成AI 活用」への進化
Avatar for ANDPAD inc andpad
0
150

Featured

See All Featured
Sharpening the Axe: The Primacy of Toolmaking
Avatar for Bryan Cantrill bcantrill
46
2.6k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
Avatar for panda_program panda_program
118
20k
The Illustrated Children's Guide to Kubernetes
Avatar for Chris Short chrisshort
51
51k
Performance Is Good for Brains [We Love Speed 2024]
Avatar for Tammy Everts tammyeverts
12
1.3k
Typedesign – Prime Four
Avatar for Hannes Fritz hannesfritz
42
2.9k
Embracing the Ebb and Flow
Avatar for Simon Collison colly
88
4.9k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
Avatar for soudai sone soudai
PRO
192
56k
Testing 201, or: Great Expectations
Avatar for Joseph Mastey jmmastey
46
7.8k
The Web Performance Landscape in 2024 [PerfNow 2024]
Avatar for Tammy Everts tammyeverts
11
920
Building Applications with DynamoDB
Avatar for Matt Wood mza
96
6.7k
Being A Developer After 40
Avatar for Adrian Kosmaczewski akosma
91
590k
What's in a price? How to price your products and services
Avatar for Michael Herold michaelherold
246
12k

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