Ffcchtml
- 1. Front End Crash Course: HTML & CSS
- 2. Introductions ➔ What's your name? ➔ What is your programming experience? ➔ What brought you here today?
- 4. 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 How the Web Works
- 5. Client / Servers The client sends requests. Frontend Developers manage what users see. The server sends responses. Backend Developers manage what the app does.
- 6. Example: facebook Client Server Open browser and navigate to facebook.com HTML, CSS, & JavaScript render newsfeed Initial Request Following Response Algorithm determines content of feed Sends back HTML, CSS, JavaScript files Request Response
- 7. Example: facebook Client Server Open browser and navigate to facebook.com HTML, CSS, & JavaScript render newsfeed Initial Request Following Response Algorithm determines content of feed Sends back HTML, CSS, JavaScript files Request Response We’ll be writing these files that the browser will render
- 10. HTML: Structure
- 15. CSS: Cascading Style Sheets 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: htmldog.com/references/css/properties/
- 21. ➔ Free trial of Full Stack Flex online program ➔ Start with HTML, CSS and JavaScript ➔ Personal Program Manager ➔ Unlimited Q&A Sessions ➔ Student Slack Community ➔ bit.ly/freetrial-webdev Thinkful Two-Week Free Trial
- 22. The Student Experience Jeff Connelly, Thinkful Graduate Portfolio Shay Kennedy, Thinkful Graduate Capstone Shari Hobbs, Thinkful Graduate Capstone Evan Thompson, Thinkful Graduate Capstone