Recommended
More Related Content
What's hot
What's hot (19)
Similar to Frontend Crash Course
Similar to Frontend Crash Course (20)
More from Aaron Lamphere
More from Aaron Lamphere (17)
Recently uploaded
Recently uploaded (20)
Frontend Crash Course
- 1. Frontend Crash Course September 2017 WIFI: In3-Guest http://bit.ly/crash-course-html 1
- 2. Instructor Sonja Duric Full-Time Thinkful Student SANS Lethal Forensicator PSL Enthusiast Wifi: In3 - Guest TAs http://bit.ly/frontend-crash-course 2
- 3. About you What's your name? What brought you here today? What is your programming experience? Wifi: In3 - Guest http://bit.ly/frontend-crash-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: In3 - Guest http://bit.ly/frontend-crash-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: In3 - Guest http://bit.ly/frontend-crash-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-courseWifi: In3 - Guest http://bit.ly/frontend-crash-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: In3 - Guest http://bit.ly/frontend-crash-course 7
- 8. Client/Servers Client (sends requests) Frontend Developer Manages what user sees Server (sends response) Backend Developer Manages what app does Wifi: In3 - Guest http://bit.ly/frontend-crash-course 8
- 9. Example: facebook.com Client Server Open browser and navigate to facebook.com HTML, CSS, & Javascrip 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 Wifi: In3 - Guest http://bit.ly/frontend-crash-course
- 10. How this relates to today Client Server Open browser and navigate to facebook.com HTML, CSS, & Javascrip 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: In3 - Guest http://bit.ly/frontend-crash-course
- 11. HTML - (HyperText Markup Language) <h1 class="intro">Hi there!</h1> Attribute Opening section tag h1 element Closing section tag Wifi: In3 - Guest http://bit.ly/frontend-crash-course 11
- 12. HTML - structure <html> <body> <h1 class="title">Hello world!</h1> </body> </html> Wifi: In3 - Guest http://bit.ly/frontend-crash-course 12
- 13. HTML tags, elements, attributes Wifi: In3 - Guest http://bit.ly/frontend-crash-course 13
- 14. HTML, by itself, is boring Wifi: In3 - Guest http://bit.ly/frontend-crash-course 14
- 15. CSS - (Cascading Style Sheets) h1 { color: blue; } Value Property Selector Wifi: In3 - Guest http://bit.ly/frontend-crash-course 15
- 16. CSS selectors, properties, values Wifi: In3 - Guest http://bit.ly/frontend-crash-course 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/ Wifi: In3 - Guest http://bit.ly/frontend-crash-course 17
- 18. Margin, border, and padding Wifi: In3 - Guest http://bit.ly/frontend-crash-course 18
- 19. Margin, border, and padding Wifi: In3 - Guest http://bit.ly/frontend-crash-course 19
- 20. Real developers use Google... a lot Wifi: In3 - Guest http://bit.ly/frontend-crash-course 20
- 21. Assignments for tonight Go to: http://bit.ly/tf-html-classroom Wifi: In3 - Guest http://bit.ly/frontend-crash-course 21
- 22. Ways to keep learning 22
- 23. For aspiring developers, bootcamps fill the gap 23
- 24. 91%91% 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 24
- 25. Our students receive unprecedented support Learning Mentor Career MentorProgram Manager Local Community You 25
- 26. 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 26
- 27. Thinkful Two-Week Trial Talk to one of us and email benjy@thinkful.combenjy@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 for one week after eventOffer valid for one week after event BenjyBenjy SchechnerSchechner Education Advisor 27