Frontend Crash Course

Frontend Crash CourseFrontend Crash Course
2018
Wi : MakeOf ces 5Ghz
Password: Internet!23
http://bit.ly/frontend-coursehttp://bit.ly/frontend-course
1

Instructor
TJ Stalcup
Lead DC Mentor @Thinkful
API Evangelist @540
Pokemon Master
TAs
http://bit.ly/frontend-course
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.
4

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

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-course
6

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

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, &
Javascript render
newsfeed
Request
Response
Algorithm
determines
content of feed.

Sends back
HTML, CSS,
Javascript les
Application Logic
Initial request
Following response
http://bit.ly/html-crash-course 9

How this relates to today
Client Server
Open browser
and navigate to
facebook.com
HTML, CSS, &
Javascript 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
http://bit.ly/html-crash-course
10

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

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

HTML tags, elements, attributes
13

HTML, by itself, is boring
14

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

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

CSS selectors, properties, values
17

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/
18

Margin, border, and padding
19

Margin, border, and padding
20

Real developers use Google... a lot
21

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

For aspiring developers, bootcamps ll the gap
24

Frontend Crash Course

More Related Content

What's hot

Similar to Frontend Crash Course

More from TJ Stalcup

Recently uploaded

Frontend Crash Course