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

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

Sponsored · SiteGround - Reliable hosting with speed, security, and support you can count on. →
Avatar for Ire Aderinokun Ire Aderinokun
February 18, 2017
Programming
320
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
500
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
520
Demystifying Angular Universal
Avatar for Ire Aderinokun ireade
5
580
Introduction to UI/UX Design
Avatar for Ire Aderinokun ireade
9
740
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
5k
Hosting with Firebase
Avatar for Ire Aderinokun ireade
3
810

Other Decks in Programming

See All in Programming
使用 Meilisearch 建立新聞搜尋工具
Avatar for johnroyer johnroyer
0
150
【やさしく解説 設計編・中級 #1】一つの車に、運転手は一人　～ある倉庫システムの事例から～
Avatar for HideyukiKitao panda728
PRO
0
180
吝嗇家のためのAI活用 / AI development for miser - ChatGPT + Issue Driven Development
Avatar for philomagi tooppoo
0
190
ビデオ通話が繋がる0.2秒で何が起きているのか
Avatar for Miyamoto Naoyuki supurazako
2
150
ランチタイムLT会3周年！ランチタイムLT会を3年間続けられたお話
Avatar for y-ohgi y0hgi
1
140
Embedded SREと共に達成した会員管理システムのAWS移行 - SRE NEXT 2026 ランチスポンサーセッション
Avatar for ニフティ株式会社 niftycorp
PRO
1
2.6k
任せる範囲はこう広がった / How the Scope of AI Delegation Has Expanded
Avatar for nrs nrslib
1
260
アルゴリズムは何を圧縮しているのか ─ Haskell から育った「圧縮代数」というメンタルモデル
Avatar for Naoya Ito naoya
16
3.5k
フィードバックで育てるAI開発
Avatar for Kota Minato kotaminato
1
120
これからAgentCoreを触る方へ トレンドはGatewayです
Avatar for Har1101 har1101
6
500
AI 輔助遺留系統現代化的經驗分享
Avatar for James Wang jame2408
1
1.2k
AIキャラアプリkaiwaの低遅延音声通話基盤をどう作ったか - AWS Gravitonで支える低遅延・低コストAI Agent基盤
Avatar for 最上土川 mogamit
0
170

Featured

See All Featured
Marketing to machines
Avatar for Jono Alderson jonoalderson
1
5.6k
Six Lessons from altMBA
Avatar for Skipper Chong Warson skipperchong
29
4.3k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
Avatar for Eileen M. Uchitelle eileencodes
38
2.9k
Art, The Web, and Tiny UX
Avatar for Lynn Fisher lynnandtonic
304
22k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
Avatar for Rebecca Miller-Webster rmw
35
3.6k
The Cost Of JavaScript in 2023
Avatar for Addy Osmani addyosmani
55
10k
Getting science done with accelerated Python computing platforms
Avatar for Jacob Tomlinson jacobtomlinson
2
310
Unlocking the hidden potential of vector embeddings in international SEO
Avatar for Frank van Dijk frankvandijk
0
870
The World Runs on Bad Software
Avatar for Brandon Keepers bkeepers
PRO
72
12k
Understanding Cognitive Biases in Performance Measurement
Avatar for Philip Tellis bluesmoon
32
3k
Java REST API Framework Comparison - PWX 2021
Avatar for Matt Raible mraible
34
9.5k
Sharpening the Axe: The Primacy of Toolmaking
Avatar for Bryan Cantrill bcantrill
46
2.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