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

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

Ire Aderinokun
February 18, 2017
Programming
3
270

Building "The Loop" (Introduction to Frontend Development)

forLoop Covenant University conference

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
ireade
4
1.1k
Becoming a GDE & Overcoming Stage Fright
ireade
4
450
Web Components: The Future of Web Applications
ireade
6
1.6k
What about CSS? Progressive Enhancement & CSS (Updated)
ireade
4
450
Demystifying Angular Universal
ireade
5
540
Introduction to UI/UX Design
ireade
9
640
Building Modern Progressive Web Apps
ireade
7
1.6k
What about CSS? Progressive Enhancement & CSS
ireade
9
4.3k
Hosting with Firebase
ireade
3
780

Other Decks in Programming

See All in Programming
20250326_生成AIによる_レビュー承認システムの実現.pdf
takahiromatsui
17
6.1k
ミリしらMCP勉強会
watany
4
670
Going Structural with Named Tuples
bishabosha
0
190
WordPress Playground for Developers
iambherulal
0
120
MCP世界への招待: AIエンジニアが創る次世代エージェント連携の世界
gunta
4
830
今から始めるCursor / Windsurf / Cline
kengo_hayano
0
110
AI時代のプログラミング教育 / programming education in ai era
kishida
23
21k
Fluent UI Blazor 5 (alpha)の紹介
tomokusaba
0
160
アーキテクトと美学 / Architecture and Aesthetics
nrslib
12
3.2k
Windows版PHPのビルド手順とPHP 8.4における変更点
matsuo_atsushi
0
390
PHPでお金を扱う時、終わりのない 謎の1円調査の旅にでなくて済む方法
nakka
4
1.4k
エンジニア未経験が最短で戦力になるためのTips
gokana
0
240

Featured

See All Featured
Learning to Love Humans: Emotional Interface Design
aarron
273
40k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
356
30k
Six Lessons from altMBA
skipperchong
27
3.7k
The Power of CSS Pseudo Elements
geoffreycrofte
75
5.7k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
160
15k
Visualization
eitanlees
146
16k
Build your cross-platform service in a week with App Engine
jlugia
229
18k
The Straight Up "How To Draw Better" Workshop
denniskardys
232
140k
Building Flexible Design Systems
yeseniaperezcruz
328
38k
How to train your dragon (web standard)
notwaldorf
91
5.9k
Writing Fast Ruby
sferik
628
61k
How to Ace a Technical Interview
jacobian
276
23k

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