Download as PDF, PPTX
HTML/CSS Crash Course
- 1. Frontend Crash Course August2017 WIFI: In3-Guest http://bit.ly/html-crash-course 1
- 2.
- 3. About you What's yourname? What brought you here today? What is your programming experience? http://bit.ly/html-crash-courseWifi: In3 - Guest 3
- 4. About Thinkful Thinkful helpspeople 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. http://bit.ly/html-crash-courseWifi: In3 - Guest 4
- 5. Suggestions for learning Don'tget discouraged, struggle leads to masterystruggle leads to mastery Don't be shy, take full advantage of our supporttake full advantage of our support http://bit.ly/html-crash-courseWifi: In3 - Guest 5
- 6. Agenda Learn key HTMLand 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-coursehttp://bit.ly/html-crash-courseWifi: In3 - Guest 6
- 7. How the webworks 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 http://bit.ly/html-crash-courseWifi: In3 - Guest 7
- 8. Client/Servers Client (sends requests) FrontendDeveloper Manages what user sees Server (sends response) Backend Developer Manages what app does http://bit.ly/html-crash-courseWifi: In3 - Guest 8
- 9. Example: facebook.com Client Server Openbrowser 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 http://bit.ly/html-crash-course Wifi: In3 - Guest
- 10. How this relatesto 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 http://bit.ly/html-crash-courseWifi: In3 - Guest
- 11. HTML - (HyperTextMarkup Language) <h1 class="intro">Hi there!</h1> Attribute Opening section tag h1 element Closing section tag http://bit.ly/html-crash-courseWifi: In3 - Guest 11
- 12. HTML - structure <html> <body> <h1class="title">Hello world!</h1> </body> </html> http://bit.ly/html-crash-courseWifi: In3 - Guest 12
- 13. HTML tags, elements,attributes http://bit.ly/html-crash-courseWifi: In3 - Guest 13
- 14. HTML, by itself,is boring http://bit.ly/html-crash-courseWifi: In3 - Guest 14
- 15. CSS - (CascadingStyle Sheets) h1 { color: blue; } Value Property Selector http://bit.ly/html-crash-courseWifi: In3 - Guest 15
- 16. CSS selectors, properties,values http://bit.ly/html-crash-courseWifi: In3 - Guest 16
- 17. CSS has lotsof 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/ http://bit.ly/html-crash-courseWifi: In3 - Guest 17
- 18. Margin, border, andpadding http://bit.ly/html-crash-courseWifi: In3 - Guest 18
- 19. Margin, border, andpadding http://bit.ly/html-crash-courseWifi: In3 - Guest 19
- 20. Real developers useGoogle... a lot http://bit.ly/html-crash-courseWifi: In3 - Guest 20
- 21. Assignments for tonight Goto: http://bit.ly/tf-html-classroom http://bit.ly/html-crash-courseWifi: In3 - Guest 21
- 22. Ways to keeplearning 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 receiveunprecedented support Learning Mentor Career MentorProgram Manager Local Community You 25
- 26. Mentorship enables flexiblelearning 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 Talkto one of us and email benjy@thinkful.combenjy@thinkful.com to learn more Two-week Free Course Trial Start with HTML, CSS and JavaScript 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