Fcc1219
- 1. Frontend Crash CourseFrontend Crash Course December 2017 bit.ly/frontend-phx codepen.io 1
- 2. About us Dave Hoel, Instructor Software Developer, Assa Abloy Thinkful Graduate Dixon Begay Software Engineer Consultant Thinkful TA 2
- 3. About you What's your name? What brought you here today? What is your programming experience? 3
- 4. About Thinkful We train developers and data scientists through 1x1 mentorship and project-based learning. Guaranteed.Guaranteed. 4
- 5. Thinkful's Free Resource HTML, CSS and JavaScript Unlimited mentor-led Q&A sessions Personal Program Manager OnlyOnly available during this eventavailable during this event bit.ly/tf-free-coursebit.ly/tf-free-course 5
- 6. Agenda Learn key HTML and CSS concepts Go over the assignments Complete challenges with support 6
- 7. How the web works Type a URL from a client (e.g. google.com) Browser sends an HTTP request asking for specific files Browser receives those files and renders them as a website 7
- 8. Client/Servers Client (sends requests) Frontend Developer Manages what user sees Server (sends response) Backend Developer Manages what app does 8
- 9. Example: facebook.com Client Server Open browser and navigate to facebook.com HTML, CSS, & Javascrip render newsfeed Request Response 9 Algorithm determines content of feed. Sends back HTML, CSS, Javascript files Application LogicApplication Logic Initial requestInitial request Following responseFollowing response
- 10. How this relates to today Client Server Open browser and navigate to facebook.com HTML, CSS, & JavaScript render newsfeed Request 10 Response Algorithm determines content of feed Sends back HTML, CSS, JavaScript files Application LogicApplication LogicInitial requestInitial request Following responseFollowing response We'll be writing these files that the browser will render
- 11. HTML - (HyperText Markup Language) <h1>Hi there!</h1> ContentOpening section tag h1 element Closing section tag bit.ly/website-la 11
- 12. HTML - (HyperText Markup Language) <h1 class="intro">Hi there!</h1> Attribute Opening section tag h1 element Closing section tag bit.ly/website-la 12
- 13. HTML - structure <html> <body> <h1 class="title">Hello world!</h1> </body> </html> bit.ly/website-la 13
- 14. HTML tags, elements, attributes 14
- 15. HTML, by itself, is boring 15
- 16. CSS - (Cascading Style Sheets) h1 { color: blue; } Value Property Selector bit.ly/website-la 16
- 17. CSS selectors, properties, values 17
- 18. CSS has lots of properties and values p { color: #CCCCCC; font-family: helvetica; border: 5px solid blue; } div { background-image: url("imageFile.jpg"); width: 50%; height: 70%; } .loginButton { border: none; background-color: rgba(34, 124, 45, 0.5); } Lots of properties: http://www.htmldog.com/references/css/properties/ 18
- 19. Margin, border, and padding 19
- 20. Margin, border, and padding 20
- 21. Real developers use Google... a lot 21
- 22. Assignments for tonight Go to: http://bit.ly/tf-html-classroom 22
- 23. 23
- 24. Thinkful's Free Resource HTML, CSS and JavaScript Unlimited mentor-led Q&A sessions Personal Program Manager OnlyOnly availableavailable during this eventduring this event bit.ly/tf-free-coursebit.ly/tf-free-course 24