Fcchc424

Frontend Crash Course:Frontend Crash Course:
HTML & CSSHTML & CSS
April 2018
bit.ly/frontend-phxbit.ly/frontend-phx
codepen.io
1

About us
Rhonda Jaramillo, TA
Web Developer, Iced Dev
Thinkful Graduate
Joe Previte
Software Developer, Digital Airstrike
Thinkful Instructor
2

About you
What's your name?
What brought you here today?
What is your programming experience?
3

About Thinkful
We train developers and data scientists through
1x1 mentorship and project-based learning.

Guaranteed.
4

Agenda
Learn key HTML and CSS concepts
Go over the assignments
Complete challenges with support
Ways to keep learning
5

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
6

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

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

Sends back
HTML, CSS,
JavaScript les
Application Logic
Initial request
Following response

How this relates to today
Client Server
Open browser
and navigate to
facebook.com
HTML, CSS, &
JavaScript render
newsfeed
Request
9
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
browser will render

HTML - (HyperText Markup Language)
<h1>Hi there!</h1>
ContentOpening
section tag
h1
element
Closing
section tag
bit.ly/website-la
10

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:
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: bit.ly/tf-html-classroom
21

Thinkful's free course
75+ hours of curriculum for two weeks
HTML, CSS and JavaScript
Unlimited mentor-led Q&A sessions
Personal Program Manager
bit.ly/freetrial-webdevbit.ly/freetrial-webdev
Thinkful Coding Prep Course
$1500 FREE
23

Fcchc424

More Related Content

Similar to Fcchc424 (20)

More from Shannon Gallagher (20)

Recently uploaded (20)

Fcchc424