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
470
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
登壇は dynamic! な営みである / speech is dynamic
Avatar for Daichi KUDO da1chi
0
360
なんでRustの環境構築してないのにRust製のツールが動くの？ / Why Do Rust-Based Tools Run Without a Rust Environment?
Avatar for TOMIKAWA Sotaro ssssota
8
25k
ALL CODE BASE ARE BELONG TO STUDY
Avatar for uzulla uzulla
27
6.6k
あなたとKaigi on Rails / Kaigi on Rails + You
Avatar for Hiroshi Shimoju shimoju
0
180
Pythonに漸進的に型をつける
Avatar for Nealle nealle
1
120
Go言語の特性を活かした公式MCP SDKの設計
Avatar for hond hond0413
1
450
The Past, Present, and Future of Enterprise Java
Avatar for ivargrimstad ivargrimstad
0
580
タスクの特性や不確実性に応じた最適な作業スタイルの選択（ペアプロ・モブプロ・ソロプロ）と実践 / Optimal Work Style Selection: Pair, Mob, or Solo Programming.
Avatar for yuki honyanya
3
190
Developer Joy - The New Paradigm
Avatar for Holly Cummins hollycummins
1
350
Things You Thought You Didn’t Need To Care About That Have a Big Impact On Your Job
Avatar for Holly Cummins hollycummins
0
250
Software Architecture
Avatar for Henning Schwentner hschwentner
6
2.3k
AkarengaLT vol.38
Avatar for hashimoto-kei hashimoto_kei
1
110

Featured

See All Featured
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
Avatar for Joe Casabona jcasabona
34
2.5k
Improving Core Web Vitals using Speculation Rules API
Avatar for Sergey Chernyshev sergeychernyshev
21
1.2k
Measuring & Analyzing Core Web Vitals
Avatar for Philip Tellis bluesmoon
9
630
Stop Working from a Prison Cell
Avatar for Chris Michel hatefulcrawdad
271
21k
Put a Button on it: Removing Barriers to Going Fast.
Avatar for kastner kastner
60
4k
GraphQLの誤解/rethinking-graphql
Avatar for sonatard sonatard
73
11k
Why You Should Never Use an ORM
Avatar for John Nunemaker jnunemaker
PRO
59
9.6k
What's in a price? How to price your products and services
Avatar for Michael Herold michaelherold
246
12k
Done Done
Avatar for chrislema chrislema
185
16k
Statistics for Hackers
Avatar for Jake VanderPlas jakevdp
799
220k
The Art of Programming - Codeland 2020
Avatar for Erika Heidi erikaheidi
56
14k
Docker and Python
Avatar for Tania Allard trallard
46
3.6k

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