Thinkful build a website (html, css)
1 like102 views
This document summarizes a workshop for building a website using HTML and CSS. The agenda includes learning key concepts of HTML and CSS over 30 minutes, reviewing starter code for 10 minutes, building a site with support for 30 minutes, and learning next steps for 10 minutes. Thinkful is introduced as offering online programs in full stack JavaScript and data science through 1-on-1 mentorship. Various HTML and CSS topics are then covered including elements, selectors, properties, and positioning. Links to starter code, a sample site, and additional practice are provided.
Thinkful build a website (html, css)
- 1. Build Your Own Website January 2018 http://bit.ly/build-website-html-css WiFi: In3GuestWiFi: In3Guest 1
- 2. We're Thinkful: a school that offers online programs for Full Stack JavaScript and Data Science. We are able to due this through 1-on-1 mentorship http:// bit.ly /js-intro-dc 2
- 3. Instructor Pol Klein Thinkful Mentor Montgomery College Boston University TAs bit.ly/build-website-html-css 3
- 4. About you What's your name? What brought you here today? What is your programming experience? Wi-Fi: MakeOf๏ฌces 5GHz Pass: Internet!23 bit.ly/build-website-html-cssWi-Fi: In3-Guest bit.ly/build-website-html-cssbit.ly/build-website-html-css 4
- 5. 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. Wi-Fi: MakeOf๏ฌces 5GHz Pass: Internet!23 bit.ly/build-website-html-cssWi-Fi: In3-Guest bit.ly/build-website-html-css bit.ly/build-website-html-css 5
- 6. Take advantage of support Don't treat this as a drill, we're making something realwe're making something real 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 Wi-Fi: MakeOf๏ฌces 5GHz Pass: Internet!23 bit.ly/build-website-html-cssWi-Fi: In3-Guest bit.ly/build-website-html-css bit.ly/build-website-html-css 6
- 7. This is what we're making Wi-Fi: MakeOf๏ฌces 5GHz Pass: Internet!23 bit.ly/build-website-html-css Wi-Fi: In3-Guest bit.ly/build-website-html- bit.ly/build-website-html-css http://bit.ly/build-website-solutionโ 7
- 8. Agenda Learn key HTML and CSS concepts (30 min) Go over starter code (10 min) Build your site with our support! (30 min) Steps to continue learning (10 min) Wi-Fi: MakeOf๏ฌces 5GHz Pass: Internet!23 bit.ly/build-website-html-cssbit.ly/build-website-html-css 8
- 9. Real developers use Google... a lot Wi-Fi: MakeOf๏ฌces 5GHz Pass: Internet!23 bit.ly/build-website-html-cssbit.ly/build-website-html-css 9
- 10. HTML - Hypertext Markup Language <h1 class="intro">Hi there!</h1> AttributeOpening tag h1 element Closing tagContent Wi-Fi: MakeOf๏ฌces 5GHz Pass: Internet!23 bit.ly/build-website-html-css 10 bit.ly/build-website-html-css
- 11. HTML Wi-Fi: MakeOf๏ฌces 5GHz Pass: Internet!23 bit.ly/build-website-html-cssbit.ly/build-website-html-css 11
- 12. CSS - Cascading Style Sheets h1 { color: blue; } Value Property Selector Wi-Fi: MakeOf๏ฌces 5GHz Pass: Internet!23 bit.ly/build-website-html-cssbit.ly/build-website-html-css 12
- 13. CSS selectors, properties, values Wi-Fi: MakeOf๏ฌces 5GHz Pass: Internet!23 bit.ly/build-website-html-cssbit.ly/build-website-html-css 13
- 14. Margin, border, and padding Wi-Fi: MakeOf๏ฌces 5GHz Pass: Internet!23 bit.ly/build-website-html-cssbit.ly/build-website-html-css 14
- 15. Margin, border, and padding Wi-Fi: MakeOf๏ฌces 5GHz Pass: Internet!23 bit.ly/build-website-html-cssbit.ly/build-website-html-css 15
- 16. First steps! http://bit.ly/build-website-start Wi-Fi: MakeOf๏ฌces 5GHz Pass: Internet!23 bit.ly/build-website-html-cssbit.ly/build-website-html-css 16
- 18. Solution http://bit.ly/build-website-solution Wi-Fi: MakeOf๏ฌces 5GHz Pass: Internet!23 bit.ly/build-website-html-cssbit.ly/build-website-html-css 18
- 19. More Practice http://bit.ly/build-website-practiceโ Wi-Fi: MakeOf๏ฌces 5GHz Pass: Internet!23 bit.ly/build-website-html-css Wi-Fi: In3-Guest bit.ly/build-website-html- bit.ly/build-website-html-css 19
- 20. Ways to keep learning 20
- 21. Job within 6 months or get your money back Email [email protected] if you're interestedEmail [email protected] if you're interested ENGINEERING IMMERSION Pay when you get a job FULL STACK FLEX Learn at your own pace DATA SCIENCE Built to get you hired 21
- 22. 92%92% job-placement rate in tech careers Link for the third party audit jobs report: https://thinkful.com/bootcamp-jobs-statshttps://thinkful.com/bootcamp-jobs-stats Thinkful's track record of getting students jobs 22
- 23. Thinkful's Free Resource Learn HTML, CSS, and JavaScript Unlimited Mentor Q&A Sessions Access to Online Workshops Personal Program Manager http://bit.ly/dc-trial 23