SlideShare a Scribd company logo

Fecc cg-cb-11.14.17

•
•
T
Thinkful

This document outlines an introductory frontend development crash course. It introduces Grace Cupat as the instructor and Thinkful teaching assistants. The agenda includes learning HTML and CSS concepts, completing challenges with support, and next steps for continuing learning. Key topics covered are how the web works with clients and servers, using HTML for structure, CSS for styling, and common properties like margin, border and padding. Real-world examples of using these technologies on Facebook are provided. Thinkful is introduced as helping people become developers through mentorship and projects.

Related slideshows

Developing word press professionally
Developing word press professionallyDeveloping word press professionally
Developing word press professionally
 
Web dev presentation
Web dev presentationWeb dev presentation
Web dev presentation
 
Adobe Source 2016 - Styleguides and AEM
Adobe Source 2016 - Styleguides and AEMAdobe Source 2016 - Styleguides and AEM
Adobe Source 2016 - Styleguides and AEM
 
1 of 27
Download to read offline
Frontend Crash Course November 2017 Network: CommonGrounds Guest Password: Buildyourstory! http://bit.ly/fe-crash-sd 1
Instructor Grace Cupat Web Development Manager Thinkful Mentor TAs 2
About you What's your name? What brought you here today? What is your programming experience? 3
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. 4
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 5
Agenda Learn key HTML and CSS concepts (20 min) Go over the assignments (10 min) Complete challenges with support (30 min) Steps to continue learning (10 min) 6
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 7
Client/Servers Client (sends requests) Frontend Developer Manages what user sees Server (sends response) Backend Developer Manages what app does 8
Example: facebook.com Client Server Open browser and navigate to facebook.com HTML, CSS, & Javascrip render newsfeed Request Response 9 Algorithm determines content of feed. Sends back HTML, CSS, Javascript files Application LogicApplication Logic Initial requestInitial request Following responseFollowing response
How this relates to today Client Server Open browser and navigate to facebook.com HTML, CSS, & Javascrip render newsfeed Request 10 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
HTML - (HyperText Markup Language) <h1 class="intro">Hi there!</h1> Attribute Opening section tag h1 element Closing section tag bit.ly/website-la 11
HTML - structure <html> <body> <h1 class="title">Hello world!</h1> </body> </html> bit.ly/website-la 12
HTML tags, elements, attributes 13
HTML, by itself, is boring 14
CSS - (Cascading Style Sheets) h1 { color: blue; } Value Property Selector bit.ly/website-la 15
CSS selectors, properties, values 16
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/ 17
Margin, border, and padding 18
Margin, border, and padding 19
Real developers use Google... a lot 20
Assignments for tonight Go to: http://bit.ly/tf-html-classroom 21
Ways to keep learning 22
For aspiring developers, bootcamps fill the gap Source: Bureau of Labor Statistics 23
92%92%job-placement rate in tech roles + 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
Our students receive unprecedented support 1-on-1 Learning Mentor 1-on-1 Career MentorProgram Manager San Diego Community You 25
1-on-1 mentorship enables flexible learning Learn anywhere, anytime, and at your own schedule You don't have to quit your job to start career transition 26
Thinkful Two-Week Trial Talk to one of us and email benjy@thinkful.combenjy@thinkful.com to learn more Two-week course with 6 mentor sessions for $50 ($750 value) 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

More Related Content

Fecc cg-cb-11.14.17

  • 1. Frontend Crash Course November 2017 Network: CommonGrounds Guest Password: Buildyourstory! http://bit.ly/fe-crash-sd 1
  • 2. Instructor Grace Cupat Web Development Manager Thinkful Mentor TAs 2
  • 3. About you What's your name? What brought you here today? What is your programming experience? 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. 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 5
  • 6. Agenda Learn key HTML and CSS concepts (20 min) Go over the assignments (10 min) Complete challenges with support (30 min) Steps to continue learning (10 min) 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 7
  • 8. Client/Servers Client (sends requests) Frontend Developer Manages what user sees Server (sends response) Backend Developer Manages what app does 8
  • 9. Example: facebook.com Client Server Open browser and navigate to facebook.com HTML, CSS, & Javascrip render newsfeed Request Response 9 Algorithm determines content of feed. Sends back HTML, CSS, Javascript files Application LogicApplication Logic Initial requestInitial request Following responseFollowing response
  • 10. How this relates to today Client Server Open browser and navigate to facebook.com HTML, CSS, & Javascrip render newsfeed Request 10 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
  • 11. HTML - (HyperText Markup Language) <h1 class="intro">Hi there!</h1> Attribute Opening section tag h1 element Closing section tag bit.ly/website-la 11
  • 12. HTML - structure <html> <body> <h1 class="title">Hello world!</h1> </body> </html> bit.ly/website-la 12
  • 13. HTML tags, elements, attributes 13
  • 14. HTML, by itself, is boring 14
  • 15. CSS - (Cascading Style Sheets) h1 { color: blue; } Value Property Selector bit.ly/website-la 15
  • 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/ 17
  • 18. Margin, border, and padding 18
  • 19. Margin, border, and padding 19
  • 20. Real developers use Google... a lot 20
  • 21. Assignments for tonight Go to: http://bit.ly/tf-html-classroom 21
  • 22. Ways to keep learning 22
  • 23. For aspiring developers, bootcamps fill the gap Source: Bureau of Labor Statistics 23
  • 24. 92%92%job-placement rate in tech roles + 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 1-on-1 Learning Mentor 1-on-1 Career MentorProgram Manager San Diego Community You 25
  • 26. 1-on-1 mentorship enables flexible learning Learn anywhere, anytime, and at your own schedule You don't have to quit your job to start career transition 26
  • 27. Thinkful Two-Week Trial Talk to one of us and email benjy@thinkful.combenjy@thinkful.com to learn more Two-week course with 6 mentor sessions for $50 ($750 value) 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