1. Free Front End Crash Course: HTML & CSSFree Front End Crash Course: HTML & CSS
May 2018
Network: Deskhub-main
Password: stake2017!
http://bit.ly/fe-crash-sdhttp://bit.ly/fe-crash-sd
Interactive Slides: http://bit.ly/sd-slides-51618
1
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.
4
5. Suggestions for learning
Don't get discouraged, struggle leads to mastery
Don't be shy, take 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 speci c les
Browser receives those les and renders them as a website
7
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 les
Application Logic
Initial request
Following 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 les
Application LogicInitial request
Following response
We'll be writing
these les 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
23. HTML, CSS and JavaScript
Unlimited mentor-led group sessions
Personal Program Manager
Special Workshop Events
bit.ly/tfsd-wdbit.ly/tfsd-wd
Free Two Week TrialFree Two Week Trial
23