Frontend Crash Course HTML CSS Basics

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

Instructor
Connor Ericson
Thinkful Graduate
Coding instructor
TAs
Wi-Fi: TGS Guest
Pass: tgsvisitor384 http://bit.ly/html-crash-course
2

About you
What's your name?
What brought you here today?
What is your programming experience?
Wi-Fi: TGS Guest
3

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-Fi: TGS Guest
4

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-Fi: TGS Guest
5

Agenda
Learn key HTML and CSS concepts (30 min)
Go over the assignments (10 min)
Complete challenges with support (40 min)
Steps to continue learning (10 min)
Wi-Fi: TGS Guest
6

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
Wi-Fi: TGS Guest
7

Client/Servers
Client (sends requests)
Frontend Developer
Manages what user sees
Server (sends response)
Backend Developer
Manages what app does
Wi-Fi: TGS Guest
8

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
Wi-Fi: TGS Guest
Pass: tgsvisitor384
9
http://bit.ly/html-crash-course

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 LogicApplication LogicInitial requestInitial request
Following responseFollowing response
We'll be writing
these ﬁles that the
brower will render
10
Wi-Fi: TGS Guest

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

HTML - structure
<html>
<body>
<h1 class="title">Hello world!</h1>
</body>
</html>
Wi-Fi: TGS Guest
12

HTML tags, elements, attributes
Wi-Fi: TGS Guest
13

HTML, by itself, is boring
Wi-Fi: TGS Guest
14

CSS - (Cascading Style Sheets)
h1 {
color: blue;
}
Value
Property
Selector
Wi-Fi: TGS Guest
15

CSS selectors, properties, values
Wi-Fi: TGS Guest
16

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-Fi: TGS Guest
17

Margin, border, and padding
Wi-Fi: TGS Guest
18

Margin, border, and padding
Wi-Fi: TGS Guest
19

Real developers use Google... a lot
Wi-Fi: TGS Guest
20

Assignments for tonight
Go to: http://bit.ly/tf-html-classroom
Wi-Fi: TGS Guest
21

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 - guaranteed
Zachary HoltZachary Holt
Web Developer
Sierra GreggSierra Gregg
Software Engineer
JP EarnestJP Earnest
Web Developer
Web Development Bootcamp Jobs Report
93%93%
Grad job-placement rateGrad job-placement rate
$19,855$19,855
Average salary increaseAverage salary increase
25

Take a Thinkful tour!
Talk to us now or be on the look out for our email
Get a tour of Thinkful's
program to see if project-
based, online learning is a
good ﬁt for you
While we're at it, give us
feedback on tonight's
workshop.
26

Frontend Crash Course HTML CSS Basics

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Similar to Frontend Crash Course HTML CSS Basics

Similar to Frontend Crash Course HTML CSS Basics (20)

More from Thinkful

More from Thinkful (20)

Recently uploaded

Recently uploaded (20)

Frontend Crash Course HTML CSS Basics