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
270

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
460
Demystifying Angular Universal
Avatar for Ire Aderinokun ireade
5
540
Introduction to UI/UX Design
Avatar for Ire Aderinokun ireade
9
650
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.3k
Hosting with Firebase
Avatar for Ire Aderinokun ireade
3
780

Other Decks in Programming

See All in Programming
Cursorを活用したAIプログラミングについて 入門
Avatar for 株式会社レクト rect
0
160
By the way Google Cloud Next 2025に行ってみてどうだった
Avatar for Kento.Yamada ymd65536
0
110
RubyKaigi Dev Meeting 2025
Avatar for Aaron Patterson tenderlove
1
1.3k
個人開発の学生アプリが企業譲渡されるまで
Avatar for akidon0000 akidon0000
2
1.1k
Dissecting and Reconstructing Ruby Syntactic Structures
Avatar for ydah ydah
3
2k
M5UnitUnified 最新動向 2025/05
Avatar for GOB gob
0
120
GitHub Copilot for Azureを使い倒したい
Avatar for Kento.Yamada ymd65536
1
310
Thank you <💅>, What's the Next?
Avatar for Hayashibara Yuto ahoxa
1
590
Rubyの!メソッドをちゃんと理解する
Avatar for Yuto Urushima alstrocrack
1
120
Deoptimization: How YJIT Speeds Up Ruby by Slowing Down / RubyKaigi 2025
Avatar for Takashi Kokubun k0kubun
1
1.9k
Serving TUIs over SSH with Go
Avatar for Carlos Alexandro Becker caarlos0
0
570
Improve my own Ruby
Avatar for monochrome sisshiki1969
0
100

Featured

See All Featured
Speed Design
Avatar for Sergey Chernyshev sergeychernyshev
29
920
Code Reviewing Like a Champion
Avatar for maltzj maltzj
523
40k
Fight the Zombie Pattern Library - RWD Summit 2016
Avatar for Marcelo Somers marcelosomers
233
17k
Making the Leap to Tech Lead
Avatar for Ryan Cromwell cromwellryan
133
9.2k
Building Flexible Design Systems
Avatar for Yesenia Perez-Cruz yeseniaperezcruz
329
39k
The Psychology of Web Performance [Beyond Tellerrand 2023]
Avatar for Tammy Everts tammyeverts
47
2.7k
Designing for humans not robots
Avatar for Tammie Lister tammielis
253
25k
Measuring & Analyzing Core Web Vitals
Avatar for Philip Tellis bluesmoon
7
410
Performance Is Good for Brains [We Love Speed 2024]
Avatar for Tammy Everts tammyeverts
10
780
RailsConf 2023
Avatar for Aaron Patterson tenderlove
30
1.1k
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
Avatar for Eileen M. Uchitelle eileencodes
23
2.7k
Writing Fast Ruby
Avatar for Erik Berlin sferik
628
61k

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