Recommended
More Related Content
Similar to Ffcc1120
Similar to Ffcc1120 (20)
More from Thinkful
More from Thinkful (20)
Recently uploaded
Recently uploaded (20)
Ffcc1120
- 1. Frontend Crash Course November 2017 bit.ly/frontend-phx 1
- 2. About us InstructorInstructor Jessica Cottrell Program Manager, Executive Education @ ASU Thinkful Grad TAsTAs Dixon Begay Shannon Gallagher 2
- 3. About Thinkful Thinkful helps people become developers or data scientists through 1-on-1 mentorship and project-based learning These workshops are built using this approach.These workshops are built using this approach. 3
- 4. About you What's your name? What brought you here today? What is your programming experience? 4
- 5. Agenda Learn key HTML and CSS concepts Go over the assignments Complete challenges with support Steps to continue learning 5
- 6. 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 6
- 7. Client/Servers Client (sends requests) Frontend Developer Manages what user sees Server (sends response) Backend Developer Manages what app does 7
- 8. Example: facebook.com Client Server Open browser and navigate to facebook.com HTML, CSS, & Javascrip render newsfeed Request Response 8 Algorithm determines content of feed. Sends back HTML, CSS, Javascript files Application LogicApplication Logic Initial requestInitial request Following responseFollowing response
- 9. How this relates to today Client Server Open browser and navigate to facebook.com HTML, CSS, & JavaScript render newsfeed Request 9 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
- 10. HTML - (HyperText Markup Language) <h1>Hi there!</h1> ContentOpening section tag h1 element Closing section tag bit.ly/website-la 10
- 11. HTML - (HyperText Markup Language) <h1 class="intro">Hi there!</h1> Attribute Opening section tag h1 element Closing section tag bit.ly/website-la 11
- 12. HTML - structure <html> <body> <h1 class="title">Hello world!</h1> </body> </html> bit.ly/website-la 12
- 13. HTML tags, elements, attributes 13
- 14. HTML, by itself, is boring 14
- 15. CSS - (Cascading Style Sheets) h1 { color: blue; } Value Property Selector bit.ly/website-la 15
- 16. CSS selectors, properties, values 16
- 17. 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/ 17
- 18. Margin, border, and padding 18
- 19. Margin, border, and padding 19
- 20. Real developers use Google... a lot 20
- 21. Assignments for tonight Go to: http://bit.ly/tf-html-classroom 21
- 22. 22
- 23. Thinkful Free Two-Week Course http://bit.ly/tf-trial Start with HTML, CSS and JavaScript Unlimited mentor Q&A sessions Personal Program Manager Option to continue with full bootcamp Financing & scholarships available Only available during this event 23