Slide 1

Slide 1 text

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

,

, …

Heading

Paragraph

Footer Link (anchor) Text Input Field
General Purpose Element

Slide 11

Slide 11 text

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

Slide 21

Slide 21 text

The Final Product http://bit.ly/theloop-app

Slide 22

Slide 22 text

Thank You! @IreAderinokun