Thinkful DC FrontEnd Crash Course - HTML & CSS
- 1. Frontend Crash Course December 2017 WIFI: MakeOffices 5Ghz Password: Internet!23 http://bit.ly/frontend-course 1
- 2. Instructor TJ Stalcup Lead DC Mentor @Thinkful API Evangelist @WealthEngine Enlightened Ingress Agent Wifi: MakeOffices 5Ghz Password: Internet!23 TAs http://bit.ly/frontend-course 2
- 3. About you What's your name? What brought you here today? What is your programming experience? Wifi: MakeOffices 5Ghz Password: Internet!23 http://bit.ly/frontend-course 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. Wifi: MakeOffices 5Ghz Password: Internet!23 http://bit.ly/frontend-course 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 Wifi: MakeOffices 5Ghz Password: Internet!23 http://bit.ly/frontend-course 5
- 6. Agenda Learn key HTML and CSS concepts (30 min) Go over the assignments (10 min) Complete challenges with support (30 min) Steps to continue learning (10 min) http://bit.ly/html-crash-course Wifi: MakeOffices 5Ghz Password: Internet!23 http://bit.ly/frontend-course 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 Wifi: MakeOffices 5Ghz Password: Internet!23 http://bit.ly/frontend-course 7
- 8. Client/Servers Client (sends requests) Frontend Developer Manages what user sees Server (sends response) Backend Developer Manages what app does Wifi: MakeOffices 5Ghz Password: Internet!23 http://bit.ly/frontend-course 8
- 9. Example: facebook.com Client Server Open browser and navigate to facebook.com HTML, CSS, & Javascript render newsfeed Request Response Algorithm determines content of feed. Sends back HTML, CSS, Javascript files Application LogicApplication Logic Initial requestInitial request Following responseFollowing response http://bit.ly/html-crash-course 9 http://bit.ly/frontend-course Wifi: MakeOffices 5Ghz Password: Internet!23
- 10. How this relates to today Client Server Open browser and navigate to facebook.com HTML, CSS, & Javascript render newsfeed Request 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 brower will render http://bit.ly/html-crash-course 10 Wifi: MakeOffices 5Ghz Password: Internet!23 http://bit.ly/frontend-course
- 11. HTML - (HyperText Markup Language) <h1 class="intro">Hi there!</h1> Attribute Opening section tag h1 element Closing section tag Wifi: MakeOffices 5Ghz Password: Internet!23 http://bit.ly/frontend-course 11
- 12. HTML - structure <html> <body> <h1 class="title">Hello world!</h1> </body> </html> Wifi: MakeOffices 5Ghz Password: Internet!23 http://bit.ly/frontend-course 12
- 13. HTML tags, elements, attributes Wifi: MakeOffices 5Ghz Password: Internet!23 http://bit.ly/frontend-course 13
- 14. HTML, by itself, is boring Wifi: MakeOffices 5Ghz Password: Internet!23 http://bit.ly/frontend-course 14
- 15. Assignments for tonight Go to: http://bit.ly/tf-html-classroom Wifi: MakeOffices 5Ghz Password: Internet!23 http://bit.ly/frontend-course 15
- 16. CSS - (Cascading Style Sheets) h1 { color: blue; } Value Property Selector Wifi: MakeOffices 5Ghz Password: Internet!23 http://bit.ly/frontend-course 16
- 17. CSS selectors, properties, values Wifi: MakeOffices 5Ghz Password: Internet!23 http://bit.ly/frontend-course 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/ Wifi: MakeOffices 5Ghz Password: Internet!23 http://bit.ly/frontend-course 18
- 19. Margin, border, and padding Wifi: MakeOffices 5Ghz Password: Internet!23 http://bit.ly/frontend-course 19
- 20. Margin, border, and padding Wifi: MakeOffices 5Ghz Password: Internet!23 http://bit.ly/frontend-course 20
- 21. Real developers use Google... a lot Wifi: MakeOffices 5Ghz Password: Internet!23 http://bit.ly/frontend-course 21
- 22. Assignments for tonight Go to: http://bit.ly/tf-html-classroom Wifi: MakeOffices 5Ghz Password: Internet!23 http://bit.ly/frontend-course 22
- 23. Ways to keep learning 23
- 24. For aspiring developers, bootcamps fill the gap 24
- 25. 92%92% job-placement rate + job guarantee Link for the third party audit jobs report: https://www.thinkful.com/bootcamp-jobs-statshttps://www.thinkful.com/bootcamp-jobs-stats Thinkful's track record of getting students jobs 25
- 26. Our students receive unprecedented support Learning Mentor Career MentorProgram Manager DC Community You 26
- 27. Mentorship enables flexible learning Learn anywhere, anytime, & at your own pace You don't have to quitYou don't have to quit your job to startyour job to start career transitioncareer transition 27
- 28. Thinkful Two-Week Trial Talk to one of us and email [email protected]@thinkful.com to learn more Two-week Free Course Trial Start with HTML, CSS and JavaScript Unlimited QAs sessions Option to continue with full bootcamp Financing & scholarships available Offer valid tonight onlyOffer valid tonight only BenjyBenjy SchechnerSchechner Education Advisor 28