Deck 8983a1d9-68df-4447-8481-3b4fd0de734c-13-66

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

Instructor
Matthew Day
Thinkful Mentor
Web Developer for Georgia Power
Wiﬁ: IgniteHQ
Password: igniteHQ 2

About you
What's your name?
What brought you here today?
What is your programming experience?
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.These workshops are built using this approach.
Wiﬁ: IgniteHQ

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
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)
http://bit.ly/html-crash-coursehttp://bit.ly/html-crash-course
Wiﬁ: IgniteHQ

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
Wifi: 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 LogicApplication Logic
Initial requestInitial request
Following responseFollowing response
9http://bit.ly/html-crash-course
Wiﬁ: 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 files
Application LogicApplication LogicInitial requestInitial request
Following responseFollowing response
We'll be writing
these files that the
brower will render
10
Wifi: IgniteHQ
Password: igniteHQ

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

Ways to keep learning
More Structure
Less Structure
More SupportLess Support
22

Our instructors help us write, teach, and
improve our workshops & curriculum
23

Support 'round the clock
Your Mentor
Q&A Sessions
Career Coach
In-person Workshops
Slack
Program Manager
YouYou
24

Our results
Zachary HoltZachary Holt
Web Developer
Sierra GreggSierra Gregg
Software Engineer
JP EarnestJP Earnest
Web Developer
Web Development Bootcamp Jobs Report
87%87%
Grad job-placement rateGrad job-placement rate
$20,277$20,277
Average salary increaseAverage salary increase
25

Try us out!
Talk to me (or email jasjit@thinkful.com ) if you're interested
Learn HTML/CSS and JavaScript
Initial 2-week trial includes
six mentor sessions for $50
Option to continue onto web
development boothcamp
26

http://bit.ly/atl-feedback
July 2017
Wiﬁ: Digital Ignition
Password: Countdown54321 27

Deck 8983a1d9-68df-4447-8481-3b4fd0de734c-13-66

More Related Content

What's hot

Similar to Deck 8983a1d9-68df-4447-8481-3b4fd0de734c-13-66

More from Ivy Rueb

Recently uploaded

Deck 8983a1d9-68df-4447-8481-3b4fd0de734c-13-66