Deck 893ff61f-1fb8-4e15-a379-775dfdbcee77-12-53

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

Welcome to "Frontend Crash Course" sponsored by Thinkful. The Wi-Fi network is X and the password is Y The website for this class is Z.
Speaker notes

Instructor
John Brown
Thinkful Student
Web Coordinator
TAs
Wiﬁ: Digital Ignition
Password: Countdown54321 2

I’m _______. I’m a ___________. Here with me today are my assistants ______________.
Speaker notes

About you
What's your name?
What brought you here today?
What is your programming experience?
http://bit.ly/html-crash-coursehttp://bit.ly/html-crash-course

Before we continue, I’d like to get an idea of who’s here today. So if you wouldn’t mind, I’d like to go around the room and have everyone say their
name, what brought you here today, and your programming experience. And it's okay if you have no experience, that’s who we’ve designed this
class for.
Speaker notes

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.

Thanks everyone for coming. Just a little bit about Thinkful: thinkful is a bootcamp designed to help people become developers and data scientists
through 1-on-1 mentorship and project based learning. We’ve structured this class around that approach to give you the best beginner coding
experience possible.
Speaker notes

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

A couple things before we get started. First, if you’re struggling on a concept or part of your application, don’t get discouraged. The struggle of
learning to work through problems, especially in coding, is what’s going to make you a better developer. Second, if you feel stuck and you’re not sure
what to do next, place ask for help. We’re here to make sure you get the most support possible to learn as much as you can about the material.
Speaker notes

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)

Here’s our agenda for tonight. First, I’ll talk about conceptually how the web works and how that relates to our code tonight. Then I’ll go over the
fundamentals of the code you’ll be writing to complete the challenges we’re going to give you. Then I’ll show you where the assignments are located
and go over the ﬁrst one with you. Then for the bulk of the night, you will have the opportunity to code on your own, using myself and the TA’s as
needed to assist with completing the assignments. Then we’ll go over some next steps for learning.
Speaker notes

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

On a basic level, the web works through communication between a browser like google chrome and a server. The user enters a web address like
google.com into a browser and hits enter. Then the browser sends a request to the server that has the ﬁles for google.com on it. And the server
sends back those ﬁles to the browser to load.
Speaker notes

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

A browser, also called the client, can be anything that connects to the internet. Your laptop, your phone, all those things are clients. They’re
responsible for sending requests and loading the pages from files sent back from the server. It manages what the app looks like. This is the
responsibility of a frontend developer. The server holds all those files. Its job is to shoot specific files to the client based on its requests. It manages
what the app actually does and is the responsibility of the backend developer
Speaker notes

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
9

Let's break it down with an example. Let's say I log into facebook. When I try to go to that page, my computer is going to send a request to
facebook’s server. Facebook’s server is going to look at that request and think, “okay, what should I send back to ${your name}’s computer?” Its
going to look through my friend’s posts and determine using an algorithm what’s most important to put in my feed. Then it’ll send all that info,
including the ﬁles to display the info, to my computer. My computer will then read and interpret those ﬁles and display the information on my screen.
Speaker notes

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

We’ll be writing the HTML and CSS ﬁles that the server is sending back to the client to load.
Speaker notes

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

HTML, aka hypertext markup language is used to create the structure of a website. It can create hundreds of sections on a page that all have
different purposes. Each of these sections is called an element. Here is an example of an h1 HTML element denoted by the opening tag. H1 stands
for header one or the largest header. The computer is going to read the name of this opening tag and create an element on the page according to
that name, in this case, an h1 element. Inside of the opening tag, we have some other information here. The ﬁrst is an attribute called ‘class’. Class
is used to create a label for an element that we can refer back to elsewhere in our code. In this case, we set the class attribute to “intro”. We can use
“intro” to refer to this speciﬁc element. Finally, we have to tell the computer where this element should end. To do that, we use a closing tag which
has the name of the element as well as a forward slash.
Speaker notes

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

This is the typical structure of a html ﬁle. Every ﬁle will start with an html tag, creating an html element, and inside that will be other elements like the
body element. Everything inside the body element will actually show up on the page, like this h1 tag.
Speaker notes

HTML tags, elements, attributes

Notes for Slide 13:
HTML end code:
Hey, I'm ${your name}
This is a different header tag:
Hey, I'm ${your name} also
This is a link, property is hypertext reference:
Put elements inside each other:
This is a paragraph
Tell them they don't need to know all the tags!
I’m going to show you a few different elements and explain how they work. First we have our basic h1 element that’s displaying “Hey, I’m ${your
name}”. We can use a different element if we wanted to change the size of our header, an h2 element, like this (write out
Hey, I’m ${your name} too
). This makes another element on our page and uses the rules associated with that element to display the text. Another really common element is
the anchor tag. Anytime you’ve ever seen a link on a page that sends you to another page on the internet, chances are that that link is an anchor
tag. Anchor tags are special because, for them to work, we need to have an attribute called href which stands for hypertext reference. We can make
a link using an anchor tag, like this (write Google) then we write our closing tag (write ). Another important tag is the div tag. A div tag doesn’t really
show up on the screen until you style it to show up, which I’ll show you in a second, but it's used to create sections on the page that other elements
Speaker notes
Google

can go inside of. For example, we can make a div tag and then put a paragraph inside that div element (write
This is a paragraph
) then we close it. I wanted to show you that so you know that you can put elements inside other elements. I’ll explain the beneﬁts of that in just a bit.

HTML, by itself, is boring

HTML by itself looks like this. It's just the structure and content of the page. This is a screenshot of facebook after I removed all the CSS ﬁles from
the page. I’m going to go over the basics of CSS that would allow us to improve upon this plain structure.
Speaker notes

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

CSS, cascading style sheets, are rulesets that use the class labels and change how the elements look. In order to do that, we have to target the
element we want to change. In this example, we’re targeting h1 elements. Everything inside the curly brackets are the properties that will be
changed. (...)
Speaker notes

CSS selectors, properties, values

Going back to our html, I’ll show you a few properties you can manipulate to change what the page looks like. First, we’ll use the code from that
example and say h1 and set the color to blue (write h1 { color: blue; }). Make sure to always end your property value statements with a semi-colon.
Now, if I didn’t want to change all the h1 elements, but only a specific one, I would need to somehow target that specific element by using its class
name. So let’s give this h2 a class of purple (write class=”purple”), then make a rule set in the CSS area for purple (write .purple { color:purple;}).
We’re targeting a class here, not an element, so in CSS we have to put a period before the name of the class to tell the computer we’re talking about
a class. Next, let's change up our link. We already have an attribute for our link, href, but HTML allows us to set as many attributes as we want inside
out opening tag. So lets give our anchor tag a class of link (write class=”link”) and now we can change how the link looks. The default look of a link is
blue with an underline under it. But maybe that’s not really how we want links to look on our site. So let's change the color from blue to yellow. In our
CSS we write out the class name then set the property color to yellow (write .link { color: yellow;}). But, I also don’t really want this underline here. I
want my link to look just like text, but yellow. So how do I remove that underline? Well, let's pretend I completely forgot what that property is to
remove the underline. This is where a developer’s most powerful tool comes in: Google. I’m going to go to google and I’ll look up how to remove an
underline (google how to remove underline css). And I want to put CSS at the end to help google narrow down my searches. Okay, so lets try the
first link. This is w3schools, a fantastic resource for looking up answers about coding. Lets just do a quick find on the page for underline and here we
go. This says I can use the property text-decoration to manipulate my underline and I would just set the value to none. Let's try that. (write text-
decoration: none;) And there we go. Now my links don’t have underlines. Now the next thing I’d like to explain are is the div. Like I said before, the
div acts like a section on the page that separates elements. So first, let's give the div some space on the page so you can see how we can use it to
create sections. I’ll give it a background color (write div {background-color: red;}) and then I can also set values for size of the div. I’m going to set
the height of the div (write height: 100px;). Now we’ve made a section. This is the div element that has the paragraph element inside of it, but we can
still move the paragraph element around inside the div. Let’s give the paragraph a class (write class=”indented”) then use that class to target the
paragraph and make it move to the center of the div. We can do that using a property called text-align (write .indented { text-align:center;}) Now the
paragraph is moved to the center of the div. Any questions.
Notes for slide 16:
CSS end code:
Use example to change color:
Hey, I'm ${your name}
h1 {
color: blue;
}
Speaker notes

Class name instead of element name:
Hey, I'm ${your name} also
.purple {
color: purple;
}
Multiple attributes: have them Google!!
.link {
color: yellow;
text-decoration: none;
}
We can position text
This is a paragraph
.centered {
text-align: center;
}
Google

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/

CSS has lots of properties and each of those has certain values that they can be given. These are just a few examples. For instance, color can we
set with keywords that the browser recognizes, or it can be set with hex codes like this one that consist of letters and numbers allowing for more
speciﬁc shades of colors. You can also use rgb colors like here. We can set font type using font-family. You can see width and height to pixels or
percentages. For a full list of them, feel free to go to this website or just google what you’re looking for and chances are you’ll ﬁnd it.
Speaker notes

Margin, border, and padding

CSS also allows us to size and shape our elements. You can think of HTML elements as boxes on the screen. These boxes have a couple different
ways of being moved around the screen and sized. Going from inner-most to outer-most, there’s width and height, padding, the border of the box,
and then margin.
Speaker notes

Margin, border, and padding

Here, I have a div with a red background and with a paragraph inside of it. I’m going to use those sizing properties to show you how to manipulate
the div around the paragraph. The ﬁrst is width and height. I can set the height to 300 pixels and the div ﬁlls up more on the page (write height:
300px;). “Px” the way of writing pixels in CSS. You could also use percentages if you wanted to. One level up from that is padding. You can set
padding to pixels or percentages as well. I’ll set the padding for this div to 20px (write padding: 20px;). Notice how the paragraph moves away from
the edge of the div its inside. I created padding between the content of the div and the edge of it. Then we have borders. We can use the border
property to change our div’s border. Border takes three values inside it. Its needs the width of the border, the type of border, and the color. Let’s go
ahead and make the border 10 pixels, solid, and black (write border: 10px solid black;). Now our div has a thickened border around it. The last sizing
property is margin. You can think of margin just like the margin on a piece of paper you print out. Generally those have a 1 inch default margin. Lets
add a margin of 30 pixels (write margin: 30px;). Notice how the edge of the div now has space between it and the edge of the webpage.
Code:
.redbackground {
background-color: red;
height: 300px;
padding: 20px;
border: 10px solid black;
margin: 30px;
}
.centered {
text-align: center;
}
Speaker notes

Real developers use Google... a lot

Google is one of your most valuable tools as a developer. Finding the solution to a new problem through research is a very common task of a real
developer. I encourage you to, if you’re unsure of how to solve a problem, to google a question and look for an answer. If you encounter a problem, it
more than likely that another developer has had the same problem and have posted it online.
Speaker notes

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

Here is the link to the assignments. Once you open it, sign up for repl.it and then click on the classroom on the left. Work through these challenges
as best you can. Make sure to google things you’re unsure on and if you’re stuck, we’re here to help you out. Don’t hesitate to ask!
Speaker notes

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

So I just wanted to spend the last few minutes talking about different ways to keep learning.
I know that there are so many different paths, some of which, like Google. we even used today.
Some paths like CodeAcademy are great resources to learn programming fundamentals but often times they lack the support resources to help
students when they run into a problem.
And these two factors of structure and support are the two things that I recommend students look for when looking at different paths to keep learning
- as these two factors are the top two success factors for a successful student.
Speaker notes

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

In terms of structure, students should be asking what does the program look like - is it 1:1, 1:15 1:30? and what is the frequency?
From our experience with students, we've learned that the most effective support is 1:1 - this way each student can get their speciﬁc questions and
challenges addressed to keep learning and building.
In our program, each student is working 1:1 with a mentor throughout the program and these mentoring sessions can be scheduled around your
schedule, allowing students to have ﬂexibility to learn how to program while maintaining their job
Speaker notes

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

The second thing I tell students to look for is support, both technically and professionally.
On the technical side of things, how often are they able to meet with a professional -
1x/week, 3 x/week 24 /7?
And on the career side of things, are they working with someone to make sure that they are really job ready? Does this career support happen
during the program?
We dont want students to sacriﬁce ﬂexibility for support and this high level of support is really what drives our high placement rate.
Speaker notes

Our results
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

Trying Thinkful
Talk to me (or email jasjit@thinkful.com ) if you'reTalk to me (or email jasjit@thinkful.com ) if you're
interestedinterested
Get a free trial of Thinkful
with three mentor sessions
Starting with HTML/CSS/JS,
with option to continue to
full program
26

http://bit.ly/tf-feedback
July 2017

Deck 893ff61f-1fb8-4e15-a379-775dfdbcee77-12-53

More Related Content

What's hot

Similar to Deck 893ff61f-1fb8-4e15-a379-775dfdbcee77-12-53

More from Ivy Rueb

Recently uploaded

Deck 893ff61f-1fb8-4e15-a379-775dfdbcee77-12-53