Heads up! To view this whole video, sign in with your Treehouse account or enroll in your free 7-day trial. Sign In Enroll
Preview
Start a free Courses trial
to watch this video
Think of your favorite website. No matter what category it falls into, designing it wasn’t enough. Designers create the structure of a web page using sketches and wireframes and make decisions about color, typography, and photography when creating mockups. But until a developer gets involved, a mockup is just a picture. Developers turn that picture into an interactive website by writing code–code that instructs the web browser to display that text, present those images, and take the user to a new page once they’ve clicked a link.
Further reading
Related Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign upRelated Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign up
[MUSIC]
0:00
Think of your favorite website.
0:09
This could be a news website,
an e-commerce site for shopping,
0:10
an artist's portfolio site,
a social media platform or
0:15
a learning site like Treehouse.
0:20
No matter what category your
favorite site falls into,
0:22
it's bound to have a lot in
common with other websites.
0:26
To visit any website, you first
0:30
have to load it in a browser like
Google Chrome, Firefox or Safari.
0:33
Once it loads, the website
usually contains a way to
0:39
get around in the form of
navigation links or a search bar.
0:42
In addition to navigation,
you might find text to read,
0:47
images to look at, videos to
watch, and links to click on.
0:51
All these different types of websites
have something else in common.
0:56
Designing them wasn't enough.
Designers create the structure
1:00
of a web page using sketches
and wireframes, and make decisions
1:05
about color, typography, and
photography when creating mockups.
1:09
But until the developer gets involved,
a mockup is just a picture.
1:16
Developers turn that picture into
an interactive website by writing code:
1:20
code that instructs the web browser to
display that text, present those images,
1:25
take the user to a new page once
they've clicked a link and much more.
1:31
Hi, my name is Anwar.
1:37
I'm a designer, a developer and
a teacher at Treehouse.
1:38
My pronouns are he/him.
1:42
I'm here today to introduce you
to front-end web development.
1:44
In the opening of this video, you
learned that front-end web developers
1:49
write the code that turns a static
mockup into an interactive web page.
1:53
We'll take a look at the types of code
front-end developers write in an
1:59
upcoming video and even
try it out ourselves.
2:03
But before we do that, let's take
a closer look at the term front-end.
2:07
Front-end developers are sometimes
referred to as client side developers
2:12
since everything we code
is directly viewable by the client.
2:16
In other words, the visitor
to our website or app.
2:22
Here I am on Treehouse's website,
viewing a course called
2:27
HTML Basics using the
Google Chrome web browser.
2:30
There's a navigation bar featuring
the green Treehouse logo,
2:35
along with links called Home, Tracks,
Library, Community and Support.
2:39
The navigation uses light-colored
text on a dark gray background and
2:46
a typeface with rather round-looking
letters. There's a bit of empty
2:50
space beneath the navigation, and
then the main page contents begin
2:55
including a prominent button
inviting me to start the course.
3:01
How did all this content
appear in my browser?
3:06
How did Treehouse create a navigation
bar containing these exact words,
3:09
this exact combination of
colors and typography, and
3:15
exactly this much space underneath?
3:19
Why does this content rearrange
as I make my browser narrower
3:22
until my screen resembles
the size of a mobile device?
3:27
The answer is that a front-end
developer implemented these decisions
3:32
using code by writing a combination
of HTML, CSS, and JavaScript.
3:38
We'll begin investigating these
languages in our next video.
3:44
So if a front-end developer
controls the content and
3:50
presentation of webpages like this,
what does a back-end developer do?
3:53
Well, you might have noticed
that the top right corner of
3:59
the navigation bar remembers some
information about me as a user.
4:02
It looks like I've scored nearly 9,000
points while reviewing Treehouse lessons.
4:07
And there's a small
profile picture of me,
4:13
as well as my name if I
click the down arrow.
4:16
For a web application to
remember data about me,
4:19
it needs to store that information
somewhere on a database.
4:23
Back-end developers build
the databases that store information.
4:28
You'll learn more about back-end
development in the introduction to
4:33
Treehouse's Full Stack JavaScript
and Python Tech Degrees.
4:37
So what kind of student makes
a great front-end developer?
4:43
You'll need to be excited
about learning, exploring, and
4:47
practicing code since front-end
developers write a lot of it.
4:50
You'll want to constantly
seek inspiration.
4:55
Front-end developers are always
checking out other websites and
4:58
seeing how they work.
And while front-end
5:01
developers don't need to be
experts in User Experience design,
5:04
it helps to have at least some
interest in usability principles.
5:09
Everything you build will be
interacted with directly by users.
5:14
And as you'll be in constant
contact with designers,
5:18
it helps to speak their language.
5:21
Ready to check out some code?
We'll investigate the three
5:24
languages used by front-end
developers in our next video.
5:28
You need to sign up for Treehouse in order to download course files.
Sign upYou need to sign up for Treehouse in order to set up Workspace
Sign up