Building “The Loop”: Frontend
forLoop Covenant University
Ire Aderinokun
Slide 2
Slide 2 text
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
Slide 3
Slide 3 text
What We’ll Cover
• Introduction to Markup and Styling
• Introduction Frontend Frameworks
• Building “The Loop”
Slide 4
Slide 4 text
Introduction to
Markup & Styling
Slide 5
Slide 5 text
No content
Slide 6
Slide 6 text
No content
Slide 7
Slide 7 text
What is HTML?
HTML (Hyper Text Markup Language) is structure of
Web Pages. HTML elements define the content that
is represented on any page.
Slide 8
Slide 8 text
Hello, world!
Opening Tag
Closing Tag
Content
Slide 9
Slide 9 text
No content
Slide 10
Slide 10 text
Some HTML Elements
Element Description
Sets the page as an HTML page
What is CSS?
CSS (Cascading Style Sheets) describes how HTML
elements are to be displayed.
Slide 12
Slide 12 text
p { font-size: red; }
Selector
Value
Property
Slide 13
Slide 13 text
No content
Slide 14
Slide 14 text
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
Slide 15
Slide 15 text
Introduction to
Frontend Frameworks
Slide 16
Slide 16 text
Why Frontend Frameworks?
Slide 17
Slide 17 text
No content
Slide 18
Slide 18 text
Building “The Loop”
Slide 19
Slide 19 text
No content
Slide 20
Slide 20 text
Join In!
• Install angular-cli using npm
• Clone the starting repository from
bit.ly/theloop-fe