SlideShare a Scribd company logo

Frontend Crash Course

•
•
A
Aaron Lamphere

The document outlines an agenda for a frontend crash course workshop on HTML and CSS. It introduces the instructor and TAs, suggests taking advantage of support, and provides an overview of the workshop agenda which includes learning key concepts, reviewing assignments, working on challenges with support, and next steps for continued learning. It also covers topics like how the web works, the roles of clients and servers, HTML structure and tags, using CSS to style pages, common CSS properties and selectors, and assignments for attendees to complete after the workshop.

1 of 27
Download to read offline
Frontend Crash Course September 2017 WIFI: MakeOffices 5Ghz Password: Internet!23 http://bit.ly/frontend-course 1
Instructor Adam Hinkel Flex Thinkful Student Aerial Videographer Wifi: MakeOffices 5Ghz Password: Internet!23 TAs 2
About you What's your name? What brought you here today? What is your programming experience? http://bit.ly/frontend-crash-course Wifi: MakeOffices 5Ghz Password: Internet!23 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. http://bit.ly/frontend-crash-course Wifi: MakeOffices 5Ghz Password: Internet!23 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 http://bit.ly/frontend-crash-course Wifi: MakeOffices 5Ghz Password: Internet!23 5
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-coursehttp://bit.ly/frontend-crash-course Wifi: MakeOffices 5Ghz Password: Internet!23 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 http://bit.ly/frontend-crash-course Wifi: MakeOffices 5Ghz Password: Internet!23 7
Client/Servers Client (sends requests) Frontend Developer Manages what user sees Server (sends response) Backend Developer Manages what app does http://bit.ly/frontend-crash-course Wifi: MakeOffices 5Ghz Password: Internet!23 8
Example: facebook.com Client Server Open browser and navigate to facebook.com HTML, CSS, & Javascript 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/frontend-crash-course Wifi: MakeOffices 5Ghz Password: Internet!23
How this relates to today Client Server Open browser and navigate to facebook.com HTML, CSS, & Javascript 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/frontend-crash-course Wifi: MakeOffices 5Ghz Password: Internet!23
HTML - (HyperText Markup Language) <h1 class="intro">Hi there!</h1> Attribute Opening section tag h1 element Closing section tag http://bit.ly/frontend-crash-course Wifi: MakeOffices 5Ghz Password: Internet!23 11
HTML - structure <html> <body> <h1 class="title">Hello world!</h1> </body> </html> http://bit.ly/frontend-crash-course Wifi: MakeOffices 5Ghz Password: Internet!23 12
HTML tags, elements, attributes http://bit.ly/frontend-crash-course Wifi: MakeOffices 5Ghz Password: Internet!23 13
HTML, by itself, is boring http://bit.ly/frontend-crash-course Wifi: MakeOffices 5Ghz Password: Internet!23 14
CSS - (Cascading Style Sheets) h1 { color: blue; } Value Property Selector http://bit.ly/frontend-crash-course Wifi: MakeOffices 5Ghz Password: Internet!23 15
CSS selectors, properties, values http://bit.ly/frontend-crash-course Wifi: MakeOffices 5Ghz Password: Internet!23 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/ http://bit.ly/frontend-crash-course Wifi: MakeOffices 5Ghz Password: Internet!23 17
Margin, border, and padding http://bit.ly/frontend-crash-course Wifi: MakeOffices 5Ghz Password: Internet!23 18
Margin, border, and padding http://bit.ly/frontend-crash-course Wifi: MakeOffices 5Ghz Password: Internet!23 19
Real developers use Google... a lot http://bit.ly/frontend-crash-course Wifi: MakeOffices 5Ghz Password: Internet!23 20
Assignments for tonight Go to: http://bit.ly/tf-html-classroom http://bit.ly/frontend-crash-course Wifi: MakeOffices 5Ghz Password: Internet!23 21
Ways to keep learning 22
For aspiring developers, bootcamps fill the gap 23
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
Our students receive unprecedented support Learning Mentor Career MentorProgram Manager Local Community You 25
Mentorship enables ���exible 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
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

More Related Content

Frontend Crash Course

  • 1. Frontend Crash Course September 2017 WIFI: MakeOffices 5Ghz Password: Internet!23 http://bit.ly/frontend-course 1
  • 2. Instructor Adam Hinkel Flex Thinkful Student Aerial Videographer Wifi: MakeOffices 5Ghz Password: Internet!23 TAs 2
  • 3. About you What's your name? What brought you here today? What is your programming experience? http://bit.ly/frontend-crash-course Wifi: MakeOffices 5Ghz Password: Internet!23 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. http://bit.ly/frontend-crash-course Wifi: MakeOffices 5Ghz Password: Internet!23 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 http://bit.ly/frontend-crash-course Wifi: MakeOffices 5Ghz Password: Internet!23 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-coursehttp://bit.ly/frontend-crash-course Wifi: MakeOffices 5Ghz Password: Internet!23 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 http://bit.ly/frontend-crash-course Wifi: MakeOffices 5Ghz Password: Internet!23 7
  • 8. Client/Servers Client (sends requests) Frontend Developer Manages what user sees Server (sends response) Backend Developer Manages what app does http://bit.ly/frontend-crash-course Wifi: MakeOffices 5Ghz Password: Internet!23 8
  • 9. Example: facebook.com Client Server Open browser and navigate to facebook.com HTML, CSS, & Javascript 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/frontend-crash-course Wifi: MakeOffices 5Ghz Password: Internet!23
  • 10. How this relates to today Client Server Open browser and navigate to facebook.com HTML, CSS, & Javascript 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/frontend-crash-course Wifi: MakeOffices 5Ghz Password: Internet!23
  • 11. HTML - (HyperText Markup Language) <h1 class="intro">Hi there!</h1> Attribute Opening section tag h1 element Closing section tag http://bit.ly/frontend-crash-course Wifi: MakeOffices 5Ghz Password: Internet!23 11
  • 12. HTML - structure <html> <body> <h1 class="title">Hello world!</h1> </body> </html> http://bit.ly/frontend-crash-course Wifi: MakeOffices 5Ghz Password: Internet!23 12
  • 13. HTML tags, elements, attributes http://bit.ly/frontend-crash-course Wifi: MakeOffices 5Ghz Password: Internet!23 13
  • 14. HTML, by itself, is boring http://bit.ly/frontend-crash-course Wifi: MakeOffices 5Ghz Password: Internet!23 14
  • 15. CSS - (Cascading Style Sheets) h1 { color: blue; } Value Property Selector http://bit.ly/frontend-crash-course Wifi: MakeOffices 5Ghz Password: Internet!23 15
  • 16. CSS selectors, properties, values http://bit.ly/frontend-crash-course Wifi: MakeOffices 5Ghz Password: Internet!23 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/ http://bit.ly/frontend-crash-course Wifi: MakeOffices 5Ghz Password: Internet!23 17
  • 18. Margin, border, and padding http://bit.ly/frontend-crash-course Wifi: MakeOffices 5Ghz Password: Internet!23 18
  • 19. Margin, border, and padding http://bit.ly/frontend-crash-course Wifi: MakeOffices 5Ghz Password: Internet!23 19
  • 20. Real developers use Google... a lot http://bit.ly/frontend-crash-course Wifi: MakeOffices 5Ghz Password: Internet!23 20
  • 21. Assignments for tonight Go to: http://bit.ly/tf-html-classroom http://bit.ly/frontend-crash-course Wifi: MakeOffices 5Ghz Password: Internet!23 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