Download to read offline
Build Your Own Website with HTML/CSS
- 1. Build Your OwnWebsite July 2017 WIFI: CrossCamp.us Events bit.ly/website-la 1
- 2. Instructor Jason Dobrowner Thinkful WebDev Alum! Co-Founder of Studio OKO, web design and development agency TAs CrossCamp.us Events bit.ly/website-la 2
- 3. 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. CrossCamp.us Events bit.ly/website-la 4
- 4. Suggestions for learning Don'ttreat this as a drill, we're making somethingwe're making something realreal 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 CrossCamp.us Events bit.ly/website-la 5
- 5. This is whatwe're making View example here CrossCamp.us Events bit.ly/website-la 6
- 6. Agenda Learn key HTMLand CSS concepts (30 min) Go over starter code (10 min) Build your site with our support! (30 min) Steps to continue learning (10 min) CrossCamp.us Events bit.ly/website-la 7
- 7. HTML - whatis it? HTML (HyperText Markup Language) is the content and structure of a webpage. <h1 class="intro">Hi there!</h1> Attribute Opening section tag h1 element Closing section tag bit.ly/website-laCrossCamp.us Events bit.ly/website-la 8
- 8. HTML tags, elements,attributes CrossCamp.us Events bit.ly/website-la 9
- 9. CSS - whatis it? CSS (Cascading Style Sheets) determines the visual representation of HTML content. h1 { color: blue; } Declaration block Value Property Selector bit.ly/website-laCrossCamp.us Events bit.ly/website-la 10
- 10. CSS selectors, properties,values CrossCamp.us Events bit.ly/website-la 11
- 11. Our project fortonight Your mission for tonight is to build your very own "About Me" page using Glitch.com. CrossCamp.us Events bit.ly/website-la 12
- 12. Glitch setup &first steps! Fork the starter code here CrossCamp.us Events bit.ly/website-la 13
- 13. Real developers useGoogle... a lot CrossCamp.us Events bit.ly/website-la 14
- 14. Ways to keeplearning More Structure Less Structure More SupportLess Support 15
- 15. Our instructors helpus write, teach, and improve our workshops & curriculum 16
- 16. Career prep andjob-placement Our career services team has helped 93% of our grads begin jobs at companies like: Liz Stephanie 17
- 17. Take a Thinkfultour! Talk to one of us to set something up ! Take a look through Thinkful's student platform 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. % 18