Building "The Loop" (Introduction to Frontend Development)

forLoop Covenant University conference

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
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
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
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?
18. Building “The Loop”
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