Feccphx9:25
- 1. Frontend Crash Course September 2017 WIFI: The Department Guest http://bit.ly/frontend-phx 1
- 2. Instructor Dave Hoel Full Stack Web Developer Thinkful Grad TAs Mitch Cravens Front-end Engineer Thinkful Mentor 2
- 3. About you What's your name? What brought you here today? What is your programming experience? 3
- 4. 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. 4
- 5. Suggestions for learning Don't get discouraged, struggle leads to masterystruggle leads to mastery Don't be shy, take full advantage of our supporttake full advantage of our support 5
- 6. Agenda Learn key HTML and CSS concepts (20 min) Go over the assignments (10 min) Complete challenges with support (30 min) Steps to continue learning (10 min) 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 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. 23
- 24. 24
- 25. Our results Zachary HoltZachary Holt Web Developer Sierra GreggSierra Gregg Software Engineer JP EarnestJP Earnest Web Developer Web Development Bootcamp Jobs Report 89%89% Grad job-placement rateGrad job-placement rate $17,420$17,420 Average salary increaseAverage salary increase 25
- 26. Take a Thinkful tour! Talk to us now or be on the look out for our email Get a tour of Thinkful's program to see if project- based, online learning is a good fit for you While we're at it, give us feedback on tonight's workshop. 📬 👀 26