Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Building "The Loop" (Introduction to Frontend Development)
Search
Ire Aderinokun
February 18, 2017
Programming
3
260
Building "The Loop" (Introduction to Frontend Development)
forLoop Covenant University conference
Ire Aderinokun
February 18, 2017
Tweet
Share
More Decks by Ire Aderinokun
See All by Ire Aderinokun
Web Accessibility: It Doesn't Have to Be Hard
ireade
4
990
Becoming a GDE & Overcoming Stage Fright
ireade
4
430
Web Components: The Future of Web Applications
ireade
6
1.5k
What about CSS? Progressive Enhancement & CSS (Updated)
ireade
4
420
Demystifying Angular Universal
ireade
5
530
Introduction to UI/UX Design
ireade
9
580
Building Modern Progressive Web Apps
ireade
7
1.5k
What about CSS? Progressive Enhancement & CSS
ireade
9
4.1k
Hosting with Firebase
ireade
3
750
Other Decks in Programming
See All in Programming
継続的な活動で築く地方エンジニアの道
myamashii
2
350
Rubyのパフォーマンスプロファイリングの改善 / Enhancing performance profiling for Ruby
osyoyu
1
410
Play Billing Library 7.0.0 変更点まとめ@potatotips#88
kako351
0
160
ピグパーティにおけるMongoDB CommunityバージョンからAtlasへの移行事例
10969hotaka
0
130
Prompt FlowによるLLMアプリケーション開発
yuto2000
1
1k
3 Effective Rules for Success with Signals in Angular
manfredsteyer
PRO
0
120
Folding Cheat Sheet #7
philipschwarz
PRO
0
150
DMMプラットフォームにおけるTiDBの導入から運用まで
pospome
7
3k
最古の関数型言語「Lisp」ことはじめ / lisp_in_kamiyama
uhooi
1
190
CSC307 Lecture 14
javiergs
PRO
0
220
生成AIをkintoneに連携してみた
hideg
0
230
小さな開発会社を作った理由
polidog
0
1.9k
Featured
See All Featured
Speed Design
sergeychernyshev
9
270
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
248
20k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
12
3.8k
Large-scale JavaScript Application Architecture
addyosmani
506
110k
Art, The Web, and Tiny UX
lynnandtonic
291
20k
Leading Effective Engineering Teams 2024
addyosmani
3
300
What’s in a name? Adding method to the madness
productmarketing
PRO
21
2.9k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
34
1.9k
What's in a price? How to price your products and services
michaelherold
239
11k
4 Signs Your Business is Dying
shpigford
178
21k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
189
16k
Fireside Chat
paigeccino
25
2.8k
Transcript
Building “The Loop”: Frontend forLoop Covenant University Ire Aderinokun
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
What We’ll Cover • Introduction to Markup and Styling •
Introduction Frontend Frameworks • Building “The Loop”
Introduction to Markup & Styling
None
None
What is HTML? HTML (Hyper Text Markup Language) is structure
of Web Pages. HTML elements define the content that is represented on any page.
<p> Hello, world! </p> Opening Tag Closing Tag Content
None
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
What is CSS? CSS (Cascading Style Sheets) describes how HTML
elements are to be displayed.
p { font-size: red; } Selector Value Property
None
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
Introduction to Frontend Frameworks
Why Frontend Frameworks?
None
Building “The Loop”
None
Join In! • Install angular-cli using npm • Clone the
starting repository from bit.ly/theloop-fe
The Final Product http://bit.ly/theloop-app
Thank You! @IreAderinokun