Deck 893ff61f-1fb8-4e15-a379-775dfdbcee77-12-173-252 (4)

Frontend Crash Course
March 2018
Network: Deskhub-main
Password: stake2017!
http://bit.ly/fe-crash-sd
1

Instructor
Jasmine Kim
Quality Assurance Engineer | Full
Stack Web Developer
Bootcamp Grad
TAs
2

About you
What's your name?
What brought you here today?
What is your programming experience?
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.
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
5

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

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
7

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

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 LogicApplication Logic
Initial requestInitial request
Following responseFollowing response

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

HTML - (HyperText Markup Language)
<h1 class="intro">Hi there!</h1>
Attribute
Opening
section tag
h1
element
Closing
section tag
bit.ly/website-la
11

HTML - structure
<html>
<body>
<h1 class="title">Hello world!</h1>
</body>
</html>
bit.ly/website-la
12

HTML tags, elements, attributes
13

CSS - (Cascading Style Sheets)
h1 {
color: blue;
}
Value
Property
Selector
bit.ly/website-la
15

CSS selectors, properties, values
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/
17

Margin, border, and padding
18

Margin, border, and padding
19

Real developers use Google... a lot
20

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

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

Deck 893ff61f-1fb8-4e15-a379-775dfdbcee77-12-173-252 (4)

Recommandé

Recommandé

Contenu connexe

Tendances

Tendances (20)

Similaire à Deck 893ff61f-1fb8-4e15-a379-775dfdbcee77-12-173-252 (4)

Similaire à Deck 893ff61f-1fb8-4e15-a379-775dfdbcee77-12-173-252 (4) (20)

Plus de Jordan Zurowski

Plus de Jordan Zurowski (8)

Dernier

Dernier (20)

Deck 893ff61f-1fb8-4e15-a379-775dfdbcee77-12-173-252 (4)