Frontend Crash Coarse 09/28

Frontend Crash Course
September 2017
WIFI: igniteHQ
Password: ignitehq
http://bit.ly/html-crash-course
1

Instructor
Ivy Rueb
Frontend Web Developer
Thinkful Community Manager
Wi : IgniteHQ
Password: ignitehq 2

About you
What's your name?
What brought you here today?
What is your programming experience?
One thing on your bucket list?
Wi : IgniteHQ

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.
Wi : IgniteHQ

Suggestions for learning
Don't get discouraged, struggle leads to mastery
Don't be shy, take full advantage of our support
Wi : IgniteHQ

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)
Wi : IgniteHQ

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
Wi : IgniteHQ

Client/Servers
Client (sends requests)
Frontend Developer
Manages what user sees
Server (sends response)
Backend Developer
Manages what app does
Wi : IgniteHQ

Example: facebook.com
Client Server
Open browser
and navigate to
facebook.com
HTML, CSS, &
Javascrip render
newsfeed
Request
Response
Algorithm
determines
content of feed.

Sends back
HTML, CSS,
Javascript les
Application Logic
Initial request
Following response
9
Wi : IgniteHQ
Password: ignitehq

How this relates to today
Client Server
Open browser
and navigate to
facebook.com
HTML, CSS, &
Javascrip render
newsfeed
Request
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
10
Wi : TechSquare Labs
Password: bu1ldsometh1ngb1g

HTML - (HyperText Markup Language)
<h1 class="intro">Hi there!</h1>
Attribute
Opening
section tag
h1
element
Closing
section tag
Wi : IgniteHQ

HTML - structure
<html>
<body>
<h1 class="title">Hello world!</h1
</body>
</html>
Wi : IgniteHQ

HTML tags, elements, attributes
Wi : IgniteHQ

HTML, by itself, is boring
Wi : IgniteHQ

CSS - (Cascading Style Sheets)
h1 {
color: blue;
}
Value
Property
Selector
Wi : IgniteHQ

CSS selectors, properties, values
Wi : IgniteHQ

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/
Wi : IgniteHQ

Margin, border, and padding
Wi : IgniteHQ

Real developers use Google... a lot
Wi : IgniteHQ

Assignments for tonight
Go to: http://bit.ly/tf-html-classroom
Wi : IgniteHQ

For aspiring developers, bootcamps ll the gap
23

89%
job-placement rate + job guarantee
Link for the third party audit jobs report:
https://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 quit
your job to start career
transition
26

Thinkful Two-Week Trial
Talk to one of us and email benjy@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 event
Benjy Schechner
Education Advisor
27

Frontend Crash Coarse 09/28

More Related Content

What's hot

Similar to Frontend Crash Coarse 09/28

More from Ivy Rueb

Recently uploaded

Frontend Crash Coarse 09/28