Download as PDF, PPTX
Fcc1219
- 1. Frontend Crash CourseFrontendCrash Course December 2017 bit.ly/frontend-phx codepen.io 1
- 2. About us Dave Hoel,Instructor Software Developer, Assa Abloy Thinkful Graduate Dixon Begay Software Engineer Consultant Thinkful TA 2
- 3. About you What's yourname? What brought you here today? What is your programming experience? 3
- 4. About Thinkful We traindevelopers and data scientists through 1x1 mentorship and project-based learning. Guaranteed.Guaranteed. 4
- 5. Thinkful's Free Resource HTML,CSS and JavaScript Unlimited mentor-led Q&A sessions Personal Program Manager OnlyOnly available during this eventavailable during this event bit.ly/tf-free-coursebit.ly/tf-free-course 5
- 6. Agenda Learn key HTMLand CSS concepts Go over the assignments Complete challenges with support 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 7
- 8. Client/Servers Client (sends requests) FrontendDeveloper Manages what user sees Server (sends response) Backend Developer Manages what app does 8
- 9. Example: facebook.com Client Server Openbrowser 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 relatesto today Client Server Open browser and navigate to facebook.com HTML, CSS, & JavaScript 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 browser will render
- 11. HTML - (HyperTextMarkup Language) <h1>Hi there!</h1> ContentOpening section tag h1 element Closing section tag bit.ly/website-la 11
- 12. HTML - (HyperTextMarkup Language) <h1 class="intro">Hi there!</h1> Attribute Opening section tag h1 element Closing section tag bit.ly/website-la 12
- 13. HTML - structure <html> <body> <h1class="title">Hello world!</h1> </body> </html> bit.ly/website-la 13
- 14. HTML tags, elements,attributes 14
- 15. HTML, by itself,is boring 15
- 16. CSS - (CascadingStyle Sheets) h1 { color: blue; } Value Property Selector bit.ly/website-la 16
- 17. CSS selectors, properties,values 17
- 18. 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/ 18
- 19. Margin, border, andpadding 19
- 20. Margin, border, andpadding 20
- 21. Real developers useGoogle... a lot 21
- 22. Assignments for tonight Goto: http://bit.ly/tf-html-classroom 22
- 23.
- 24. Thinkful's Free Resource HTML,CSS and JavaScript Unlimited mentor-led Q&A sessions Personal Program Manager OnlyOnly availableavailable during this eventduring this event bit.ly/tf-free-coursebit.ly/tf-free-course 24