Speaker Deck
Speaker Deck Pro
Sign in
Sign up
for free
Building "The Loop" (Introduction to Frontend Development)
Ire Aderinokun
February 18, 2017
Programming
4
220
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
ireade
4
830
ireade
4
350
ireade
6
1.2k
ireade
5
370
ireade
6
510
ireade
7
340
ireade
7
1.3k
ireade
9
3.2k
ireade
3
580
Other Decks in Programming
See All in Programming
adoranwodo
0
190
kyoheig3
0
410
bkuhlmann
4
610
dictoss
0
160
nbkouhou
1
1k
shin1x1
0
580
hanhan1978
0
290
masayaaoyama
4
520
line_developers_tw
0
370
ajstarks
2
550
tommykw
1
310
zsmb
1
120
Featured
See All Featured
myddelton
109
11k
pedronauck
652
110k
productmarketing
5
640
maggiecrowley
8
400
philhawksworth
190
17k
stephaniewalter
260
11k
jacobian
255
20k
smashingmag
229
18k
bryan
30
3.3k
keavy
106
14k
holman
448
130k
lauravandoore
11
1.2k
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